/**
 * Toba Market — Base
 * Reset + typography for anything inside .tts-market-root (the wrapper
 * every marketplace template renders inside). Deliberately scoped, not
 * global — never overrides the active theme's own base styles outside
 * the marketplace's own content areas.
 */

.tts-market-root {
	font-family: var(--tts-font-family);
	font-size: var(--tts-font-size-base);
	line-height: var(--tts-line-height-base);
	color: var(--tts-text);
	background: var(--tts-background);
}

.tts-market-root *,
.tts-market-root *::before,
.tts-market-root *::after {
	box-sizing: border-box;
}

.tts-market-root h1,
.tts-market-root h2,
.tts-market-root h3,
.tts-market-root h4 {
	line-height: var(--tts-line-height-tight);
	font-weight: 700;
	margin: 0 0 var(--tts-space-3);
	color: var(--tts-text);
}
.tts-market-root h1 { font-size: var(--tts-font-size-3xl); }
.tts-market-root h2 { font-size: var(--tts-font-size-2xl); }
.tts-market-root h3 { font-size: var(--tts-font-size-lg); }
.tts-market-root p  { margin: 0 0 var(--tts-space-3); }

.tts-market-root a {
	color: var(--tts-primary);
	text-decoration: none;
}
.tts-market-root a:hover { color: var(--tts-primary-hover); text-decoration: underline; }

/* Visible keyboard focus everywhere in the marketplace — never rely on
   color alone; the outline itself is the accessible signal. */
.tts-market-root a:focus-visible,
.tts-market-root button:focus-visible,
.tts-market-root input:focus-visible,
.tts-market-root select:focus-visible,
.tts-market-root textarea:focus-visible,
.tts-market-root [tabindex]:focus-visible {
	outline: 3px solid var(--tts-accent);
	outline-offset: 2px;
}

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

.tts-market-container {
	max-width: var(--tts-container-max);
	margin: 0 auto;
	padding-inline: var(--tts-space-4);
}

img { max-width: 100%; height: auto; }

/* A pure background-color rule (never width/position/margin) applied
   to the page's own <body>, scoped to pages that actually show Toba
   Market content (see Frontend::add_marketplace_body_class()) — so
   the entire page canvas is dark, not just the plugin's own content
   box, without any risk of the layout-breaking regression the
   previous full-bleed attempt caused on Elementor-built pages. A
   color change cannot conflict with a page builder's own container
   structure the way a width/position override can. */
body.tts-market-active-page {
	background: var(--tts-background);
}