/**
 * CarGirlSociety - Core Theme Styles
 */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
	/* Raster */
	--cgs-container-wide: 1280px;
	--cgs-container-content: 780px;
	--cgs-radius-sm: 6px;
	--cgs-radius-md: 12px;
	--cgs-radius-lg: 20px;
	--cgs-radius-xl: 28px;
	--cgs-radius-pill: 9999px;

	/* Typografie */
	--cgs-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--cgs-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--cgs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Easing / Motion */
	--cgs-ease: cubic-bezier(.2, .7, .2, 1);
	--cgs-dur: 220ms;

	/* Schatten */
	--cgs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
	--cgs-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
	--cgs-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.38);
	--cgs-glow: 0 0 32px rgba(159, 122, 234, 0.35);
}

/* ---- Dark Mode Tokens (default) ---- */
:root,
html[data-color-mode="dark"] {
	--cgs-c-bg-base:     #0F0B1A;
	--cgs-c-bg-elevated: #1A1428;
	--cgs-c-bg-overlay:  #251A38;
	--cgs-c-bg-raised:   #2D2440;

	--cgs-c-primary:       #9F7AEA;
	--cgs-c-primary-hover: #B794F6;
	--cgs-c-primary-soft:  rgba(159, 122, 234, 0.15);
	--cgs-c-accent:        #ED64A6;
	--cgs-c-accent-hover:  #F687B3;

	--cgs-c-text:       #F7F4FC;
	--cgs-c-text-muted: #B8B0C8;
	--cgs-c-text-faint: #7E7591;

	--cgs-c-border:       #2D2440;
	--cgs-c-border-hover: #3C2E52;

	--cgs-c-success: #48BB78;
	--cgs-c-warning: #F6AD55;
	--cgs-c-error:   #FC8181;

	--cgs-c-input-bg:     #15101F;
	--cgs-c-input-border: #3C2E52;
	--cgs-c-input-focus:  var(--cgs-c-primary);

	color-scheme: dark;
}

/* ---- Light Mode Tokens ---- */
html[data-color-mode="light"] {
	--cgs-c-bg-base:     #FAFAFB;
	--cgs-c-bg-elevated: #FFFFFF;
	--cgs-c-bg-overlay:  #F4F0FA;
	--cgs-c-bg-raised:   #EFE9F7;

	--cgs-c-primary:       #6B46C1;
	--cgs-c-primary-hover: #553C9A;
	--cgs-c-primary-soft:  rgba(107, 70, 193, 0.12);
	--cgs-c-accent:        #D53F8C;
	--cgs-c-accent-hover:  #B83280;

	--cgs-c-text:       #1A1428;
	--cgs-c-text-muted: #4A4055;
	--cgs-c-text-faint: #7E7591;

	--cgs-c-border:       #E2DDEA;
	--cgs-c-border-hover: #CABEDC;

	--cgs-c-success: #2F855A;
	--cgs-c-warning: #C05621;
	--cgs-c-error:   #C53030;

	--cgs-c-input-bg:     #FFFFFF;
	--cgs-c-input-border: #D4CBE2;
	--cgs-c-input-focus:  var(--cgs-c-primary);

	color-scheme: light;
}

/* ---- Auto-Mode: System folgt prefers-color-scheme ---- */
@media (prefers-color-scheme: light) {
	html[data-color-mode="auto"] {
		--cgs-c-bg-base:     #FAFAFB;
		--cgs-c-bg-elevated: #FFFFFF;
		--cgs-c-bg-overlay:  #F4F0FA;
		--cgs-c-bg-raised:   #EFE9F7;
		--cgs-c-primary:       #6B46C1;
		--cgs-c-primary-hover: #553C9A;
		--cgs-c-primary-soft:  rgba(107, 70, 193, 0.12);
		--cgs-c-accent:        #D53F8C;
		--cgs-c-accent-hover:  #B83280;
		--cgs-c-text:       #1A1428;
		--cgs-c-text-muted: #4A4055;
		--cgs-c-text-faint: #7E7591;
		--cgs-c-border:       #E2DDEA;
		--cgs-c-border-hover: #CABEDC;
		--cgs-c-input-bg:     #FFFFFF;
		--cgs-c-input-border: #D4CBE2;
		color-scheme: light;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	font-family: var(--cgs-font-body);
	color: var(--cgs-c-text);
	background: var(--cgs-c-bg-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--cgs-c-primary);
	text-decoration: none;
	transition: color var(--cgs-dur) var(--cgs-ease);
}
a:hover,
a:focus-visible {
	color: var(--cgs-c-primary-hover);
}

:focus-visible {
	outline: 2px solid var(--cgs-c-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Skip-Link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: -9999px;
	background: var(--cgs-c-primary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: var(--cgs-radius-md);
	z-index: 100000;
	font-weight: 600;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.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;
}

/* ==========================================================================
   3. Layout-Primitives
   ========================================================================== */

.wp-block-group,
.wp-block-column,
.wp-block-columns {
	min-width: 0;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   4. Header / Navigation
   ========================================================================== */

header.wp-block-template-part,
.wp-block-template-part[data-type="header"],
.wp-block-template-part[data-area="header"] {
	position: sticky;
	top: 0;
	z-index: 100;
}
.cgs-site-header {
	background: color-mix(in srgb, var(--cgs-c-bg-base) 85%, transparent);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--cgs-c-border);
	transition: background var(--cgs-dur) var(--cgs-ease),
	            border-color var(--cgs-dur) var(--cgs-ease);
}
body.cgs-header-not-sticky header.wp-block-template-part,
body.cgs-header-not-sticky .wp-block-template-part[data-type="header"],
body.cgs-header-not-sticky .wp-block-template-part[data-area="header"] {
	position: static;
}

/* Navigation */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--cgs-radius-pill);
	transition: background var(--cgs-dur) var(--cgs-ease),
	            color var(--cgs-dur) var(--cgs-ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: var(--cgs-c-primary-soft);
	color: var(--cgs-c-primary-hover);
}

/* ==========================================================================
   5. Hero / Sections
   ========================================================================== */

.cgs-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--cgs-radius-xl);
	isolation: isolate;
}
.cgs-hero::before {
	content: "";
	position: absolute;
	inset: -20%;
	background: radial-gradient(ellipse at 30% 20%, var(--cgs-c-primary-soft) 0%, transparent 55%),
	            radial-gradient(ellipse at 80% 90%, rgba(237, 100, 166, 0.18) 0%, transparent 55%);
	z-index: -1;
	pointer-events: none;
}

.cgs-kicker {
	display: inline-block;
	font-family: var(--cgs-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cgs-c-primary);
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--cgs-c-border);
	border-radius: var(--cgs-radius-pill);
	background: var(--cgs-c-primary-soft);
}

.is-style-cgs-kicker {
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cgs-c-primary) !important;
}

.is-style-cgs-gradient {
	background: linear-gradient(135deg, var(--cgs-c-primary), var(--cgs-c-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ==========================================================================
   6. Cards / Buttons / Chips
   ========================================================================== */

.is-style-cgs-card {
	background: var(--cgs-c-bg-elevated);
	border: 1px solid var(--cgs-c-border);
	border-radius: var(--cgs-radius-lg);
	padding: clamp(1rem, 2vw, 1.75rem);
	box-shadow: var(--cgs-shadow-sm);
	transition: transform var(--cgs-dur) var(--cgs-ease),
	            border-color var(--cgs-dur) var(--cgs-ease),
	            box-shadow var(--cgs-dur) var(--cgs-ease);
}
.is-style-cgs-card:hover {
	transform: translateY(-2px);
	border-color: var(--cgs-c-border-hover);
	box-shadow: var(--cgs-shadow-md);
}

.is-style-cgs-card-outline {
	background: transparent;
	border: 1px solid var(--cgs-c-border);
	border-radius: var(--cgs-radius-lg);
	padding: clamp(1rem, 2vw, 1.75rem);
}

.is-style-cgs-spotlight {
	position: relative;
	isolation: isolate;
	border-radius: var(--cgs-radius-xl);
	overflow: hidden;
}
.is-style-cgs-spotlight::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto auto;
	width: 60vw;
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--cgs-c-primary-soft) 0%, transparent 65%);
	z-index: -1;
	pointer-events: none;
}

/* Buttons - Varianten */
.wp-block-button.is-style-cgs-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--cgs-c-primary) !important;
	border: 1.5px solid var(--cgs-c-primary) !important;
}
.wp-block-button.is-style-cgs-ghost .wp-block-button__link:hover {
	background: var(--cgs-c-primary-soft) !important;
	color: var(--cgs-c-primary-hover) !important;
	border-color: var(--cgs-c-primary-hover) !important;
}

.wp-block-button.is-style-cgs-accent .wp-block-button__link {
	background: linear-gradient(135deg, var(--cgs-c-primary), var(--cgs-c-accent)) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: var(--cgs-shadow-sm);
}
.wp-block-button.is-style-cgs-accent .wp-block-button__link:hover {
	filter: brightness(1.08);
	box-shadow: var(--cgs-glow);
}

.wp-block-button.is-style-cgs-soft .wp-block-button__link {
	background: var(--cgs-c-primary-soft) !important;
	color: #fff !important;
	border: 0 !important;
}
.wp-block-button.is-style-cgs-soft .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--cgs-c-primary) 22%, transparent) !important;
	color: var(--cgs-c-primary-hover) !important;
}

/* Chips-List */
.is-style-cgs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.is-style-cgs-chips li {
	padding: 0.375rem 0.75rem;
	border-radius: var(--cgs-radius-pill);
	background: var(--cgs-c-bg-elevated);
	border: 1px solid var(--cgs-c-border);
	font-size: 0.8125rem;
	color: var(--cgs-c-text-muted);
}

/* Image tilt */
.is-style-cgs-tilt img {
	transform: rotate(-2deg);
	transition: transform var(--cgs-dur) var(--cgs-ease);
	border-radius: var(--cgs-radius-md);
}
.is-style-cgs-tilt:hover img {
	transform: rotate(0);
}

/* Separator gradient */
.is-style-cgs-gradient.wp-block-separator {
	height: 2px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--cgs-c-primary), var(--cgs-c-accent), transparent);
	opacity: 0.85;
}

/* ==========================================================================
   6b. Category-Teaser-Cards
   ========================================================================== */

.cgs-category-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--cgs-c-bg-elevated);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--cgs-dur) var(--cgs-ease),
	            box-shadow var(--cgs-dur) var(--cgs-ease);
}
.cgs-category-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(15, 11, 26, 0) 0%, rgba(15, 11, 26, 0.82) 100%);
	pointer-events: none;
}
.cgs-category-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--cgs-shadow-md);
}
.cgs-category-card--sticker {
	background-image:
		linear-gradient(180deg, rgba(15, 11, 26, 0) 10%, rgba(15, 11, 26, 0.7) 100%),
		linear-gradient(135deg, #6B46C1 0%, #ED64A6 100%);
}
.cgs-category-card--bekleidung {
	background-image:
		linear-gradient(180deg, rgba(15, 11, 26, 0) 10%, rgba(15, 11, 26, 0.7) 100%),
		linear-gradient(135deg, #9F7AEA 0%, #4C51BF 100%);
}
.cgs-category-card--sonstiges {
	background-image:
		linear-gradient(180deg, rgba(15, 11, 26, 0) 10%, rgba(15, 11, 26, 0.7) 100%),
		linear-gradient(135deg, #ED64A6 0%, #F6AD55 100%);
}
.cgs-category-card .cgs-category-card__body {
	color: #fff;
}
.cgs-category-card .cgs-category-card__body .wp-block-heading {
	color: #fff !important;
}
.cgs-category-card .cgs-category-card__body .cgs-text-muted {
	color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	font: inherit;
	color: var(--cgs-c-text);
	background: var(--cgs-c-input-bg);
	border: 1.5px solid var(--cgs-c-input-border);
	border-radius: var(--cgs-radius-md);
	transition: border-color var(--cgs-dur) var(--cgs-ease),
	            box-shadow var(--cgs-dur) var(--cgs-ease);
}
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--cgs-c-input-focus);
	box-shadow: 0 0 0 4px var(--cgs-c-primary-soft);
}
::placeholder {
	color: var(--cgs-c-text-faint);
	opacity: 1;
}

label {
	display: inline-block;
	margin-bottom: 0.375rem;
	font-weight: 500;
	color: var(--cgs-c-text);
}

/* ==========================================================================
   9. Theme-Mode-Toggle
   ========================================================================== */

.cgs-theme-mode-toggle {
	all: unset;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--cgs-radius-pill);
	cursor: pointer;
	color: var(--cgs-c-text-muted);
	border: 1px solid var(--cgs-c-border);
	background: var(--cgs-c-bg-elevated);
	transition: color var(--cgs-dur) var(--cgs-ease),
	            border-color var(--cgs-dur) var(--cgs-ease),
	            background var(--cgs-dur) var(--cgs-ease);
	position: relative;
}
.cgs-theme-mode-toggle:hover,
.cgs-theme-mode-toggle:focus-visible {
	color: var(--cgs-c-primary);
	border-color: var(--cgs-c-primary);
	background: var(--cgs-c-primary-soft);
}
.cgs-theme-mode-toggle__icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	position: absolute;
	transition: opacity 150ms var(--cgs-ease),
	            transform 220ms var(--cgs-ease);
}
html[data-color-mode="dark"] .cgs-theme-mode-toggle__icon--sun {
	opacity: 1;
	transform: scale(1) rotate(0);
}
html[data-color-mode="dark"] .cgs-theme-mode-toggle__icon--moon {
	opacity: 0;
	transform: scale(0.5) rotate(-45deg);
}
html[data-color-mode="light"] .cgs-theme-mode-toggle__icon--sun {
	opacity: 0;
	transform: scale(0.5) rotate(45deg);
}
html[data-color-mode="light"] .cgs-theme-mode-toggle__icon--moon {
	opacity: 1;
	transform: scale(1) rotate(0);
}

/* ==========================================================================
   10. Social / Header-Cart
   ========================================================================== */

.cgs-social {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--cgs-radius-pill);
	color: var(--cgs-c-text-muted);
	transition: color var(--cgs-dur) var(--cgs-ease),
	            background var(--cgs-dur) var(--cgs-ease);
}
.cgs-social:hover,
.cgs-social:focus-visible {
	color: var(--cgs-c-primary);
	background: var(--cgs-c-primary-soft);
}

.cgs-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	border-radius: var(--cgs-radius-pill);
	background: var(--cgs-c-primary-soft);
	color: var(--cgs-c-primary);
	font-weight: 600;
	font-size: 0.875rem;
	transition: background var(--cgs-dur) var(--cgs-ease),
	            color var(--cgs-dur) var(--cgs-ease);
}
.cgs-header-cart:hover {
	background: var(--cgs-c-primary);
	color: #fff;
}
.cgs-cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 0.25rem;
	border-radius: var(--cgs-radius-pill);
	background: var(--cgs-c-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.cgs-site-footer,
.wp-block-template-part[data-type="footer"] {
	background: var(--cgs-c-bg-elevated);
	border-top: 1px solid var(--cgs-c-border);
	color: var(--cgs-c-text-muted);
	font-size: 0.875rem;
}
.cgs-site-footer a {
	color: var(--cgs-c-text);
}

/* ==========================================================================
   12. Utility
   ========================================================================== */

.cgs-text-muted { color: var(--cgs-c-text-muted); }
.cgs-text-faint { color: var(--cgs-c-text-faint); }
.cgs-mono       { font-family: var(--cgs-font-mono); }

/* Selection */
::selection {
	background: var(--cgs-c-primary);
	color: #fff;
}

/* ==========================================================================
   13. Print
   ========================================================================== */

@media print {
	html[data-color-mode] {
		--cgs-c-bg-base: #fff;
		--cgs-c-bg-elevated: #fff;
		--cgs-c-text: #000;
		--cgs-c-text-muted: #333;
		--cgs-c-border: #ccc;
	}
	.cgs-site-header,
	.cgs-site-footer,
	.cgs-theme-mode-toggle {
		display: none !important;
	}
}

/* ==========================================================================
   14. Draft
   ========================================================================== */
   
.entry-content.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained {
    max-width: 100%;
}

figure.wp-block-image.aligncenter.size-large.is-resized.is-style-rounded {
    width: unset;
}

.cfvsw_variations_form.variations_form.cfvsw_shop_align_left.variation-function-added.has-gzd-variation-form {
    display: none;
}

p.wc-gzd-additional-info.wc-gzd-additional-info-loop.shipping-costs-info {
    display: none;
}

.woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before {
    content: "" !important;
		display: none !important;
}

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
    background-color: unset;
    border: none;
    box-sizing: border-box;
    padding: 4px;
}

.cfvsw-swatches-option.cfvsw-label-option {
    background: none;
}

.cfvsw-selected-swatch {
    border-color: #9f7aea !important;
    border-width: var(--cfvsw-swatches-border-width, 1px);
}

.cfvsw-swatches-option:not( .cfvsw-swatches-disabled, .cfvsw-swatches-out-of-stock ):hover {
    border-color: #9f7aea !important;
}

li.wp-social-link.wp-social-link-tiktok.has-text-muted-color.wp-block-social-link {
    display: none;
}

figure.wp-block-image.aligncenter.size-large.is-resized.is-style-rounded {
    width: unset !important;
}

figure.wp-block-image.aligncenter.size-full.is-resized.is-style-rounded {
    width: unset !important;
}

p.wp-block-site-title {
    font-family: 'Wolf in the City' !important;
    font-weight: 100 !important;
    font-size: -webkit-xxx-large;
	line-height: normal !important;
}

.cgs-category-card::before {
    background: linear-gradient(180deg, rgb(9 0 33 / 82%) 0%, rgb(132 88 255 / 0%) 100%) !important;
}