/* ==========================================================================
   The Puigberts – mode fosc
   ========================================================================== */

html.tp-dark {
	--tp-black: #f2f2f2;
	--tp-white: #101010;
	--tp-gray: #171717;
	--tp-border: rgba(255, 255, 255, 0.12);
	--tp-muted: rgba(255, 255, 255, 0.66);
	--tp-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

html.tp-dark body {
	background: var(--tp-white);
	color: var(--tp-black);
}

html.tp-dark .tp-header,
html.tp-dark .tp-theme-card,
html.tp-dark .tp-nav ul ul {
	background: #161616;
}

html.tp-dark .tp-btn,
html.tp-dark .tp-main .button {
	background: var(--tp-black);
	color: var(--tp-white);
	border-color: var(--tp-black);
}

html.tp-dark .tp-btn:hover,
html.tp-dark .tp-main .button:hover {
	background: transparent;
	color: var(--tp-black);
}

html.tp-dark .tp-cat-card,
html.tp-dark .tp-theme-thumb {
	filter: brightness(0.86);
}

html.tp-dark .tp-size-table thead th {
	background: #1d1d1d;
}

html.tp-dark .tp-cookie-banner {
	background: #1d1d1d;
	color: #f2f2f2;
}

html.tp-dark .tp-hero {
	background: linear-gradient(135deg, #141414, #0e0e0e);
}

html.tp-dark .tp-header-themes {
	border-color: var(--tp-black);
}

html.tp-dark .tp-cart-count,
html.tp-dark .tp-theme-badge {
	background: var(--tp-accent);
	color: #111;
}

.tp-dark-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	display: grid;
	place-items: center;
	background: var(--tp-black);
	color: var(--tp-white);
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: transform var(--tp-transition);
}

.tp-dark-toggle:hover {
	transform: scale(1.06);
}

.tp-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 80px;
	z-index: 998;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--tp-black);
	color: var(--tp-white);
	font-size: 1.4rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tp-transition), visibility var(--tp-transition);
}

.tp-back-to-top.visible {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 768px) {
	html.tp-dark .tp-theme-card {
		background: #161616;
	}
}