/* ============================================================
   Sports Cards Shop — Base stylesheet
   Mobile-first: 375px base, scale at 768 / 1024 / 1440.
   Color tokens match SPEC.md Part 2.
   ============================================================ */

:root {
	/* Luxury vault palette — v2 brighter, warmer, more ambient gold per Session 2 design review. */
	--scs-color-bg: #0B0704;
	--scs-color-bg-deep: #060402;
	--scs-color-bg-warm: #130C06;
	--scs-color-surface: #1A1109;
	--scs-color-surface-raised: #24180D;

	--scs-color-gold: #D4AF37;
	--scs-color-gold-bright: #F0CE6A;
	--scs-color-gold-deep: #8E6B20;
	--scs-color-gold-soft: rgba(212, 175, 55, 0.65);
	--scs-color-gold-hairline: rgba(212, 175, 55, 0.32);
	--scs-color-gold-glow: rgba(240, 206, 106, 0.18);

	--scs-color-text: #FAF4E6;
	--scs-color-text-muted: #9A8E78;
	--scs-color-text-dim: #655A48;

	--scs-color-crimson: #B24430;

	/* Legacy tokens kept as aliases so Phase 1–2 CSS keeps working. */
	--scs-color-navy: var(--scs-color-bg);

	--scs-radius-sm: 2px;
	--scs-radius-md: 6px;
	--scs-radius-lg: 14px;

	--scs-space-1: 4px;
	--scs-space-2: 8px;
	--scs-space-3: 16px;
	--scs-space-4: 24px;
	--scs-space-5: 32px;
	--scs-space-6: 48px;
	--scs-space-7: 64px;
	--scs-space-8: 96px;

	--scs-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--scs-font-display: "Cinzel", "Playfair Display", "Trajan Pro", Georgia, serif;
	--scs-font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;

	--scs-max-width: 1280px;
	--scs-header-height: 72px;

	--scs-shadow-card: 0 10px 40px rgba(0, 0, 0, 0.7);
	--scs-shadow-gold: 0 0 28px rgba(229, 192, 110, 0.28);
	--scs-shadow-inset: inset 0 0 0 1px var(--scs-color-gold-hairline);

	--scs-transition-base: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Ambient warmth — multiple glows + subtle noise texture throughout the site. */
	--scs-noise: radial-gradient(circle at 18% 12%, rgba(212, 175, 55, 0.08), transparent 55%),
		radial-gradient(circle at 85% 25%, rgba(240, 206, 106, 0.06), transparent 50%),
		radial-gradient(circle at 50% 100%, rgba(212, 175, 55, 0.04), transparent 60%);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Force dark UA defaults (form controls, scrollbars, system inputs)
	   regardless of the visitor's OS / browser theme preference. */
	color-scheme: dark only;
	background-color: #0B0704;
}

/* Belt-and-braces: any third-party stylesheet that targets
   prefers-color-scheme: light is suppressed for our home + WC pages
   by re-asserting our dark palette on those queries. */
@media (prefers-color-scheme: light) {
	html, body.scs-body {
		color-scheme: dark !important;
		background-color: #0B0704 !important;
		color: #FAF4E6 !important;
	}
}

body.scs-body {
	margin: 0;
	font-family: var(--scs-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--scs-color-text);
	background-color: var(--scs-color-bg);
	background-image: var(--scs-noise);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--scs-color-gold);
	text-decoration: none;
	transition: color var(--scs-transition-base);
}

a:hover,
a:focus-visible {
	color: #ffdc5f;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--scs-font-display);
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 var(--scs-space-3);
}

p {
	margin: 0 0 var(--scs-space-3);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.scs-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--scs-color-gold);
	color: var(--scs-color-navy);
	padding: var(--scs-space-2) var(--scs-space-3);
	z-index: 100;
}

.scs-skip-link:focus {
	top: 0;
}

/* Layout */
.scs-container {
	width: 100%;
	max-width: var(--scs-max-width);
	margin: 0 auto;
	padding: 0 var(--scs-space-3);
}

/* Mobile — give the container more horizontal breathing room so
   page titles, breadcrumbs, filter toggles, and toolbars don't sit
   flush against the viewport edge. Applies to every page. */
@media (max-width: 767px) {
	.scs-container {
		padding: 0 20px;
	}
}

@media (max-width: 420px) {
	.scs-container {
		padding: 0 16px;
	}
}

.scs-main {
	min-height: 60vh;
	padding: var(--scs-space-5) 0;
}

.scs-layout {
	display: grid;
	gap: var(--scs-space-5);
}

@media (min-width: 1024px) {
	.scs-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* Header */
.scs-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--scs-header-bg, rgba(0, 0, 0, 0.78));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

.scs-site-header--scrolled {
	background-color: var(--scs-header-bg-scrolled, rgba(0, 0, 0, 0.92));
}

.scs-site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--scs-space-4);
	/* Wider than the site's default max-width so the header occupies
	   more of the viewport edge-to-edge. Padding holds a small visual
	   gutter so content never butts against the very edge. */
	max-width: 1600px;
	margin: 0 auto;
	padding: 14px var(--scs-space-5);
	min-height: 84px;
	flex-wrap: nowrap;
}

/* Actions container fills the remaining row width. Layout uses two
   auto-margin "pockets" (one on .scs-header-promo, one on
   .scs-account-menu) to create three distinct zones:
       LEFT   — contact + search (clustered close to brand)
       MIDDLE — partner logo (auto-margin push gives space on both sides)
       RIGHT  — account + cart (clustered at the far right edge)
   Base gap is space-4 — gives breathing room between adjacent items
   inside each cluster, while the wide separation between clusters
   comes from the two auto-margin pockets. */
.scs-site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--scs-space-4);
	flex: 1 1 auto;
	min-width: 0;
}

/* Brand-promotion logo slot — sits between the search bar and the
   account icon. Horizontal marquee: "Powered By" label on the left,
   partner wordmark on the right, sliding continuously right-to-left.
   Reserved 220×60 area so adding/swapping the partner logo later
   doesn't shift the surrounding icons. The --placeholder modifier
   paints a subtle dashed outline while empty. */
.scs-header-promo {
	flex: 0 0 auto;
	width: 220px;
	height: 60px;
	overflow: hidden;
	position: relative;
	border-radius: var(--scs-radius-sm);
	/* First auto-margin pocket: absorbs slack space between the LEFT
	   cluster (contact + search) and the partner logo, so the logo
	   sits with breathing room to its left rather than glued to the
	   search bar. The matching pocket on .scs-account-menu (further
	   down) does the same on the right side. */
	margin-left: auto;
}

.scs-header-promo--placeholder {
	border: 1px dashed var(--scs-color-gold-hairline);
	opacity: 0.55;
}

/* Continuous right→left marquee. Track holds two identical copies
   of [label + logo]; CSS animation translates the track left by
   exactly one copy width (-50% of total track) over 18s, then
   loops. Because the second copy is identical to the first, the
   loop is visually seamless. The big padding-right on each item
   (>= slot width) ensures the gap between consecutive copies is
   wider than the slot itself — so the slot only ever shows ONE
   copy crossing its edges at a time, never two halves of the logo
   simultaneously. */
.scs-header-promo__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	height: 100%;
	width: max-content;
	animation: scs-header-promo-marquee 18s linear infinite;
}

/* Pause on hover so users can read or click the link without it
   moving away from under the cursor. */
.scs-header-promo:hover .scs-header-promo__track {
	animation-play-state: paused;
}

.scs-header-promo__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	/* Padding-right ≥ slot width (220px) so during the marquee
	   transition only one copy is ever within the slot at a time —
	   no "logo cut in half" glitch. Bigger value = longer empty
	   period between repeats. */
	padding-right: 240px;
}

.scs-header-promo__label {
	font-family: var(--scs-font-sans);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright, #f0ce6a);
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	flex: 0 0 auto;
}

.scs-header-promo__link {
	display: flex;
	align-items: center;
	height: 100%;
	max-height: 44px;
	text-decoration: none;
	flex: 0 0 auto;
}

.scs-header-promo__img {
	max-height: 44px;
	width: auto;
	height: 44px;
	object-fit: contain;
	display: block;
}

@keyframes scs-header-promo-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.scs-header-promo__track {
		animation: none;
	}
}

/* Hide the slot below the desktop breakpoint to keep the mobile/tablet
   header from overflowing — the marquee only appears on larger
   layouts where there's headroom for it. */
@media (max-width: 1023px) {
	.scs-header-promo {
		display: none;
	}
}

/* Left — brand hard-anchored to the left edge, never grows or shrinks. */
.scs-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--scs-color-text);
	flex: 0 0 auto;
	margin-right: auto;
	min-width: 220px;
}

.scs-brand .custom-logo,
.scs-brand img {
	width: 220px;
	height: auto;
	max-height: 80px;
	object-fit: contain;
	display: block;
}

/* Text fallback — only shown if no custom logo is uploaded yet. */
.scs-brand__sitename {
	font-family: var(--scs-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	text-shadow: 0 0 12px rgba(240, 206, 106, 0.35);
	white-space: nowrap;
}

/* Row 2 — dedicated menu bar below the logo row.
   Always rendered. Mobile/tablet: collapses into a slide-down panel
   triggered by the hamburger button. Desktop: full inline bar. */
.scs-site-header__menubar {
	background-color: var(--scs-color-bg-warm);
	border-top: 1px solid var(--scs-color-gold-hairline);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

/* Mobile: hide initially, slide down when hamburger toggled. */
@media (max-width: 1023px) {
	.scs-site-header__menubar {
		display: none;
		position: relative;
	}
	.scs-site-header__menubar.is-open {
		display: block;
		animation: scs-menubar-slide 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

@keyframes scs-menubar-slide {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Hamburger toggle — visible only below desktop. */
.scs-mobile-nav-toggle {
	display: none;
	position: absolute;
	top: 22px;
	left: var(--scs-space-3);
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-sm);
	cursor: pointer;
	padding: 10px 8px;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	z-index: 60;
}

@media (max-width: 1023px) {
	.scs-mobile-nav-toggle { display: inline-flex; }
}

.scs-mobile-nav-toggle__bar {
	display: block;
	height: 2px;
	background-color: var(--scs-color-gold-bright);
	border-radius: 2px;
	transition: transform 0.25s, opacity 0.25s;
}

.scs-mobile-nav-toggle[aria-expanded="true"] .scs-mobile-nav-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.scs-mobile-nav-toggle[aria-expanded="true"] .scs-mobile-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.scs-mobile-nav-toggle[aria-expanded="true"] .scs-mobile-nav-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.scs-mobile-nav-toggle:hover,
.scs-mobile-nav-toggle:focus-visible {
	border-color: var(--scs-color-gold);
	background-color: rgba(212, 175, 55, 0.08);
	outline: none;
}

/* Mobile nav layout — vertical stack with bigger touch targets. */
@media (max-width: 1023px) {
	.scs-primary-nav {
		padding: var(--scs-space-3);
		justify-content: flex-start;
	}
	.scs-primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.scs-primary-nav__list > li {
		width: 100%;
		border-bottom: 1px solid var(--scs-color-gold-hairline);
	}
	.scs-primary-nav__list > li:last-child {
		border-bottom: 0;
	}
	.scs-primary-nav__list a {
		display: block;
		padding: 14px 8px;
		font-size: 0.95rem;
		letter-spacing: 0.12em;
	}
	/* Submenus on mobile expand inline below the parent (no hover popup). */
	.scs-primary-nav__list .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		padding: 0 0 var(--scs-space-2) var(--scs-space-3);
		min-width: 0;
	}
	.scs-primary-nav__list .sub-menu a {
		padding: 10px 8px;
		font-size: 0.85rem;
		color: var(--scs-color-text-muted);
	}
	/* Hide the submenu arrow indicator on mobile (always-expanded). */
	.scs-primary-nav__list .menu-item-has-children > a::after {
		display: none;
	}
	/* Keep the brand row visually clean even with the hamburger present. */
	.scs-site-header__inner {
		padding-left: 64px; /* room for hamburger on the left */
		gap: 8px;
	}
	/* Tighten the actions row so the cart icon can't overflow the
	   viewport on narrow phones. The contact + search are already
	   hidden by their own media queries below 1024 / 768. */
	.scs-site-header__actions {
		gap: 4px;
		justify-content: flex-end;
	}
}

/* Tablet & phone — shrink the brand block so the right-edge cart
   icon stays fully visible inside the viewport. The 220px desktop
   logo crowds out the actions column on small screens. */
@media (max-width: 767px) {
	.scs-brand {
		min-width: 0;
	}
	.scs-brand .custom-logo,
	.scs-brand img {
		width: 150px;
		max-height: 56px;
	}
	.scs-site-header__inner {
		padding: 10px 10px 10px 60px;
		min-height: 68px;
	}
	.scs-mobile-nav-toggle {
		top: 14px;
		left: 10px;
		width: 38px;
		height: 38px;
	}
	.scs-icon-btn {
		width: 38px;
		height: 38px;
	}
}

@media (max-width: 420px) {
	.scs-brand .custom-logo,
	.scs-brand img {
		width: 120px;
		max-height: 48px;
	}
	.scs-site-header__inner {
		padding: 8px 8px 8px 56px;
	}
	.scs-mobile-nav-toggle {
		left: 8px;
	}
	.scs-icon-btn {
		width: 36px;
		height: 36px;
	}
	.scs-icon-btn svg {
		width: 18px;
		height: 18px;
	}
}

.scs-primary-nav {
	display: flex;
	justify-content: center;
	max-width: var(--scs-max-width);
	margin: 0 auto;
	padding: 6px var(--scs-space-3);
}

.scs-primary-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--scs-space-4);
	flex-wrap: wrap;
	justify-content: center;
}

.scs-primary-nav__list a {
	color: var(--scs-color-text);
	text-decoration: none;
	font-family: var(--scs-font-sans);
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 4px;
	border-bottom: 1px solid transparent;
	transition: color var(--scs-transition-base), border-color var(--scs-transition-base);
}

.scs-primary-nav__list a:hover,
.scs-primary-nav__list .current-menu-item > a {
	color: var(--scs-color-gold-bright);
	border-bottom-color: var(--scs-color-gold);
}

/* --- Level-1 dropdowns (hover reveal) --- */
.scs-primary-nav__list li { position: relative; }

.scs-primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0;
	min-width: 200px;
	list-style: none;
	/* Top padding bridges the visual gap between the parent menu link
	   and the submenu so the cursor never crosses an empty void. */
	padding: 14px 0 10px;
	background-color: rgba(10, 6, 4, 0.96);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-sm);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 200ms;
	z-index: 60;
}

/* Open via hover OR via the .is-clicked class added by JS — the
   click variant keeps the menu open until the user clicks elsewhere
   or presses Escape. */
.scs-primary-nav__list li:hover > .sub-menu,
.scs-primary-nav__list li:focus-within > .sub-menu,
.scs-primary-nav__list li.is-clicked > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.scs-primary-nav__list .sub-menu a {
	display: block;
	padding: 8px 18px;
	border: 0;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--scs-color-text);
}

.scs-primary-nav__list .sub-menu a:hover {
	color: var(--scs-color-gold-bright);
	background-color: rgba(212, 175, 55, 0.08);
	border-bottom: 0;
}

/* Show the little arrow indicator on items that have a submenu. */
.scs-primary-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	vertical-align: middle;
	transform: translateY(-1px);
}

.scs-site-header__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--scs-color-text-muted);
	padding-right: 4px;
	/* Pair with margin-left:auto on .scs-account-menu so the empty
	   space is distributed equally on both sides of contact+search,
	   centering that group between the logo and the account/cart. */
	margin-left: auto;
}

@media (max-width: 1023px) {
	.scs-site-header__contact { display: none; }
}

.scs-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--scs-color-text-muted);
	text-decoration: none;
	transition: color var(--scs-transition-base);
	white-space: nowrap;
}

.scs-contact-link:hover,
.scs-contact-link:focus-visible {
	color: var(--scs-color-gold-bright);
}

.scs-contact-link svg {
	color: var(--scs-color-gold);
	flex-shrink: 0;
}

.scs-contact-link__sep {
	color: var(--scs-color-gold-hairline);
	user-select: none;
	font-weight: 300;
}

/* Inline header search — compact pill with leading icon */
.scs-header-search {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 1 240px;
	min-width: 180px;
	max-width: 260px;
	height: 38px;
	padding: 0 10px 0 8px;
	border: 1px solid var(--scs-color-gold-soft);
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.4);
	transition: border-color var(--scs-transition-base), box-shadow var(--scs-transition-base);
	/* Auto-margin so the empty horizontal space gets split evenly into
	   three slots (before contact, between contact and search, between
	   search and account) — making contact+search spread out across the
	   full available width instead of clustering in one place. */
	margin-left: auto;
}

.scs-header-search:focus-within {
	border-color: var(--scs-color-gold);
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}

.scs-header-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--scs-color-text);
	padding: 0 4px;
	font-family: var(--scs-font-sans);
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	outline: none;
}

.scs-header-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.scs-header-search input[type="search"]::placeholder {
	color: var(--scs-color-text-dim);
	opacity: 0.8;
}

.scs-header-search__submit {
	background: transparent;
	border: 0;
	color: var(--scs-color-gold);
	padding: 0 2px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	transition: color var(--scs-transition-base);
}

.scs-header-search__submit:hover,
.scs-header-search__submit:focus-visible {
	color: var(--scs-color-gold-bright);
	outline: none;
}

@media (max-width: 1023px) {
	.scs-header-search { flex: 0 1 200px; max-width: 220px; min-width: 160px; }
}

@media (max-width: 767px) {
	.scs-header-search { display: none; }
}

.scs-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: var(--scs-color-text);
	cursor: pointer;
	position: relative;
	transition: color var(--scs-transition-base), background var(--scs-transition-base);
	text-decoration: none;
}

.scs-icon-btn:hover,
.scs-icon-btn:focus-visible {
	color: var(--scs-color-gold-bright);
	background-color: rgba(212, 175, 55, 0.1);
	outline: none;
}

.scs-icon-btn__badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background-color: var(--scs-color-gold);
	color: #0a0604;
	font-size: 0.68rem;
	font-weight: 700;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Search panel */
.scs-search-panel {
	border-top: 1px solid var(--scs-color-gold-hairline);
	background-color: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(14px);
}

.scs-search-panel[hidden] { display: none; }

.scs-search-panel__form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: var(--scs-max-width);
	margin: 0 auto;
	padding: var(--scs-space-3);
}

.scs-search-panel__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background-color: var(--scs-color-bg-deep);
	color: var(--scs-color-text);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-sm);
	padding: 12px 14px;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.scs-search-panel__form input[type="search"]:focus {
	outline: none;
	border-color: var(--scs-color-gold);
}

/* Legacy .scs-site-header__account / __cart classes were replaced by .scs-icon-btn in Session 7 */

/* Footer — multi-column layout */
.scs-site-footer {
	background-color: var(--scs-color-bg-deep);
	color: var(--scs-color-text-muted);
	padding: var(--scs-space-6) 0 var(--scs-space-4);
	margin-top: var(--scs-space-8);
	border-top: 1px solid var(--scs-color-gold-hairline);
}

.scs-site-footer__inner {
	max-width: var(--scs-max-width);
	margin: 0 auto;
	padding: 0 var(--scs-space-3);
}

.scs-footer-cols {
	display: grid;
	gap: var(--scs-space-5);
	grid-template-columns: 1fr;
	padding-bottom: var(--scs-space-5);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

@media (min-width: 640px) {
	.scs-footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.scs-footer-cols {
		grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
		gap: var(--scs-space-6);
	}
}

.scs-footer-col__title {
	font-family: var(--scs-font-display);
	color: var(--scs-color-gold);
	font-size: 0.88rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 var(--scs-space-3);
}

.scs-footer-col__list,
.scs-footer-legal__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scs-footer-col__list li { margin-bottom: 8px; }

.scs-footer-col__list a,
.scs-footer-legal__list a {
	color: var(--scs-color-text-muted);
	text-decoration: none;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	transition: color var(--scs-transition-base);
}

.scs-footer-col__list a:hover,
.scs-footer-legal__list a:hover {
	color: var(--scs-color-gold-bright);
}

.scs-footer-col__tagline {
	margin: var(--scs-space-3) 0 0;
	color: var(--scs-color-text-muted);
	font-size: 0.88rem;
	max-width: 30ch;
}

.scs-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--scs-color-text);
}

.scs-footer-brand img,
.scs-footer-brand .custom-logo {
	width: 200px;
	height: auto;
	max-height: 80px;
	object-fit: contain;
}

/* Text fallback when no custom logo is uploaded. */
.scs-footer-brand__sitename {
	font-family: var(--scs-font-display);
	font-size: 1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--scs-color-gold);
}

/* Contact block */
.scs-footer-contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--scs-space-4);
	font-style: normal;
}

.scs-footer-contact__line {
	color: var(--scs-color-text-muted);
	text-decoration: none;
	font-size: 0.88rem;
}

.scs-footer-contact__line:hover { color: var(--scs-color-gold-bright); }

/* Hours of Operation */
.scs-footer-col__title--hours {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--scs-space-3);
}

.scs-footer-col__title--hours svg {
	color: var(--scs-color-gold);
	flex-shrink: 0;
}

.scs-footer-hours {
	list-style: none;
	margin: 0 0 var(--scs-space-3);
	padding: 12px 14px;
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(212, 175, 55, 0.04), rgba(0, 0, 0, 0.18));
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.scs-footer-hours li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--scs-color-text-muted);
	border-bottom: 1px dashed var(--scs-color-gold-hairline);
	padding-bottom: 6px;
}

.scs-footer-hours li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.scs-footer-hours__day {
	color: var(--scs-color-text);
	font-weight: 500;
}

.scs-footer-hours__time {
	color: var(--scs-color-gold-bright);
	font-family: var(--scs-font-display, "Cinzel"), serif;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.scs-footer-hours__closed .scs-footer-hours__time {
	color: var(--scs-color-text-muted);
	font-style: italic;
	opacity: 0.85;
}

/* Newsletter form */
.scs-footer-newsletter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.scs-footer-newsletter input[type="email"] {
	flex: 1 1 180px;
	min-width: 0;
	background-color: var(--scs-color-bg);
	border: 1px solid var(--scs-color-gold-hairline);
	color: var(--scs-color-text);
	padding: 12px 14px;
	border-radius: var(--scs-radius-sm);
	font-size: 0.88rem;
}

.scs-footer-newsletter input[type="email"]:focus {
	outline: none;
	border-color: var(--scs-color-gold);
}

.scs-footer-newsletter button { flex: 0 0 auto; padding: 12px 20px; }

/* Social + payments row */
.scs-footer-meta {
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-4);
	padding: var(--scs-space-4) 0;
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

@media (min-width: 768px) {
	.scs-footer-meta {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.scs-footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}

.scs-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--scs-color-gold-hairline);
	color: var(--scs-color-gold);
	transition: color var(--scs-transition-base), background var(--scs-transition-base), border-color var(--scs-transition-base);
}

.scs-footer-social a:hover {
	color: #0a0604;
	background-color: var(--scs-color-gold);
	border-color: var(--scs-color-gold);
}

.scs-footer-payments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.scs-pay-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 26px;
	padding: 0 8px;
	background-color: var(--scs-color-surface);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: 3px;
	color: var(--scs-color-text-muted);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	font-family: var(--scs-font-sans);
}

/* Bottom row */
.scs-footer-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-3);
	padding-top: var(--scs-space-4);
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

@media (min-width: 768px) {
	.scs-footer-bottom {
		flex-direction: row;
		text-align: left;
	}
}

.scs-footer-legal__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--scs-space-3);
}

.scs-footer-copyright {
	margin: 0;
	font-size: 0.82rem;
	color: var(--scs-color-text-muted);
}

/* Buttons — luxury outlined gold, matches "Explore Collection" / "View Drops" in the design. */
.scs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: var(--scs-radius-sm);
	font-family: var(--scs-font-sans);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--scs-color-gold);
	background-color: transparent;
	color: var(--scs-color-gold);
	cursor: pointer;
	transition: background-color var(--scs-transition-base), color var(--scs-transition-base), box-shadow var(--scs-transition-base), transform var(--scs-transition-base);
}

.scs-button:hover,
.scs-button:focus-visible {
	background-color: var(--scs-color-gold);
	color: #0A0806;
	box-shadow: var(--scs-shadow-gold);
}

.scs-button--gold {
	background-color: var(--scs-color-gold);
	color: #0A0806;
}

.scs-button--gold:hover,
.scs-button--gold:focus-visible {
	background-color: var(--scs-color-gold-bright);
	color: #0A0806;
	box-shadow: var(--scs-shadow-gold);
}

.scs-button--ghost {
	background-color: transparent;
	border-color: var(--scs-color-gold-soft);
	color: var(--scs-color-gold);
}

/* Home placeholder (fallback — the real homepage is in home.css). */
.scs-home-placeholder {
	padding: var(--scs-space-7) 0;
	text-align: center;
}

.scs-home-placeholder__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: var(--scs-color-gold);
	font-size: 0.82rem;
	margin-bottom: var(--scs-space-3);
}

.scs-home-placeholder__title {
	font-family: var(--scs-font-display);
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	letter-spacing: 0.12em;
	margin-bottom: var(--scs-space-3);
	text-transform: uppercase;
}

.scs-home-placeholder__lead {
	color: var(--scs-color-text-muted);
	max-width: 560px;
	margin: 0 auto var(--scs-space-4);
}

/* Archive / post list */
.scs-archive-header {
	margin-bottom: var(--scs-space-5);
}

.scs-archive-grid {
	display: grid;
	gap: var(--scs-space-4);
}

@media (min-width: 768px) {
	.scs-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.scs-post-card {
	padding: var(--scs-space-4);
	background-color: var(--scs-color-surface);
	border-radius: var(--scs-radius-md);
	box-shadow: var(--scs-shadow-card);
}

.scs-post-card__title {
	font-size: 1.35rem;
	margin-bottom: var(--scs-space-2);
}

.scs-post-card__title a {
	color: var(--scs-color-text);
}

.scs-post-card__meta {
	color: var(--scs-color-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--scs-space-3);
}

/* 404 */
.scs-404 {
	text-align: center;
	padding: var(--scs-space-7) 0;
}

.scs-404__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
}

.scs-404__subtitle {
	color: var(--scs-color-text-muted);
	margin-bottom: var(--scs-space-5);
}

/* Sidebar */
.scs-sidebar {
	background-color: var(--scs-color-surface);
	padding: var(--scs-space-4);
	border-radius: var(--scs-radius-md);
}

.scs-widget + .scs-widget {
	margin-top: var(--scs-space-4);
}

.scs-widget__title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--scs-color-gold);
	margin-bottom: var(--scs-space-3);
}

.scs-no-results {
	color: var(--scs-color-text-muted);
	padding: var(--scs-space-4);
	background-color: var(--scs-color-surface);
	border-radius: var(--scs-radius-md);
}

/* ============================================================
   Scrollbar — flat, black background, brown border.
   Firefox uses scrollbar-color; WebKit uses ::-webkit-scrollbar.
   ============================================================ */

html { scrollbar-color: #4a2e15 #000000; scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; background: #000000; }
::-webkit-scrollbar-track { background: #000000; border-left: 1px solid #4a2e15; }
::-webkit-scrollbar-thumb {
	background: #000000;
	border: 1px solid #4a2e15;
	border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: #1a0f05; border-color: #8B5A2B; }
::-webkit-scrollbar-corner { background: #000000; }

/* Inner scrollable panes (carousel tracks, dropdowns) inherit. */

/* ============================================================
   Account dropdown — Login / Register (or My Account / Logout)
   ============================================================ */

.scs-account-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Push account + cart together to the far right edge of the header. */
	margin-left: auto;
}

/* Tighter gap between the account dropdown and cart icon so they sit
   as a clear pair at the right end. */
.scs-account-menu + .scs-icon-btn--cart {
	margin-left: 4px;
}

.scs-account-menu__btn {
	cursor: pointer;
}

.scs-account-menu__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: rgba(10, 6, 4, 0.98);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-md);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 200ms;
	z-index: 120;
}

.scs-account-menu[data-open="true"] .scs-account-menu__list,
.scs-account-menu:hover .scs-account-menu__list,
.scs-account-menu:focus-within .scs-account-menu__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.scs-account-menu__link {
	display: block;
	padding: 9px 14px;
	border-radius: var(--scs-radius-sm);
	color: var(--scs-color-text);
	font-family: var(--scs-font-sans);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 200ms, color 200ms;
}

.scs-account-menu__link:hover,
.scs-account-menu__link:focus-visible {
	background-color: rgba(212, 175, 55, 0.12);
	color: var(--scs-color-gold-bright);
	outline: none;
}

/* Light themes that swap to a cream surface need a matching menu bg. */
[data-theme="vintage-card"] .scs-account-menu__list,
[data-theme="courtside"] .scs-account-menu__list,
[data-theme="coliseum"] .scs-account-menu__list,
[data-theme="pitch-white"] .scs-account-menu__list,
[data-theme="mono-press"] .scs-account-menu__list,
[data-theme="bauhaus"] .scs-account-menu__list,
[data-theme="sakura"] .scs-account-menu__list,
[data-theme="dusty-attic"] .scs-account-menu__list {
	background-color: rgba(255, 251, 240, 0.98);
}
[data-theme="vintage-card"] .scs-account-menu__link,
[data-theme="courtside"] .scs-account-menu__link,
[data-theme="coliseum"] .scs-account-menu__link,
[data-theme="pitch-white"] .scs-account-menu__link,
[data-theme="mono-press"] .scs-account-menu__link,
[data-theme="bauhaus"] .scs-account-menu__link,
[data-theme="sakura"] .scs-account-menu__link,
[data-theme="dusty-attic"] .scs-account-menu__link { color: var(--scs-color-text); }

/* ============================================================
   Standard page layout — used by Refund Policy, Terms, Contact,
   and any other static page rendered through page.php.
   ============================================================ */

.scs-page {
	max-width: 760px;
	margin: var(--scs-space-6) auto var(--scs-space-7);
	padding: 0 var(--scs-space-3);
}

.scs-page__header {
	text-align: center;
	margin-bottom: var(--scs-space-5);
	padding-bottom: var(--scs-space-3);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

.scs-page__title {
	font-family: var(--scs-font-display);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	margin: 0;
}

.scs-page__content {
	font-family: var(--scs-font-sans);
	font-size: 1rem;
	line-height: 1.78;
	color: var(--scs-color-text);
}

.scs-page__content h2 {
	font-family: var(--scs-font-display);
	font-size: 1.25rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	margin: var(--scs-space-5) 0 var(--scs-space-2);
}

.scs-page__content h3 {
	font-family: var(--scs-font-display);
	font-size: 1.05rem;
	color: var(--scs-color-gold);
	margin: var(--scs-space-4) 0 var(--scs-space-2);
}

.scs-page__content p { margin: 0 0 var(--scs-space-3); }
.scs-page__content ul,
.scs-page__content ol { margin: 0 0 var(--scs-space-3) var(--scs-space-4); }
.scs-page__content li { margin-bottom: 6px; }

.scs-page__content a {
	color: var(--scs-color-gold-bright);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
	transition: color 0.2s, border-color 0.2s;
}

.scs-page__content a:hover {
	color: #FFFFFF;
	border-bottom-color: var(--scs-color-gold-bright);
}

/* ============================================================
   Contact form ([scs_contact_form] shortcode)
   ============================================================ */

.scs-contact-form {
	margin: var(--scs-space-4) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-3);
	padding: var(--scs-space-4);
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,0.06), transparent 70%),
		linear-gradient(180deg, var(--scs-color-surface) 0%, var(--scs-color-bg-deep) 100%);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-md);
}

.scs-contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--scs-space-3);
}

@media (min-width: 600px) {
	.scs-contact-form__row { grid-template-columns: 1fr 1fr; }
}

.scs-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.scs-contact-form__label {
	font-family: var(--scs-font-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
}

.scs-contact-form input[type="text"],
.scs-contact-form input[type="email"],
.scs-contact-form input[type="tel"],
.scs-contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--scs-color-gold-soft);
	border-radius: var(--scs-radius-sm);
	color: var(--scs-color-text);
	font-family: var(--scs-font-sans);
	font-size: 0.95rem;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.scs-contact-form input:focus,
.scs-contact-form textarea:focus {
	outline: none;
	border-color: var(--scs-color-gold);
	background-color: rgba(0, 0, 0, 0.7);
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

.scs-contact-form input::placeholder,
.scs-contact-form textarea::placeholder {
	color: var(--scs-color-text-dim);
}

.scs-contact-form textarea {
	resize: vertical;
	min-height: 140px;
	font-family: var(--scs-font-sans);
}

.scs-contact-form__submit {
	align-self: flex-start;
	margin-top: var(--scs-space-2);
}

.scs-contact-form__notice {
	margin: 0 0 var(--scs-space-3);
	padding: 12px 16px;
	border-radius: var(--scs-radius-sm);
	font-family: var(--scs-font-sans);
	font-size: 0.92rem;
}

.scs-contact-form__notice--ok {
	background-color: rgba(212, 175, 55, 0.12);
	border: 1px solid var(--scs-color-gold);
	color: var(--scs-color-gold-bright);
}

.scs-contact-form__notice--err {
	background-color: rgba(178, 68, 48, 0.18);
	border: 1px solid var(--scs-color-crimson);
	color: #FFB3A0;
}

/* ============================================================
   Floating WhatsApp button — fixed to bottom-right of viewport
   on every page, links straight to the support number.
   ============================================================ */

.scs-floating-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 200;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 30%, #1a1208 0%, #0a0604 70%);
	color: var(--scs-color-gold-bright, #f0ce6a);
	border: 1.5px solid var(--scs-color-gold, #D4AF37);
	box-shadow:
		0 8px 24px rgba(212, 175, 55, 0.32),
		0 4px 10px rgba(0, 0, 0, 0.55),
		inset 0 0 0 1px rgba(212, 175, 55, 0.18);
	transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.25s,
		color 0.25s,
		border-color 0.25s,
		background 0.25s;
	text-decoration: none;
	animation: scs-wa-pulse 2.4s ease-in-out infinite;
}

.scs-floating-whatsapp:hover,
.scs-floating-whatsapp:focus-visible {
	transform: scale(1.08);
	background:
		radial-gradient(circle at 30% 30%, #2a1d10 0%, #100a06 70%);
	color: #fff5dc;
	border-color: var(--scs-color-gold-bright, #f0ce6a);
	box-shadow:
		0 12px 32px rgba(212, 175, 55, 0.55),
		0 4px 14px rgba(0, 0, 0, 0.6),
		inset 0 0 0 1px rgba(240, 206, 106, 0.35);
	outline: none;
	animation: none;
}

.scs-floating-whatsapp svg {
	display: block;
	filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.45));
}

/* Subtle pulse halo so the button gently calls attention without
   being annoying. Disabled on hover and for reduced-motion users. */
@keyframes scs-wa-pulse {
	0%, 100% {
		box-shadow:
			0 8px 24px rgba(212, 175, 55, 0.32),
			0 4px 10px rgba(0, 0, 0, 0.55),
			inset 0 0 0 1px rgba(212, 175, 55, 0.18),
			0 0 0 0 rgba(212, 175, 55, 0.55);
	}
	50% {
		box-shadow:
			0 8px 24px rgba(212, 175, 55, 0.32),
			0 4px 10px rgba(0, 0, 0, 0.55),
			inset 0 0 0 1px rgba(212, 175, 55, 0.18),
			0 0 0 14px rgba(212, 175, 55, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scs-floating-whatsapp { animation: none; }
}

/* Phone — slightly smaller + tighter to edge so it doesn't dominate. */
@media (max-width: 600px) {
	.scs-floating-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 52px;
		height: 52px;
	}
	.scs-floating-whatsapp svg {
		width: 28px;
		height: 28px;
	}
}

/* ============================================================
   Mobile overflow guard — prevent any rogue image, carousel,
   marquee, or fixed-width block from forcing the whole page
   to scroll horizontally on phones / narrow tablets.
   ============================================================ */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

img,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
	height: auto;
}

.scs-home,
.scs-main,
.scs-container,
section,
article,
.scs-hero,
.scs-product-wrap {
	max-width: 100%;
}

@media (max-width: 1023px) {
	.scs-home,
	.scs-main,
	.scs-container,
	section,
	article,
	.scs-hero,
	.scs-product-wrap {
		overflow-x: clip;
	}
}

/* ============================================================
   Catalog mode (toggle in Settings → General). Three pieces of
   chrome: a sitewide top bar, a cart-page notice replacing the
   "Proceed to Checkout" button, and CSS that hides the block-
   based checkout button (since the PHP action only fires on the
   classic cart shortcode).
   ============================================================ */

.scs-catalog-topbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	background: linear-gradient(90deg, rgba(48, 32, 8, 0.96) 0%, rgba(72, 48, 16, 0.96) 50%, rgba(48, 32, 8, 0.96) 100%);
	color: var(--scs-color-gold-bright, #f0ce6a);
	font-family: var(--scs-font-sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-align: center;
	border-bottom: 1px solid var(--scs-color-gold-hairline);
	position: relative;
	z-index: 60;
}

.scs-catalog-topbar__icon {
	font-size: 0.9rem;
	filter: drop-shadow(0 0 8px rgba(240, 206, 106, 0.6));
}

@media (max-width: 600px) {
	.scs-catalog-topbar {
		font-size: 0.7rem;
		padding: 7px 12px;
	}
}

/* Cart-page notice that REPLACES the "Proceed to Checkout" button
   when catalog mode is ON. Sits in the same flex slot the button
   used so the cart layout stays balanced. */
.scs-catalog-notice {
	margin-top: var(--scs-space-3);
	padding: var(--scs-space-4);
	background:
		radial-gradient(ellipse at top right, rgba(212, 175, 55, 0.06), transparent 70%),
		linear-gradient(180deg, var(--scs-color-surface, #14100a) 0%, var(--scs-color-bg-deep, #0b0704) 100%);
	border: 1px solid var(--scs-color-gold-hairline);
	border-left: 3px solid var(--scs-color-gold-bright, #f0ce6a);
	border-radius: var(--scs-radius-md);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.scs-catalog-notice__eyebrow {
	display: inline-block;
	font-family: var(--scs-font-sans);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright, #f0ce6a);
	margin-bottom: 6px;
}

.scs-catalog-notice__title {
	font-family: var(--scs-font-display, "Cinzel", serif);
	font-size: clamp(1.4rem, 2.5vw, 1.8rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #FFFFFF;
	margin: 0 0 12px;
}

.scs-catalog-notice__body {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--scs-color-text-muted, #b9a888);
	margin: 0 0 var(--scs-space-3);
	max-width: 56ch;
}

.scs-catalog-notice__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 var(--scs-space-2);
}

.scs-catalog-notice__cta .scs-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.scs-catalog-notice__fine {
	margin: 0;
	font-size: 0.74rem;
	color: var(--scs-color-text-muted, #b9a888);
	font-style: italic;
	opacity: 0.85;
}

/* Block-based cart UI — hide the proceed-to-checkout block since
   the PHP action only fires for the classic shortcode. body class
   .scs-catalog-mode is added by inc/catalog-mode.php whenever
   catalog mode is on. */
body.scs-catalog-mode .wp-block-woocommerce-proceed-to-checkout-block,
body.scs-catalog-mode .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper + a,
body.scs-catalog-mode .wc-block-cart__submit,
body.scs-catalog-mode .wc-block-cart__submit-container,
body.scs-catalog-mode a.checkout-button,
body.scs-catalog-mode .checkout-button {
	display: none !important;
}