/* ==========================================================================
   FOHTEX Design System
   Palette: Coral/Vermillion | Font: Space Grotesk | Dark Theme
   ========================================================================== */

/* --- Custom Properties --- */
:root {
    /* Colors */
    --color-primary: #E8533E;
    --color-primary-hover: #d4432f;
    --color-primary-light: rgba(232, 83, 62, 0.12);
    --color-accent: #F2994A;
    --color-accent-hover: #e0882d;

    --color-dark: #1A1A1A;
    --color-darker: #111111;
    --color-surface: #2A2A2A;
    --color-surface-hover: #333333;
    --color-border: #3a3a3a;
    --color-border-light: #2e2e2e;

    --color-light: #F5F0EB;
    --color-white: #FFFFFF;
    --color-text: #E8E8E8;
    --color-text-muted: #999999;
    --color-text-subtle: #666666;

    --color-success: #2ECC71;
    --color-warning: #F2994A;
    --color-error: #E8533E;

    /* Typography */
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;
    --text-6xl: 4rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-wide: 1400px;
    --topbar-height: 36px;
    --header-height: 80px;
    --header-total: calc(var(--topbar-height) + var(--header-height));

    /* Effects */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --transition: 0.2s ease;
    --transition-slow: 0.4s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-dark);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-white);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

/* --- Utility --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    line-height: 1;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 83, 62, 0.35);
}

.btn--outline {
    background: transparent;
    color: var(--color-white);
    border: 1.5px solid var(--color-border);
}
.btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.btn--large { padding: 18px 42px; font-size: var(--text-base); }
.btn--small { padding: 10px 20px; font-size: var(--text-xs); }

/* --- Header --- */
.site-header {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(17, 17, 17, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border-light);
    z-index: 1000;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.site-logo img,
.site-logo svg { height: 38px; width: auto; }

.main-nav { display: flex; align-items: center; gap: var(--space-2xl); }
.main-nav__list {
    display: flex;
    gap: var(--space-xl);
    list-style: none;
    align-items: center;
}
.main-nav__list li a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.3px;
    transition: color var(--transition);
    padding: var(--space-sm) 0;
}
.main-nav__list li a:hover,
.main-nav__list li.current-menu-item a { color: var(--color-white); }

.main-nav__cta { margin-left: var(--space-lg); }

/* Header Icons (Cart + Account) */
.site-header__icons {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: var(--space-lg);
}
.header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: color var(--transition), background var(--transition);
}
.header-icon:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.06);
}
.header-icon svg { flex-shrink: 0; }
.header-icon__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    pointer-events: none;
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    margin: 6px 0;
    transition: all var(--transition);
    border-radius: 2px;
}

/* Mobile: Desktop-Nav ausblenden, Hamburger zeigen */
@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .main-nav { display: none !important; }
    .site-header__icons { margin-left: auto; }
    .nav-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}

/* --- Top Bar --- */
.fohtex-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--color-darker);
    border-bottom: 1px solid var(--color-border-light);
    z-index: 1001;
    font-size: 12px;
    color: var(--color-text-muted);
}
.fohtex-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    gap: 0;
}
.fohtex-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}
a.fohtex-topbar__item:hover {
    color: var(--color-white);
}
.fohtex-topbar__item svg {
    flex-shrink: 0;
    opacity: 0.6;
}
/* Topbar separator */
.fohtex-topbar__sep {
    margin: 0 12px;
    color: var(--color-text-subtle);
    font-size: 10px;
    user-select: none;
}
@media (max-width: 768px) {
    .fohtex-topbar { height: 32px; }
    :root { --topbar-height: 32px; }
    .fohtex-topbar__item--desktop,
    .fohtex-topbar__sep--desktop { display: none; }
    .fohtex-topbar__item { font-size: 11px; }
}

/* --- Nav Dropdowns --- */
.main-nav__item { position: relative; }
.main-nav__item > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-chevron {
    transition: transform var(--transition);
    opacity: 0.5;
}
.main-nav__item:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 220px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 100;
}
.main-nav__item:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}
.nav-dropdown a:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.06);
}
.nav-dropdown a:hover .nav-dropdown__icon { color: var(--color-accent); }
.nav-dropdown__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: color var(--transition);
}

/* DTF Nav Item */
.main-nav__dtf > a {
    color: var(--color-white) !important;
    font-weight: 600;
    transition: color var(--transition);
}
.main-nav__dtf > a:hover {
    color: var(--color-primary) !important;
}

/* Nav Search Button */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    margin-left: var(--space-md);
}
.nav-search-btn:hover {
    color: var(--color-white);
    background: rgba(255,255,255,0.06);
}

/* Outline Accent Button */
.btn--outline-accent {
    background: transparent;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
}
.btn--outline-accent:hover {
    background: rgba(242, 153, 74, 0.1);
    color: var(--color-accent);
    border-color: var(--color-accent-hover);
    transform: translateY(-2px);
}

/* --- Search Overlay --- */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.search-overlay.is-visible { opacity: 1; }
.search-overlay__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.search-overlay__close:hover { color: var(--color-white); }
.search-overlay__content {
    width: 100%;
    max-width: 640px;
    padding: 0 var(--space-xl);
}
.search-overlay__form {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--space-md);
    transition: border-color var(--transition);
}
.search-overlay__form:focus-within {
    border-color: var(--color-primary);
}
.search-overlay__icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.search-overlay__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-2xl);
    font-weight: 400;
}
.search-overlay__input::placeholder {
    color: var(--color-text-subtle);
}
@media (max-width: 768px) {
    .search-overlay { padding-top: 12vh; }
    .search-overlay__input { font-size: var(--text-lg); }
}

/* --- Mobile Menu Sections --- */
.mm-section { list-style: none; }
.mm-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}
.mm-chevron {
    transition: transform var(--transition);
}
.mm-section__toggle[aria-expanded="true"] .mm-chevron {
    transform: rotate(180deg);
}
.mm-section__items {
    list-style: none;
    padding: 0 0 var(--space-sm) var(--space-md);
}
.mm-section__items li a {
    display: block;
    padding: 10px 0;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    transition: color var(--transition);
}
.mm-section__items li a:hover { color: var(--color-white); }
.mm-all { font-weight: 600; color: var(--color-text) !important; }
.mm-dtf {
    list-style: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.mm-dtf a {
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: 600;
}
.mm-search {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mm-search svg { flex-shrink: 0; color: var(--color-text-muted); }
.mm-search__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
.mm-search__input::placeholder { color: var(--color-text-subtle); }

/* Mobile Menu Positioning */
.mobile-menu {
    position: fixed;
    top: calc(var(--header-height) + var(--topbar-height));
    left: 0;
    right: 0;
    bottom: 0;
    background: #111111;
    z-index: 9990;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile Menu List-Styles (Layout ist inline im HTML) */
#mobile-menu .mobile-menu__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
}
#mobile-menu .mobile-menu__list li a {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--transition);
    display: block;
    padding: var(--space-sm) 0;
}
#mobile-menu .mobile-menu__list li a:hover,
#mobile-menu .mobile-menu__list li.current-menu-item a {
    color: var(--color-white);
}

/* Desktop: Mobile Menu immer versteckt */
@media (min-width: 769px) {
    #mobile-menu { display: none !important; }
}

/* --- Main Content --- */
.site-main { min-height: 100vh; padding-top: var(--header-total); }

/* --- USP Bar (nur Startseite) --- */
.fohtex-usp-bar {
    padding-top: var(--header-total);
    background: linear-gradient(180deg, var(--color-darker) 0%, var(--color-dark) 100%);
    border-bottom: 1px solid var(--color-border-light);
}
.fohtex-usp-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xl);
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
}
.fohtex-usp-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text);
}
.fohtex-usp-bar__item svg {
    flex-shrink: 0;
    color: var(--color-primary);
}
.fohtex-usp-bar__item strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.3;
}
.fohtex-usp-bar__item span {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.3;
}
@media (max-width: 768px) {
    .fohtex-usp-bar__inner {
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
    }
    .fohtex-usp-bar__item { gap: var(--space-sm); }
    .fohtex-usp-bar__item strong { font-size: 13px; }
}

/* --- Hero Section --- */
.hero {
    position: relative;
    padding: var(--space-5xl) 0;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(232, 83, 62, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.hero__content { position: relative; max-width: 680px; }
.hero__label {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}
.hero__title {
    font-size: var(--text-6xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    line-height: 1.05;
}
.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 520px;
    margin-bottom: var(--space-2xl);
    line-height: 1.7;
}
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 768px) {
    .hero { padding: var(--space-3xl) 0; min-height: 70vh; }
    .hero__title { font-size: var(--text-4xl); }
    .hero__subtitle { font-size: var(--text-base); }
}

/* --- Section Blocks --- */
.section { padding: var(--space-5xl) 0; }
.section--light { background: var(--color-surface); }
.section__header { margin-bottom: var(--space-3xl); }
.section__label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}
.section__title { font-size: var(--text-4xl); margin-bottom: var(--space-md); }
.section__desc { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 560px; }

@media (max-width: 768px) {
    .section { padding: var(--space-3xl) 0; }
    .section__title { font-size: var(--text-3xl); }
}

/* --- Process Steps --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.step {
    padding: var(--space-2xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
.step:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.step__number { font-size: var(--text-3xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-md); line-height: 1; }
.step__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.step__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }

@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }

/* --- Service Cards --- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.service {
    padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
.service:hover { border-color: var(--color-border); }
.service__icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
    font-size: var(--text-2xl);
}
.service__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.service__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }
.service__link {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary);
}
.service__link:hover { color: var(--color-accent); }

@media (max-width: 768px) { .services { grid-template-columns: 1fr; } }

/* --- Path Cards (Zwei Wege) --- */
.paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}
.path-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), transform var(--transition);
}
.path-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}
.path-card--alt:hover {
    border-color: var(--color-accent);
}
.path-card__number {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.path-card--alt .path-card__number {
    color: var(--color-accent);
}
.path-card__title {
    font-size: var(--text-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-md);
}
.path-card__desc {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}
.path-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
    flex-grow: 1;
}
.path-card__features li {
    color: var(--color-text);
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    position: relative;
    font-size: var(--text-sm);
}
.path-card__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}
.path-card--alt .path-card__features li::before {
    background: var(--color-accent);
}

@media (max-width: 768px) {
    .paths { grid-template-columns: 1fr; }
}

/* --- CTA Banner --- */
.cta-banner {
    padding: var(--space-3xl);
    background: linear-gradient(135deg, var(--color-primary), #c0392b);
    border-radius: var(--radius-xl);
    text-align: center;
}
.cta-banner__title { font-size: var(--text-3xl); color: var(--color-white); margin-bottom: var(--space-md); }
.cta-banner__desc {
    font-size: var(--text-lg); color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-xl); max-width: 500px; margin-left: auto; margin-right: auto;
}
.cta-banner .btn { background: var(--color-white); color: var(--color-primary); }
.cta-banner .btn:hover { background: var(--color-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

/* --- Footer --- */
.site-footer {
    padding: var(--space-4xl) 0 var(--space-xl);
    background: var(--color-darker);
    border-top: 1px solid var(--color-border-light);
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}
.footer__brand p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 280px; margin-top: var(--space-md); }
.footer__logo img,
.footer__logo svg { height: 32px; width: auto; }
.footer__heading {
    font-size: var(--text-sm); font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--color-text-muted); margin-bottom: var(--space-lg);
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--transition); }
.footer__links a:hover { color: var(--color-white); }
.footer__bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--space-xl); border-top: 1px solid var(--color-border-light);
    font-size: var(--text-xs); color: var(--color-text-subtle);
}

@media (max-width: 768px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
}
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* --- Page Content --- */
.page-content { padding: var(--space-4xl) 0; }
.page-content h1 { margin-bottom: var(--space-2xl); }
.page-content h2 { font-size: var(--text-2xl); margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.page-content h3 { font-size: var(--text-xl); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.page-content p { color: var(--color-text-muted); max-width: 720px; }
.page-content ul, .page-content ol { color: var(--color-text-muted); margin-left: var(--space-xl); margin-bottom: var(--space-md); }
.page-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- WooCommerce Overrides (Basis) --- */
.woocommerce-page .site-main { padding-top: var(--header-total); }

/* ==========================================================================
   Shop & Produkt Styles
   ========================================================================== */

/* --- Shop Hero --- */
.shop-hero {
    padding: var(--space-4xl) 0 var(--space-2xl);
}
.shop-hero--compact {
    padding: var(--space-2xl) 0 var(--space-xl);
}
.shop-hero__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-sm);
}
.shop-hero__desc {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 560px;
}
.shop-hero__meta {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

/* --- Breadcrumb --- */
.shop-breadcrumb, .prod-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.prod-breadcrumb {
    padding: var(--space-lg) 0 0;
}
.shop-breadcrumb a, .prod-breadcrumb a {
    color: var(--color-text-muted);
    transition: color var(--transition);
}
.shop-breadcrumb a:hover, .prod-breadcrumb a:hover { color: var(--color-white); }
.shop-breadcrumb__sep { color: var(--color-text-subtle); }

/* --- Category Grid --- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg);
}
.cat-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}
.cat-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    color: inherit;
}
.cat-card__img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--color-dark);
    padding: var(--space-md);
}
.cat-card__placeholder {
    width: 100%;
    height: 180px;
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text-subtle);
    text-transform: uppercase;
}
.cat-card__info {
    padding: var(--space-lg);
}
.cat-card__name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}
.cat-card__count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* --- Shop Toolbar --- */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}
.shop-toolbar .woocommerce-ordering select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 8px 12px;
}
.shop-toolbar .woocommerce-result-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Product Grid --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
}
.product-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}
.product-card:hover {
    border-color: var(--color-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: inherit;
}
.product-card__img-wrap {
    width: 100%;
    height: 260px;
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card__img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.product-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-dark);
}
.product-card__info {
    padding: var(--space-lg);
}
.product-card__brand {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.product-card__name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    margin: var(--space-xs) 0 var(--space-md);
    line-height: 1.3;
}
.product-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-card__price {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}
.product-card__price .woocommerce-Price-amount { color: var(--color-primary); }
.product-card__price del { color: var(--color-text-subtle); font-weight: 400; }
.product-card__colors {
    display: flex;
    align-items: center;
    gap: 3px;
}
.product-card__color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: inline-block;
}
.product-card__color-more {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin-left: 2px;
}

/* --- Shop Pagination --- */
.shop-pagination {
    margin-top: var(--space-2xl);
    display: flex;
    justify-content: center;
}
.shop-pagination .woocommerce-pagination {
    display: flex;
    gap: var(--space-xs);
}
.shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition);
}
.shop-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-white); }
.shop-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }


/* ==========================================================================
   Single Product Page — v3.2 (Media Bar)
   Prefix: sp__
   ========================================================================== */

/* --- Breadcrumb --- */
.sp-breadcrumb { padding: var(--space-md) 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.sp-breadcrumb .container { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.sp-breadcrumb a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition); }
.sp-breadcrumb a:hover { color: var(--color-white); }
.sp-breadcrumb__sep { color: var(--color-text-subtle); margin: 0 2px; }

/* --- Layout --- */
.sp { padding: var(--space-xl) 0 var(--space-4xl); }
.sp__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}
.sp__left {
    position: sticky;
    top: calc(var(--header-total) + var(--space-lg));
}

/* Side Toggle */
.sp__side-toggle { display: flex; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.sp__side-btn {
    padding: 6px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.sp__side-btn:hover { border-color: var(--color-text-muted); color: var(--color-white); }
.sp__side-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

/* --- Workspace: Media Bar + Canvas --- */
.sp__workspace {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

/* --- Media Bar --- */
.sp__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 64px;
    min-width: 64px;
    flex-shrink: 0;
}
.sp__media-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 64px;
    height: 64px;
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}
.sp__media-add span {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.sp__media-add:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.sp__media-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow-y: auto;
    max-height: 400px;
}

/* Media Item (upload thumbnail) */
.sp__media-item {
    position: relative;
    width: 64px;
    height: 64px;
    background: var(--color-surface);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: grab;
    transition: all var(--transition);
    flex-shrink: 0;
}
.sp__media-item:hover {
    border-color: var(--color-primary);
}
.sp__media-item.is-dragging {
    opacity: 0.5;
    border-color: var(--color-primary);
}
.sp__media-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    pointer-events: none;
}
.sp__media-item-rm {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    z-index: 2;
}
.sp__media-item:hover .sp__media-item-rm { opacity: 1; }

/* --- Canvas --- */
.sp__canvas {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
    flex: 1;
}
.sp__product-img {
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Drag-over state on canvas */
.sp__canvas.is-dragover {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}

/* Thumbnails */
.sp__thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }
.sp__thumb {
    width: 56px; height: 56px; object-fit: contain;
    background: var(--color-surface); border: 2px solid var(--color-border-light);
    border-radius: var(--radius-sm); padding: 4px; cursor: pointer;
    transition: border-color var(--transition);
}
.sp__thumb:hover { border-color: var(--color-text-muted); }
.sp__thumb.is-active { border-color: var(--color-primary); }

/* --- Right: Info --- */
.sp__brand { display: inline-block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.sp__title { font-size: var(--text-3xl); margin-bottom: var(--space-md); line-height: 1.2; }
.sp__price { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-lg); }
.sp__price .woocommerce-Price-amount { color: var(--color-primary); }
.sp__price small { font-weight: 400; font-size: var(--text-sm); }
.sp__price-note { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-subtle); margin-top: var(--space-xs); }

.sp__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding: var(--space-md) 0; border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-text-muted); }
.sp__meta strong { color: var(--color-white); }

.sp__option { margin-bottom: var(--space-xl); }
.sp__option-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-white); margin-bottom: var(--space-sm); }
.sp__option-label span { font-weight: 400; color: var(--color-text-muted); }

.sp__colors { display: flex; flex-wrap: wrap; gap: 6px; }
.sp__color-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all var(--transition); outline: 2px solid transparent; outline-offset: 2px; padding: 0; }
.sp__color-btn:hover { outline-color: var(--color-text-subtle); }
.sp__color-btn.is-active { outline-color: var(--color-primary); }

.sp__sizes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sp__size-btn { min-width: 48px; height: 42px; padding: 0 var(--space-md); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--transition); }
.sp__size-btn:hover { border-color: var(--color-text-muted); }
.sp__size-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.sp__size-btn.is-unavailable { opacity: 0.25; cursor: not-allowed; text-decoration: line-through; }

/* Breakdown */
.sp__breakdown { margin-top: var(--space-lg); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); min-height: 40px; }
.sp__breakdown:empty { display: none; }
.sp__breakdown-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sp__breakdown-divider { border-top: 1px solid var(--color-border); margin: 6px 0; }
.sp__breakdown-total { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--text-base); font-weight: 700; color: var(--color-white); }
.sp__breakdown-sub { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.sp__breakdown-hint { text-align: center; color: var(--color-text-subtle); font-size: var(--text-sm); padding: 8px 0; }

/* Cart */
.sp__cart-row { display: flex; gap: var(--space-md); align-items: center; margin-top: var(--space-xl); }
.sp__qty { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.sp__qty-btn { width: 42px; height: 42px; background: var(--color-surface); border: none; color: var(--color-white); font-size: var(--text-lg); cursor: pointer; transition: background var(--transition); display: flex; align-items: center; justify-content: center; }
.sp__qty-btn:hover { background: var(--color-surface-hover); }
.sp__qty-input { width: 50px; height: 42px; background: var(--color-dark); border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); color: var(--color-white); font-family: var(--font-body); font-size: var(--text-base); text-align: center; -moz-appearance: textfield; }
.sp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sp__add-btn { flex: 1; }
.sp__add-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.sp__desc { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border-light); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; }

/* --- Druckzonen --- */
/* --zone-color is set dynamically by JS (inverted product color) */
.sp__canvas { --zone-color: rgba(232, 83, 62, 0.7); }

.sp__zone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--zone-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease, opacity 0.4s ease;
    background: transparent;
    opacity: 0.55;
}
.sp__zone:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.04);
}
.sp__zone.is-active {
    border-color: transparent;
    background: transparent;
    opacity: 1;
}
.sp__zone.is-active:hover {
    border-color: var(--zone-color);
}
/* Zone receiving drag */
.sp__zone.is-drop-target {
    border-color: var(--zone-color) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-style: solid;
    opacity: 1 !important;
}

/* Auto-fade idle zones */
.sp__canvas.zones-faded .sp__zone:not(.is-active) {
    opacity: 0;
    pointer-events: none;
}
.sp__canvas.zones-faded:hover .sp__zone:not(.is-active) {
    opacity: 1;
    pointer-events: auto;
}
/* During drag: always show zones */
.sp__canvas.is-receiving-drag .sp__zone {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sp__zone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.sp__zone-icon {
    width: 24px; height: 24px;
    border: 1.5px solid var(--zone-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--zone-color);
}
.sp__zone-name { font-size: 10px; color: var(--zone-color); white-space: nowrap; }

.sp__zone-logo {
    max-width: 96%; max-height: 96%;
    object-fit: contain; pointer-events: none;
}
.sp__zone-remove {
    position: absolute; top: -8px; right: -8px;
    width: 20px; height: 20px;
    background: var(--color-primary); color: #fff; border: none; border-radius: 50%;
    font-size: 12px; line-height: 20px; text-align: center;
    cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 0;
}
.sp__zone:hover .sp__zone-remove { opacity: 1; }

/* Zone click hint */
.sp__zone-hint {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 5px 10px;
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 20;
    animation: sp-hint-in 0.2s ease;
}
@keyframes sp-hint-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Admin Zone Editor --- */
.sp__admin-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}
.sp__admin-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.sp__admin-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.sp__admin-toggle.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); }

.sp__admin-status {
    font-size: 11px;
    color: var(--color-text-subtle);
    margin-left: auto;
}
.sp__admin-status.is-success { color: var(--color-success); }

.sp__admin-save, .sp__admin-reset {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all var(--transition);
}
.sp__admin-save { color: var(--color-success); border-color: var(--color-success); }
.sp__admin-save:hover { background: var(--color-success); color: var(--color-dark); }
.sp__admin-save-all {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-accent);
    cursor: pointer;
    transition: all var(--transition);
}
.sp__admin-save-all:hover { background: var(--color-accent); color: var(--color-dark); }
.sp__admin-reset { color: var(--color-text-muted); }
.sp__admin-reset:hover { border-color: var(--color-primary); color: var(--color-primary); }

.sp__admin-preview {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
}
.sp__admin-preview:hover { border-color: var(--color-text-muted); color: var(--color-white); }
.sp__admin-preview.is-active { background: var(--color-text-muted); color: var(--color-dark); }

/* Preview mode: hide borders/handles/labels but keep placed logos + dragging */
.sp__canvas.is-admin-mode.is-zones-hidden .sp__zone,
.sp__canvas.is-zones-hidden .sp__zone {
    border-color: transparent !important;
    background: transparent !important;
}
.sp__canvas.is-zones-hidden .sp__zone-label,
.sp__canvas.is-zones-hidden .sp__zone-remove,
.sp__canvas.is-zones-hidden .sp__zone-dims,
.sp__canvas.is-zones-hidden .sp__zone-resize-handle,
.sp__canvas.is-zones-hidden .sp__zone-square-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Placed zones: logo visible, zone draggable */
.sp__canvas.is-zones-hidden .sp__zone.is-active {
    opacity: 1 !important;
    cursor: move;
}
/* Empty zones: invisible but still draggable in admin mode */
.sp__canvas.is-admin-mode.is-zones-hidden .sp__zone:not(.is-active) {
    opacity: 0 !important;
    cursor: move;
}
/* Non-admin preview: empty zones fully gone */
.sp__canvas.is-zones-hidden:not(.is-admin-mode) .sp__zone:not(.is-active) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Admin mode: zones always visible, dashed border */
.sp__canvas.is-admin-mode .sp__zone {
    opacity: 1 !important;
    pointer-events: auto !important;
    border-style: dashed;
    border-width: 2px;
    border-color: var(--color-accent) !important;
}
.sp__canvas.is-admin-mode .sp__zone:hover {
    background: rgba(242, 153, 74, 0.08);
}

/* Resize handle */
.sp__zone-resize-handle {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 2px;
    cursor: se-resize;
    z-index: 10;
}

/* Square toggle button */
.sp__zone-square-btn {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: 2px;
    color: var(--color-accent);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: all 0.15s;
}
.sp__zone-square-btn:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}

/* Dimensions label */
.sp__zone-dims {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 9px;
    font-family: monospace;
    color: var(--color-accent);
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .sp__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .sp__left { position: static; }
    .sp__workspace { flex-direction: column; }
    .sp__media { flex-direction: row; width: auto; min-width: 0; overflow-x: auto; }
    .sp__media-list { flex-direction: row; max-height: none; }
    .sp__title { font-size: var(--text-2xl); }
    .sp__cart-row { flex-direction: column; }
    .sp__add-btn { width: 100%; }
    .sp__canvas { min-height: 300px; padding: var(--space-md); }
    .sp__product-img { max-height: 380px; }
}

@media (max-width: 480px) {
    .sp__canvas { min-height: 260px; padding: var(--space-sm); }
    .sp__product-img { max-height: 300px; }
}


/* --- Sticky CTA: Jetzt gestalten --- */
.sp-page { padding-bottom: 90px; }

.sp__sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 12px 20px 20px;
    background: linear-gradient(to top, var(--color-bg) 60%, transparent 100%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.sp__gestalten-btn {
    pointer-events: all;
    width: 100%;
    max-width: 480px;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(232, 83, 62, 0.45);
}
.sp__gestalten-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(232, 83, 62, 0.55);
}

/* Display-only size chips (keine Buttons mehr) */
.sp__sizes--display { flex-wrap: wrap; }
.sp__size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 42px;
    padding: 0 var(--space-md);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
}

@media (min-width: 769px) {
    .sp__sticky-cta {
        padding: 16px 40px 24px;
    }
    .sp__gestalten-btn {
        max-width: 360px;
    }
}

/* --- WooCommerce Overrides --- */
.woocommerce-page .woocommerce-notices-wrapper { max-width: var(--container-max); margin: var(--space-md) auto; padding: 0 var(--space-xl); }
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error { background: var(--color-surface); border: 1px solid var(--color-border-light); color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); }
.woocommerce-page .woocommerce-message { border-left: 4px solid var(--color-success); }
.woocommerce-page .woocommerce-error { border-left: 4px solid var(--color-error); }
.woocommerce-page .woocommerce-message a,
.woocommerce-page .woocommerce-info a { color: var(--color-primary); }

/* ==========================================================================
   Konfigurator — /gestalten/ v2
   Layout: Toolbar | Preview | Info
   ========================================================================== */

.ks { padding: 0; }

.ks__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    min-height: calc(100vh - var(--header-total));
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* ===== TOOLBAR (left, floating) ===== */
.ks__toolbar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: var(--color-dark);
    border: 1px solid rgba(232, 83, 62, 0.4);
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-sm) var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 72px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
}
.ks__tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    height: 60px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}
.ks__tool:hover { color: var(--color-white); background: var(--color-surface); }
.ks__tool.is-active { color: var(--color-primary); background: var(--color-primary-light); }

.ks__toolbar-sep {
    width: 40px;
    height: 1px;
    background: var(--color-border-light);
    margin: var(--space-sm) 0;
}

/* Upload thumbnails in toolbar */
.ks__upload-thumbs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-xs);
    overflow-y: auto;
    max-height: 220px;
}
.ks__upload-thumb {
    position: relative;
    width: 52px;
    height: 52px;
    background: var(--color-surface);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: grab;
    flex-shrink: 0;
    transition: border-color var(--transition);
}
.ks__upload-thumb:hover { border-color: var(--color-primary); }
.ks__upload-thumb.is-dragging { opacity: 0.4; }
.ks__upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    pointer-events: none;
}
.ks__upload-thumb-rm {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    z-index: 2;
}
.ks__upload-thumb:hover .ks__upload-thumb-rm { opacity: 1; }
/* Drag grip indicator */
.ks__upload-thumb-grip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(26,26,26,0.9) 70%, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    border-radius: 0 0 2px 2px;
}
.ks__upload-thumb:hover .ks__upload-thumb-grip { opacity: 1; }
.ks__upload-thumb-grip svg { width: 16px; height: 6px; opacity: 0.6; }

/* ===== PREVIEW (center) ===== */
.ks__preview {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md) var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}
.ks__canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 640px;
    min-height: 0;
}
.ks__canvas {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
/* Image wrapper: exactly matches rendered image size */
.ks__img-wrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 100%;
}
.ks__product-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    pointer-events: none;
}

/* Print area: % positioned inside img-wrap = relative to image */
.ks__print-area {
    position: absolute;
    border: 1.5px dashed transparent;
    border-radius: 2px;
    transition: border-color 0.2s;
    overflow: visible;
    container-type: inline-size;
}
/* Show border only in edit mode with dynamic inverted color */
.ks__img-wrap.is-editing .ks__print-area {
    border-color: var(--zone-color, rgba(255,255,255,0.35)) !important;
    border-style: dashed !important;
    border-width: 2px !important;
    overflow: visible;
}
.ks__print-area.is-drag-target {
    border-color: var(--color-primary);
    background: rgba(232, 83, 62, 0.04);
}

/* Motifs */
.ks__motif {
    position: absolute;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.ks__motif:active { cursor: grabbing; }
.ks__motif.is-selected {
    outline: 1.5px solid var(--color-primary);
    outline-offset: 3px;
}
.ks__motif img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* Snap guidelines */
.ks__snap-guide {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s;
}
.ks__snap-guide.is-visible { opacity: 1; }
.ks__snap-guide--h {
    left: 0;
    right: 0;
    height: 1px;
    background: var(--zone-color, rgba(255,255,255,0.6));
}
.ks__snap-guide--v {
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--zone-color, rgba(255,255,255,0.6));
}

/* Spacing indicator lines */
.ks__snap-spacing {
    position: absolute;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s;
}
.ks__snap-spacing.is-visible { opacity: 1; }
.ks__snap-spacing--h {
    height: 0;
    border-top: 1px dashed var(--zone-color, rgba(255,255,255,0.5));
    display: flex;
    align-items: center;
}
.ks__snap-spacing--v {
    width: 0;
    border-left: 1px dashed var(--zone-color, rgba(255,255,255,0.5));
    display: flex;
    justify-content: center;
}
.ks__snap-pip {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--zone-color, rgba(255,255,255,0.6));
    border-radius: 50%;
}
.ks__snap-spacing--h .ks__snap-pip.pip-l { left: -1px; top: -2px; }
.ks__snap-spacing--h .ks__snap-pip.pip-r { right: -1px; top: -2px; }
.ks__snap-spacing--v .ks__snap-pip.pip-t { top: -1px; left: -2px; }
.ks__snap-spacing--v .ks__snap-pip.pip-b { bottom: -1px; left: -2px; }

.ks__motif-handle {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: se-resize;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ks__motif:hover .ks__motif-handle,
.ks__motif.is-selected .ks__motif-handle,
.ks__text-motif:hover .ks__motif-handle,
.ks__text-motif.is-selected .ks__motif-handle { opacity: 1; }

.ks__motif-delete {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ks__motif:hover .ks__motif-delete,
.ks__motif.is-selected .ks__motif-delete,
.ks__text-motif:hover .ks__motif-delete,
.ks__text-motif.is-selected .ks__motif-delete { opacity: 1; }

/* Views: mini-preview thumbnails */
.ks__views {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md);
    flex-shrink: 0;
}
.ks__view-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    padding: 4px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}
.ks__view-btn:hover { border-color: #aaa; }
.ks__view-btn.is-active { border-color: var(--color-primary); }
.ks__view-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    display: block;
}
.ks__view-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    color: #777;
}
.ks__view-btn.is-active .ks__view-label { color: var(--color-primary); }

/* ===== INFO PANEL (right) ===== */
.ks__info {
    background: var(--color-dark);
    border-left: 1px solid var(--color-border-light);
    padding: var(--space-xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-total));
}

.ks__info-product {
    margin-bottom: var(--space-lg);
}
.ks__info-name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.3;
}
.ks__info-brand {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.ks__info-details {
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.ks__info-details:hover { text-decoration: underline; }

.ks__info-section {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-light);
}
.ks__info-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.ks__info-label strong { color: var(--color-white); font-weight: 600; }

/* Colors */
.ks__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ks__color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    outline: 2px solid transparent;
    outline-offset: 2px;
    padding: 0;
    position: relative;
}
.ks__color-btn:hover { outline-color: var(--color-text-subtle); }
.ks__color-btn.is-active { outline-color: var(--color-primary); }
/* Checkmark on active */
.ks__color-btn.is-active::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Sizes */
.ks__sizes {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ks__size-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 5px 0;
}
.ks__size-label {
    width: 40px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
}
.ks__size-label.is-unavailable { color: var(--color-text-subtle); text-decoration: line-through; }
.ks__size-qty {
    width: 56px;
    height: 30px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-align: center;
    -moz-appearance: textfield;
}
.ks__size-qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.ks__size-qty:disabled { opacity: 0.2; cursor: not-allowed; }
.ks__size-qty:focus { border-color: var(--color-primary); outline: none; }

.ks__qty-total {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.ks__qty-total strong { color: var(--color-white); }

/* Breakdown */
.ks__breakdown { padding: var(--space-sm) 0; }
.ks__breakdown:empty { display: none; }
.ks__breakdown-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ks__breakdown-divider { border-top: 1px solid var(--color-border); margin: 6px 0; }
.ks__breakdown-total { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--text-lg); font-weight: 700; color: var(--color-white); }
.ks__breakdown-sub { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* Cart button */
.ks__info-footer {
    margin-top: auto;
    padding-top: var(--space-lg);
}
.ks__cart-btn {
    display: block;
    width: 100%;
    padding: 14px var(--space-xl);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}
.ks__cart-btn:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.ks__cart-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== DESKTOP EDIT PANEL (right sidebar) ===== */
/* When editing: collapse product info, emphasize edit panel */
.ks__info.is-editing .ks__info-section { display: none; }
.ks__info.is-editing .ks__info-details { display: none; }
.ks__info.is-editing .ks__info-product { margin-bottom: var(--space-sm); }

.ks__info-edit {
    background: var(--color-surface);
    border: 1px solid rgba(232, 83, 62, 0.35);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-sm);
}
.ks__info-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}
.ks__info-edit-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
}
.ks__info-edit-close {
    width: 24px; height: 24px;
    background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-text-muted);
    font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: all var(--transition);
}
.ks__info-edit-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ks__info-edit-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.ks__info-edit-row:last-child { margin-bottom: 0; }
.ks__info-edit-input {
    flex: 1;
    height: 36px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 0 var(--space-sm);
}
.ks__info-edit-input:focus { border-color: var(--color-primary); outline: none; }
.ks__info-edit-font {
    flex: 1;
    height: 36px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 0 var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color var(--transition);
}
.ks__info-edit-font:hover { border-color: var(--color-primary); }
.ks__info-edit-color {
    width: 36px; height: 36px;
    padding: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ks__info-edit-names {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    margin-top: var(--space-xs);
}
.ks__info-edit-names input { width: 14px; height: 14px; }
.ks__info-edit-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 10px;
    margin-top: var(--space-md);
    background: transparent;
    border: 1px solid rgba(232, 83, 62, 0.3);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.ks__info-edit-delete:hover { background: rgba(232, 83, 62, 0.08); border-color: var(--color-primary); }

/* ===== OVERLAY ===== */
.ks__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.ks__overlay.is-open { display: flex; }
.ks__overlay-panel {
    width: 90%;
    max-width: 580px;
    max-height: 80vh;
    background: var(--color-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ks__overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}
.ks__overlay-header h3 { font-size: var(--text-lg); color: var(--color-white); margin: 0; }
.ks__overlay-close {
    width: 32px; height: 32px;
    background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-text-muted);
    font-size: var(--text-xl); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition); padding: 0;
}
.ks__overlay-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ks__overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) var(--space-xl) var(--space-xl);
}
.ks__overlay-product {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition);
}
.ks__overlay-product:hover { border-color: var(--color-primary); background: var(--color-surface); }
/* Product card with motif preview */
.ks__overlay-product-preview {
    position: relative;
    width: 64px;
    height: 80px;
    flex-shrink: 0;
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.ks__overlay-product-preview > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ks__overlay-motif {
    position: absolute;
    object-fit: contain;
    pointer-events: none;
}
.ks__overlay-product-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-white); }
.ks__overlay-product-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* --- Sizes Panel --- */
.ks__sizes-panel { max-width: 480px; }
.ks__sizes-panel .ks__overlay-header { padding: 10px var(--space-xl); }
.ks__sizes-panel .ks__overlay-header h3 { font-size: var(--text-base); }
.ks__sizes-panel .ks__overlay-body { padding: 0 var(--space-xl) var(--space-md); }
.ks__sizes-list {
    border-top: 1px solid var(--color-border-light);
    margin-bottom: var(--space-sm);
}
.ks__size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.ks__size-row.has-qty { background: rgba(232, 83, 62, 0.04); margin: 0 calc(var(--space-xl) * -1); padding: 6px var(--space-xl); }
.ks__size-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    min-width: 40px;
}
.ks__size-row.has-qty .ks__size-label { color: var(--color-white); font-weight: 600; }
.ks__size-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.ks__size-stepper button {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ks__size-stepper button:active { background: var(--color-primary); color: #fff; }
.ks__size-qty {
    width: 40px;
    height: 34px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    -moz-appearance: textfield;
    touch-action: manipulation;
}
.ks__size-qty::-webkit-inner-spin-button,
.ks__size-qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.ks__sizes-tier {
    background: rgba(232, 83, 62, 0.08);
    border: 1px solid rgba(232, 83, 62, 0.2);
    border-radius: var(--radius-md);
    padding: 8px var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-primary);
}
.ks__sizes-tier strong { color: var(--color-white); }
.ks__sizes-summary {
    position: sticky;
    bottom: 0;
    background: var(--color-dark);
    border-top: 1px solid var(--color-border);
    padding: var(--space-sm) 0 0;
}
.ks__sizes-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.ks__sizes-row span:last-child { color: var(--color-text); font-weight: 500; }
.ks__sizes-row--highlight { color: var(--color-white); font-weight: 600; font-size: var(--text-sm); padding: 6px 0 2px; }
.ks__sizes-row--highlight span:last-child { color: var(--color-primary); font-size: var(--text-base); }
.ks__sizes-netto {
    text-align: right;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-sm);
}
.ks__sizes-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.ks__sizes-submit:hover { background: var(--color-primary-hover); }
.ks__sizes-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.ks__sizes-empty {
    text-align: center;
    padding: var(--space-xl) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ===== UPLOAD OVERLAY ===== */
.ks__motif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.ks__motif-grid:empty::after {
    content: 'Noch keine Motive hochgeladen.';
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    padding: var(--space-2xl) 0;
}

.ks__motif-card {
    position: relative;
    aspect-ratio: 1;
    background-color: #aaa;
    background-image: linear-gradient(45deg, #c0c0c0 25%, transparent 25%), linear-gradient(-45deg, #c0c0c0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c0c0c0 75%), linear-gradient(-45deg, transparent 75%, #c0c0c0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ks__motif-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ks__motif-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}
.ks__motif-card img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    pointer-events: none;
}
.ks__motif-card-rm {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(26, 26, 26, 0.8);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    z-index: 2;
}
.ks__motif-card:hover .ks__motif-card-rm { opacity: 1; }
.ks__motif-card-rm:hover { background: var(--color-primary); }

.ks__motif-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 6px;
    background: rgba(26, 26, 26, 0.75);
    font-size: 9px;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks__upload-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.ks__upload-add-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ks__text-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: var(--space-sm);
}
.ks__text-add-btn:hover { background: var(--color-primary-hover); }

/* ===== TEXT CONTROLS (in edit bar) ===== */
.ks__text-controls {
    padding: 6px var(--space-md);
    border-top: 1px solid var(--color-border-light);
}
.ks__text-controls-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 4px;
}
.ks__text-controls-row:last-child { margin-bottom: 0; }

.ks__text-input {
    flex: 1;
    height: 30px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: 0 var(--space-sm);
}
.ks__text-input:focus { border-color: var(--color-primary); outline: none; }

.ks__font-picker-btn {
    height: 34px;
    flex: 1;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    padding: 0 var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color var(--transition);
}
.ks__font-picker-btn:hover { border-color: var(--color-primary); }

/* Font list in sheet */
.ks__font-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.ks__font-item {
    padding: 12px var(--space-md);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    font-size: var(--text-lg);
    line-height: 1.3;
}
.ks__font-item:hover { border-color: var(--color-text-muted); }
.ks__font-item.is-active { border-color: var(--color-primary); }

.ks__text-color {
    width: 34px;
    height: 34px;
    padding: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ks__text-names-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.ks__text-names-toggle input { width: 14px; height: 14px; }

/* Text motif on canvas */
.ks__text-motif {
    position: absolute;
    cursor: grab;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    line-height: 1;
}
.ks__text-content {
    display: inline-block;
    pointer-events: none;
}
.ks__text-content[contenteditable="true"] {
    pointer-events: auto;
    cursor: text;
    user-select: text;
    outline: 1.5px dashed var(--color-primary);
    outline-offset: 2px;
    min-width: 20px;
    border-radius: 2px;
}
.ks__text-motif:active { cursor: grabbing; }
.ks__text-motif.is-selected {
    outline: 1.5px solid var(--color-primary);
    outline-offset: 3px;
}

/* ===== COLOR BOTTOM SHEET ===== */
.ks__color-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    flex-direction: column;
}
.ks__color-sheet.is-open { display: flex; }

.ks__color-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}
.ks__color-sheet-panel {
    background: var(--color-dark);
    border-top: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
}
.ks__color-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}
.ks__color-sheet-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
}
.ks__color-sheet-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--transition);
}
.ks__color-sheet-close:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ks__color-sheet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ks__color-sheet .ks__color-btn {
    width: 40px;
    height: 40px;
}

/* Edit bar + picker bar: hidden by default, only visible in mobile edit mode */
.ks__edit-bar { display: none; }

/* ===== ELEMENT PICKER (edit mode, no selection) ===== */
.ks__picker-bar {
    display: none;
    background: var(--color-dark);
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
    z-index: 60;
    padding: 6px var(--space-md);
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    gap: 4px;
}
.ks__picker-bar.is-visible { display: flex !important; }
.ks__picker-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ks__picker-bar-title {
    font-size: 11px;
    color: var(--color-text-subtle);
    font-weight: 500;
}
.ks__picker-exit {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dark);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
    position: relative;
    top: -28px;
    margin-bottom: -22px;
}
.ks__picker-exit svg { width: 20px; height: 20px; }
.ks__picker-exit:hover,
.ks__picker-exit:active {
    color: var(--color-primary);
    background: var(--color-surface);
}
.ks__picker-items {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    align-items: center;
}
.ks__picker-item {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
    overflow: hidden;
}
.ks__picker-item:active { border-color: var(--color-white); }
.ks__picker-item-thumb {
    width: 80%;
    height: 80%;
    object-fit: contain;
}
.ks__picker-item--text {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    padding: 4px;
    text-align: center;
    word-break: break-all;
}
.ks__picker-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ks__layout { grid-template-columns: 1fr 300px; }
}

@media (max-width: 768px) {
    /* Full restructure: fixed viewport, absolutely no scroll */
    html:has(.ks), body:has(.ks) {
        overflow: hidden;
        height: 100%;
    }
    .ks {
        position: fixed;
        top: var(--header-total);
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        padding-bottom: 0;
    }
    .ks {
        display: flex;
        flex-direction: column;
    }
    .ks__layout {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Hide desktop toolbar */
    .ks__toolbar { display: none; }

    /* Preview: fills remaining space between header and bottom bar */
    .ks__preview {
        flex: 1;
        padding: 0;
        position: relative;
        min-height: 0;
        overflow: hidden;
    }
    .ks__canvas-wrap {
        max-width: 100%;
        height: 100%;
        padding: var(--space-sm);
    }
    .ks__canvas {
        height: 100%;
    }
    .ks__product-img {
        max-height: 100%;
    }

    /* View thumbs: floating thumbnail (styles in page-gestalten.php) */

    /* Info panel: hidden by default on mobile */
    .ks__info { display: none; }

    /* Mobile bottom bar — above iOS safe area */
    .ks__mobile-bar {
        display: flex;
        align-items: stretch;
        background: var(--color-dark);
        border-top: 1px solid var(--color-border-light);
        flex-shrink: 0;
        z-index: 50;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .ks__mobile-action {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px 4px;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.15s;
    }
    .ks__mobile-action:hover,
    .ks__mobile-action:active { color: var(--color-white); }
    .ks__mobile-action svg { width: 22px; height: 22px; flex-shrink: 0; }
    .ks__mobile-bar { min-height: 56px; }

    .ks__mobile-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 20px;
        background: var(--color-primary);
        border: none;
        color: #fff;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .ks__mobile-cart:hover { background: var(--color-primary-hover); }
    .ks__mobile-cart svg { width: 22px; height: 22px; }

    /* Overlays fullscreen */
    .ks__overlay-panel {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* Print area adjustments */
    .ks__print-area { border-width: 1px; }

    /* === EDIT MODE: zoom into print area === */
    .ks__canvas.is-edit-mode {
        /* transform set by JS: translate + scale */
        transition: transform 0.3s ease;
    }
    /* Edit mode: img-wrap gets transformed by JS */
    .ks__canvas.is-edit-mode .ks__img-wrap {
        transition: transform 0.3s ease;
    }
    .ks__canvas.is-edit-mode .ks__product-img {
        /* filter: brightness(0.65) blur(1.5px); -- disabled for testing */
        transition: filter 0.3s ease;
    }
    .ks__canvas.is-edit-mode .ks__print-area {
        z-index: 10;
        border-color: rgba(255,255,255,0.35);
    }

    /* Edit bar replaces normal bottom bar */
    .ks__edit-bar {
        display: none;
        background: var(--color-dark);
        border-top: 1px solid var(--color-border-light);
        flex-shrink: 0;
        z-index: 50;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .ks__edit-bar.is-visible {
        display: flex;
        flex-direction: column;
    }
    .ks__edit-bar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px var(--space-md);
        border-bottom: 1px solid var(--color-border-light);
    }
    .ks__edit-bar-title {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-white);
    }
    .ks__edit-bar-done {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
    }
    .ks__edit-bar-done:hover { color: var(--color-white); }
    .ks__edit-bar-actions {
        display: flex;
        align-items: stretch;
    }
    .ks__edit-action {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
    }
    .ks__edit-action:hover { color: var(--color-white); }
    .ks__edit-action svg { width: 22px; height: 22px; }
    .ks__edit-action--danger:hover { color: var(--color-primary); }

    /* Hide normal bar in edit mode */
    body.ks-editing .ks__mobile-bar { display: none !important; }
    /* Picker bar visibility in edit mode */
    .ks__picker-bar.is-visible { display: flex !important; }

    /* Touch-friendly motif handles */
    .ks__motif-handle {
        width: 22px;
        height: 22px;
        bottom: -16px;
        right: -16px;
    }
    .ks__motif-delete {
        width: 30px;
        height: 30px;
        top: -28px;
        font-size: 18px;
        line-height: 26px;
    }
    /* Only show handles in edit mode on mobile */
    .ks__motif .ks__motif-handle,
    .ks__motif .ks__motif-delete { opacity: 0; pointer-events: none; }
    .ks__canvas.is-edit-mode .ks__motif .ks__motif-handle,
    .ks__canvas.is-edit-mode .ks__motif .ks__motif-delete { opacity: 1; pointer-events: auto; }

    /* Text motif handles: same rules */
    .ks__text-motif .ks__motif-handle,
    .ks__text-motif .ks__motif-delete { opacity: 0; pointer-events: none; }
    .ks__canvas.is-edit-mode .ks__text-motif .ks__motif-handle,
    .ks__canvas.is-edit-mode .ks__text-motif .ks__motif-delete { opacity: 1; pointer-events: auto; }

    /* Upload overlay: larger cards */
    .ks__motif-card { min-height: 90px; }
    .ks__motif-card-rm { width: 28px; height: 28px; font-size: 16px; line-height: 28px; opacity: 1; }

    /* Upload add button bigger tap target */
    .ks__upload-add-btn { padding: var(--space-lg); font-size: var(--text-base); }
}

@media (max-width: 480px) {
    .ks__motif-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

/* Mobile bar: hidden on desktop */
@media (min-width: 769px) {
    .ks__mobile-bar { display: none; }
}


/* Desktop: font sheet as centered overlay instead of bottom sheet */
@media (min-width: 769px) {
    .ks__color-sheet {
        inset: 0;
        align-items: center;
        justify-content: center;
    }
    .ks__color-sheet-panel {
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        max-width: 400px;
        width: 90%;
        padding-bottom: var(--space-lg);
    }
    /* Show motif handles on desktop always for selected/hovered */
    .ks__motif .ks__motif-handle,
    .ks__motif .ks__motif-delete,
    .ks__text-motif .ks__motif-handle,
    .ks__text-motif .ks__motif-delete {
        opacity: 0;
        pointer-events: auto;
    }
    .ks__motif:hover .ks__motif-handle,
    .ks__motif:hover .ks__motif-delete,
    .ks__motif.is-selected .ks__motif-handle,
    .ks__motif.is-selected .ks__motif-delete,
    .ks__text-motif:hover .ks__motif-handle,
    .ks__text-motif:hover .ks__motif-delete,
    .ks__text-motif.is-selected .ks__motif-handle,
    .ks__text-motif.is-selected .ks__motif-delete {
        opacity: 1;
    }
}

/* ===== DESIGN LIBRARY OVERLAY ===== */
.ks__library-panel { max-width: 640px; }
.ks__library-section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    padding: var(--space-md) 0 var(--space-sm);
}
.ks__library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.ks__library-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
}
.ks__library-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ks__library-card-img {
    aspect-ratio: 3 / 4;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ks__library-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.ks__library-card-img-placeholder {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}
.ks__library-card-body {
    padding: 8px 10px;
}
.ks__library-card-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks__library-card-meta {
    font-size: 10px;
    color: var(--color-text-subtle);
    margin-top: 2px;
}
.ks__library-empty {
    text-align: center;
    padding: var(--space-xl) 0;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}
.ks__library-login {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
}
.ks__library-login p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}
.ks__library-login a {
    display: inline-block;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background var(--transition);
}
.ks__library-login a:hover { background: var(--color-primary-hover); }

/* Save toast notification */
.ks__toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 500;
    z-index: 500;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.ks__toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== SAVE DESIGN OVERLAY ===== */
.ks__save-panel { max-width: 400px; }
.ks__save-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.ks__save-input {
    width: 100%;
    height: 44px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 0 var(--space-md);
    margin-bottom: var(--space-lg);
    box-sizing: border-box;
}
.ks__save-input:focus { border-color: var(--color-primary); outline: none; }
.ks__save-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
}
.ks__save-btn:hover { background: var(--color-primary-hover); }
.ks__save-btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* =======================================================
   FOHTEX Mein Konto — My Account
   ======================================================= */

/* Layout */
.fohtex-account {
    max-width: var(--container-wide, 1400px);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl) var(--space-5xl);
}
.fohtex-account__content {
    margin-top: var(--space-2xl);
}

/* Empty state */
.fohtex-account__empty {
    text-align: center;
    padding: var(--space-5xl) var(--space-xl);
    color: rgba(255,255,255,0.4);
}
.fohtex-account__empty svg {
    color: rgba(255,255,255,0.15);
    margin-bottom: var(--space-lg);
}
.fohtex-account__empty p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xl);
}

/* --- Navigation: Horizontal Icon Tabs --- */
.fohtex-account__nav {
    display: flex;
    gap: 4px;
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fohtex-account__nav::-webkit-scrollbar { display: none; }

.fohtex-account__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: var(--text-sm, 14px);
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    transition: all 0.15s ease;
    text-decoration: none;
}
.fohtex-account__nav-item:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.04);
}
.fohtex-account__nav-item.is-active {
    color: #fff;
    background: rgba(232,83,62,0.12);
}
.fohtex-account__nav-item.is-active .fohtex-account__nav-icon {
    color: #E8533E;
}
.fohtex-account__nav-icon {
    display: flex;
    flex-shrink: 0;
}
.fohtex-account__nav-item[data-logout] {
    margin-left: auto;
    color: rgba(255,255,255,0.25);
}
.fohtex-account__nav-item[data-logout]:hover {
    color: #E8533E;
}

@media (max-width: 768px) {
    .fohtex-account__nav-label { display: none; }
    .fohtex-account__nav-item { padding: 10px 14px; }
    .fohtex-account__nav-item[data-logout] { margin-left: 0; }
}

/* --- Dashboard --- */
.fohtex-dash__welcome {
    margin-bottom: var(--space-2xl);
}
.fohtex-dash__welcome h2 {
    font-size: var(--text-3xl, 30px);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-xs);
}
.fohtex-dash__welcome p {
    color: rgba(255,255,255,0.45);
    font-size: var(--text-base, 16px);
}

/* Quick Actions */
.fohtex-dash__actions {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}
.fohtex-dash__action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: rgba(255,255,255,0.7);
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.fohtex-dash__action:hover {
    border-color: rgba(255,255,255,0.15);
    color: #fff;
    transform: translateY(-1px);
}
.fohtex-dash__action--primary,
.fohtex-dash__action--primary:link,
.fohtex-dash__action--primary:visited,
.fohtex-dash__action--primary:active {
    background: #E8533E !important;
    border-color: #E8533E !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(232,83,62,0.3);
}
.fohtex-dash__action--primary:hover {
    box-shadow: 0 6px 24px rgba(232,83,62,0.45);
    color: #fff !important;
}

/* Stats */
.fohtex-dash__stats {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}
.fohtex-dash__stat {
    flex: 1;
    padding: var(--space-xl);
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-align: center;
}
.fohtex-dash__stat-number {
    font-size: var(--text-4xl, 36px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.fohtex-dash__stat-label {
    font-size: var(--text-sm, 14px);
    color: rgba(255,255,255,0.4);
}

/* Recent Orders Section */
.fohtex-dash__section h3 {
    font-size: var(--text-lg, 18px);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-lg);
}
.fohtex-dash__orders {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fohtex-dash__order {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 14px 18px;
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.fohtex-dash__order:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateX(2px);
}
.fohtex-dash__order-id {
    font-weight: 700;
    color: #fff;
    font-size: var(--text-sm, 14px);
    min-width: 60px;
}
.fohtex-dash__order-date {
    color: rgba(255,255,255,0.4);
    font-size: var(--text-sm, 14px);
    min-width: 90px;
}
.fohtex-dash__order-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
}
.fohtex-dash__order-status--processing {
    background: rgba(232,83,62,0.12);
    color: #E8533E;
}
.fohtex-dash__order-status--completed {
    background: rgba(76,175,80,0.12);
    color: #4CAF50;
}
.fohtex-dash__order-status--on-hold {
    background: rgba(255,193,7,0.12);
    color: #FFC107;
}
.fohtex-dash__order-total {
    margin-left: auto;
    font-weight: 700;
    color: #fff;
    font-size: var(--text-sm, 14px);
}
.fohtex-dash__order svg {
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .fohtex-dash__stats { flex-direction: column; }
    .fohtex-dash__order { flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
    .fohtex-dash__order-total { margin-left: 0; }
    .fohtex-dash__actions { flex-direction: column; }
}

/* --- Orders Page --- */
.fohtex-orders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fohtex-order-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 16px 20px;
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.fohtex-order-card:hover {
    border-color: rgba(232,83,62,0.2);
    transform: translateX(2px);
}
.fohtex-order-card__previews {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.fohtex-order-card__img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #1A1A1A;
    overflow: hidden;
}
.fohtex-order-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}
.fohtex-order-card__info {
    flex: 1;
    min-width: 0;
}
.fohtex-order-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 2px;
}
.fohtex-order-card__number {
    font-weight: 700;
    color: #fff;
    font-size: var(--text-base, 16px);
}
.fohtex-order-card__status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
}
.fohtex-order-card__status--processing {
    background: rgba(232,83,62,0.12);
    color: #E8533E;
}
.fohtex-order-card__status--completed {
    background: rgba(76,175,80,0.12);
    color: #4CAF50;
}
.fohtex-order-card__status--on-hold {
    background: rgba(255,193,7,0.12);
    color: #FFC107;
}
.fohtex-order-card__date {
    color: rgba(255,255,255,0.35);
    font-size: var(--text-sm, 14px);
}
.fohtex-order-card__items {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
}
.fohtex-order-card__total {
    font-weight: 700;
    color: #fff;
    font-size: var(--text-lg, 18px);
    white-space: nowrap;
    flex-shrink: 0;
}
.fohtex-order-card__arrow {
    color: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .fohtex-order-card { flex-wrap: wrap; padding: 14px; }
    .fohtex-order-card__total { width: 100%; text-align: right; }
    .fohtex-order-card__arrow { display: none; }
}

/* --- Designs Page --- */
.fohtex-designs-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2xl);
}
.fohtex-designs-page__header h2 {
    font-size: var(--text-2xl, 24px);
    font-weight: 700;
    color: #fff;
}
.fohtex-designs-page__header .btn--primary,
.fohtex-designs-page__header .btn--primary:link,
.fohtex-designs-page__header .btn--primary:visited {
    color: #fff !important;
}
.fohtex-designs-page__section-title {
    font-size: var(--text-base, 16px);
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-lg);
    margin-top: var(--space-2xl);
}
.fohtex-designs-page__section-title:first-of-type {
    margin-top: 0;
}
.fohtex-designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-lg);
}
.fohtex-design-card {
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
}
.fohtex-design-card:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}
.fohtex-design-card__images {
    display: flex;
    gap: 2px;
    background: #1A1A1A;
}
.fohtex-design-card__img {
    flex: 1;
    aspect-ratio: 1;
    overflow: hidden;
}
.fohtex-design-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}
.fohtex-design-card__info {
    padding: 14px 16px 8px;
}
.fohtex-design-card__name {
    font-weight: 600;
    color: #fff;
    font-size: var(--text-sm, 14px);
    margin-bottom: 2px;
}
.fohtex-design-card__product {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
}
.fohtex-design-card__btn,
.fohtex-design-card__btn:link,
.fohtex-design-card__btn:visited {
    display: block;
    text-align: center;
    padding: 10px 16px;
    margin: 8px 16px 14px;
    background: rgba(232,83,62,0.1) !important;
    border: 1px solid rgba(232,83,62,0.2) !important;
    border-radius: 8px;
    color: #E8533E !important;
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
.fohtex-design-card__btn:hover {
    background: rgba(232,83,62,0.18) !important;
    color: #E8533E !important;
}
.fohtex-design-card__badge {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: 4px;
}

/* --- WC Forms Dark Override (Addresses, Account Details) --- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.fohtex-account__content h2,
.fohtex-account__content h3 {
    color: #fff !important;
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
}
.woocommerce-MyAccount-content,
.fohtex-account__content {
    color: rgba(255,255,255,0.7);
}
.fohtex-account__content a {
    color: #E8533E;
}
.fohtex-account__content a.fohtex-dash__action,
.fohtex-account__content a.fohtex-dash__order,
.fohtex-account__content a.fohtex-order-card {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.fohtex-account__content a:hover {
    text-decoration: underline;
}

/* WC form fields */
.fohtex-account__content .woocommerce-input-wrapper input,
.fohtex-account__content .woocommerce-input-wrapper select,
.fohtex-account__content input[type="text"],
.fohtex-account__content input[type="email"],
.fohtex-account__content input[type="tel"],
.fohtex-account__content input[type="password"],
.fohtex-account__content select,
.fohtex-account__content textarea {
    background: var(--color-surface, #2A2A2A) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 12px 14px !important;
    font-family: var(--font-body, 'Space Grotesk', sans-serif) !important;
    font-size: var(--text-sm, 14px) !important;
    width: 100%;
    box-sizing: border-box;
}
.fohtex-account__content input:focus,
.fohtex-account__content select:focus,
.fohtex-account__content textarea:focus {
    border-color: #E8533E !important;
    box-shadow: 0 0 0 1px #E8533E !important;
    outline: none;
}
.fohtex-account__content label {
    color: rgba(255,255,255,0.5) !important;
    font-size: var(--text-sm, 14px);
    margin-bottom: 4px;
    display: block;
}
.fohtex-account__content .form-row {
    margin-bottom: var(--space-lg);
}

/* WC buttons */
.fohtex-account__content button[type="submit"],
.fohtex-account__content .woocommerce-button,
.fohtex-account__content .button {
    background: #E8533E !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-family: var(--font-body, 'Space Grotesk', sans-serif) !important;
    font-weight: 700 !important;
    font-size: var(--text-sm, 14px) !important;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 16px rgba(232,83,62,0.3);
}
.fohtex-account__content button[type="submit"]:hover,
.fohtex-account__content .woocommerce-button:hover,
.fohtex-account__content .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(232,83,62,0.45);
}

/* WC address cards */
.fohtex-account__content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}
.fohtex-account__content .woocommerce-Address {
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: var(--space-xl);
}
.fohtex-account__content .woocommerce-Address header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    gap: var(--space-md);
}
.fohtex-account__content .woocommerce-Address header h3 {
    margin: 0 !important;
    font-size: var(--text-lg, 18px) !important;
}
.fohtex-account__content .woocommerce-Address header a {
    font-size: var(--text-sm, 14px);
    white-space: nowrap;
    flex-shrink: 0;
}
.fohtex-account__content .woocommerce-Address address {
    color: rgba(255,255,255,0.6);
    font-style: normal;
    line-height: 1.7;
    font-size: var(--text-sm, 14px);
}
/* Hide WC default address title link (duplicate) */
.fohtex-account__content .woocommerce-Address .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}
.fohtex-account__content .woocommerce-Address .woocommerce-Address-title h3 {
    margin: 0 !important;
    font-size: var(--text-lg, 18px) !important;
}
.fohtex-account__content .woocommerce-Address .woocommerce-Address-title a {
    font-size: var(--text-sm, 14px);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .fohtex-account { padding: var(--space-lg) var(--space-md) var(--space-3xl); }
    .fohtex-account__content .woocommerce-Addresses { grid-template-columns: 1fr; }
    .fohtex-designs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* WC View-Order page */
.fohtex-account__content .woocommerce-order-details,
.fohtex-account__content .woocommerce-customer-details {
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}
.fohtex-account__content table {
    width: 100%;
    border-collapse: collapse;
}
.fohtex-account__content table th,
.fohtex-account__content table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: var(--text-sm, 14px);
}
.fohtex-account__content table th {
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    text-align: left;
}
.fohtex-account__content table tfoot th,
.fohtex-account__content table tfoot td {
    color: #fff;
    font-weight: 700;
}

/* WC Notices */
.fohtex-account__content .woocommerce-message,
.fohtex-account__content .woocommerce-info,
.fohtex-account__content .woocommerce-error {
    background: rgba(232,83,62,0.08);
    border: 1px solid rgba(232,83,62,0.2);
    border-radius: 10px;
    padding: 14px 18px;
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--space-lg);
    list-style: none;
}

/* Order detail previews */
.fohtex-order-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: var(--space-xl);
}
.fohtex-order-previews__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}
.fohtex-order-previews__img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #1A1A1A;
    overflow: hidden;
    flex-shrink: 0;
}
.fohtex-order-previews__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}
.fohtex-order-previews__name {
    font-weight: 600;
    color: #fff;
    font-size: var(--text-sm, 14px);
}

/* Pagination */
.fohtex-account__pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: var(--space-2xl);
}
.fohtex-account__pagination a,
.fohtex-account__pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: var(--text-sm, 14px);
    color: rgba(255,255,255,0.5);
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: all 0.15s ease;
}
.fohtex-account__pagination a:hover {
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}
.fohtex-account__pagination span.current {
    background: rgba(232,83,62,0.12);
    border-color: rgba(232,83,62,0.3);
    color: #E8533E;
    font-weight: 700;
}

/* =======================================================
   FOHTEX Login Form (My Account - not logged in)
   ======================================================= */
.fohtex-login {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-lg, 24px) var(--space-3xl, 64px);
}
.fohtex-login__card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface, #2A2A2A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 44px 40px 36px;
}
.fohtex-login__title {
    color: #fff;
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 32px;
    text-align: center;
}
.fohtex-login__field {
    margin-bottom: 20px;
}
.fohtex-login__field label {
    display: block;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}
.fohtex-login__field input {
    width: 100%;
    background: var(--color-dark, #1A1A1A) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 14px 16px !important;
    font-family: var(--font-body, 'Space Grotesk', sans-serif) !important;
    font-size: 15px !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fohtex-login__field input::placeholder {
    color: rgba(255,255,255,0.2);
}
.fohtex-login__field input:focus {
    border-color: #E8533E !important;
    box-shadow: 0 0 0 2px rgba(232,83,62,0.2) !important;
    outline: none !important;
}
.fohtex-login__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
}
.fohtex-login__submit {
    width: 100%;
    background: #E8533E !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px 24px !important;
    font-family: var(--font-body, 'Space Grotesk', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 16px rgba(232,83,62,0.3);
}
.fohtex-login__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(232,83,62,0.45);
}
.fohtex-login__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.4);
    font-family: var(--font-body, 'Space Grotesk', sans-serif);
    font-size: 13px;
    cursor: pointer;
}
.fohtex-login__remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #E8533E;
    cursor: pointer;
}
.fohtex-login__footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.fohtex-login__footer a {
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s ease;
}
.fohtex-login__footer a:hover {
    color: #E8533E;
}
/* Hide the default page title on the login page */
.woocommerce-account:not(.logged-in) .page-content > .container > h1 {
    display: none;
}
.fohtex-login__icon {
    margin-bottom: 20px;
}
.fohtex-login__hint {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin: -12px 0 28px;
}
@media (max-width: 480px) {
    .fohtex-login__card { padding: 32px 24px 28px; border-radius: 16px; }
}



/* Front page: USP bar handles spacing, no double padding */
.home .site-main { padding-top: 0; }