/* JANEYA - Premium High-End Design CSS */

/* ===== VARIABLES ===== */
:root {
    /* Premium Colors */
    --cream: #FFFCF7;
    --sand: #F7F3ED;
    --beige: #E8E0D5;
    --taupe: #C4B7A6;
    --mocha: #9C8B7A;
    --coffee: #6B5B4F;
    --espresso: #3E322A;
    --black: #1A1613;
    --gold: #BFA065;
    --gold-light: #D4BC8A;
    --gold-dark: #A88B52;
    
    /* Status Colors */
    --success: #4CAF50;
    --error: #E53935;
    --warning: #FF9800;
    --info: #2196F3;
    
    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-body: 'Jost', sans-serif;
    
    /* Spacing */
    --header-height: 100px;
    --announce-height: 36px;
    --navbar-height: 64px;
    
    /* Border */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    
    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
    :root {
        --header-height: 90px;
        --announce-height: 32px;
        --navbar-height: 58px;
    }
}

/* ===== RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--espresso);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 15px;
}

body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .container {
        padding: 0 40px;
    }
}

@media (min-width: 1200px) {
    .container {
        padding: 0 60px;
    }
}

/* ===== PREMIUM ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.btn:hover::before {
    transform: translateX(100%);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(191, 160, 101, 0.3);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(191, 160, 101, 0.4);
}

.btn-dark {
    background: linear-gradient(135deg, var(--espresso) 0%, var(--black) 100%);
    color: #fff;
    box-shadow: var(--shadow);
}

.btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
}

.btn-outline:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(191, 160, 101, 0.3);
}

.btn-outline-dark {
    background: transparent;
    border: 2px solid var(--espresso);
    color: var(--espresso);
}

.btn-outline-dark:hover {
    background: var(--espresso);
    color: #fff;
}

.btn-link {
    background: none;
    padding: 0;
    color: var(--gold);
    font-weight: 500;
}

.btn-link:hover {
    color: var(--gold-dark);
    transform: none;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--coffee);
    margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    background: #fff;
    border: 2px solid var(--beige);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    color: var(--espresso);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(191, 160, 101, 0.1);
}

.form-input::placeholder {
    color: var(--mocha);
    opacity: 0.6;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== ALERTS ===== */
.alert {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    animation: fadeInUp 0.4s ease;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    color: #2E7D32;
    border-left: 4px solid var(--success);
}

.alert-error {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    color: #C62828;
    border-left: 4px solid var(--error);
}

.alert-warning {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: #E65100;
    border-left: 4px solid var(--warning);
}

.alert-info {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    color: #1565C0;
    border-left: 4px solid var(--info);
}

/* ===== CARDS ===== */
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--beige);
    background: linear-gradient(to bottom, #fff 0%, var(--sand) 100%);
}

.card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--espresso);
}

.card-body {
    padding: 24px;
}

.card-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--beige);
    background: var(--sand);
}

/* ===== STATUS BADGES ===== */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 20px;
    line-height: 1;
}

.status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-success {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    color: var(--success);
}

.status-danger,
.status-error {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    color: var(--error);
}

.status-warning {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: var(--warning);
}

.status-info,
.status-secondary {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    color: var(--info);
}

/* ===== TABLES ===== */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

thead {
    background: linear-gradient(to bottom, var(--sand) 0%, var(--beige) 100%);
}

thead th {
    padding: 16px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--coffee);
    border-bottom: 2px solid var(--taupe);
}

tbody tr {
    transition: var(--transition-fast);
}

tbody tr:hover {
    background: var(--sand);
}

tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--beige);
    color: var(--espresso);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* ===== LOADING ===== */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--beige);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay .loading {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* ===== GLASSMORPHISM ===== */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.glass-dark {
    background: rgba(62, 50, 42, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ===== SHIMMER EFFECT ===== */
.shimmer {
    background: linear-gradient(90deg, var(--sand) 0%, var(--beige) 50%, var(--sand) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ===== UTILITIES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }

.hidden { display: none !important; }
.visible { display: block !important; }

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}

/* ===== RESPONSIVE IMAGES ===== */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== SCROLL IMPROVEMENTS ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sand);
}

::-webkit-scrollbar-thumb {
    background: var(--taupe);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mocha);
}

/* Smooth Scroll for all browsers */
html {
    scroll-padding-top: var(--header-height);
}

/* Selection Color */
::selection {
    background: var(--gold);
    color: #fff;
}

::-moz-selection {
    background: var(--gold);
    color: #fff;
}
/* JANEYA - Premium Modest Fashion CSS */
:root{--cream:#FFFCF7;--sand:#F7F3ED;--beige:#E8E0D5;--taupe:#C4B7A6;--mocha:#9C8B7A;--coffee:#6B5B4F;--espresso:#3E322A;--black:#1A1613;--gold:#BFA065;--gold-light:#D4BC8A;--success:#4CAF50;--error:#E53935;--font-display:'Playfair Display',serif;--font-body:'Jost',sans-serif;--header-height:100px;--announce-height:36px;--navbar-height:64px;--radius:8px}
@media(max-width:767px){:root{--header-height:90px;--announce-height:32px;--navbar-height:58px}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--cream);color:var(--espresso);line-height:1.6;overflow-x:hidden}
body.menu-open{overflow:hidden;position:fixed;width:100%}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit}
ul{list-style:none}
input,textarea,select{font-family:inherit;font-size:inherit}
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 40px}}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Header */
.header{position:fixed;top:0;left:0;right:0;z-index:9999;overflow:visible}
.announce{background:var(--espresso);color:#fff;height:var(--announce-height);display:flex;align-items:center;overflow:hidden}
.announce-track{display:flex;animation:marquee 30s linear infinite;white-space:nowrap}
.announce-item{display:inline-flex;align-items:center;gap:30px;padding:0 30px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:300}
.announce .dot{color:var(--gold)}
.nav{background:var(--cream);height:var(--navbar-height);border-bottom:1px solid var(--beige);transition:all .3s;overflow:visible}
.nav.scrolled{background:rgba(255,252,247,.95);backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(0,0,0,.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;overflow:visible}
.nav-left{display:flex;align-items:center;gap:8px}
@media(min-width:992px){.nav-left{display:none}}
.logo{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:.08em}
@media(min-width:768px){.logo{font-size:26px;letter-spacing:.1em}}
.nav-menu{display:none;align-items:center;gap:32px}
@media(min-width:992px){.nav-menu{display:flex}}
.nav-link{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;position:relative;padding:5px 0}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-link:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:4px;overflow:visible}
.nav-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;transition:all .3s;overflow:visible}
.nav-btn:hover{background:var(--sand);color:var(--gold)}
.nav-btn svg{width:20px;height:20px;stroke-width:1.5}
/* Header Badge - DIRECTLY ON ICON */
/* BADGE STYLES */
.nav-btn{position:relative}
.nav-btn .badge{position:absolute;top:6px;right:4px;min-width:15px;height:15px;padding:0 3px;background:#3E322A;color:#fff;font-size:8px;font-weight:700;border-radius:7px;display:none;align-items:center;justify-content:center;line-height:1;border:2px solid #fff;z-index:10;pointer-events:none}
.nav-btn .badge.show{display:flex}
@keyframes headerBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.badge.badge-pulse{animation:headerBadgePulse .4s ease}
.nav-btn .badge.badge-pulse,.nav-btn>.badge.badge-pulse,#wishBadge.badge-pulse,#cartBadge.badge-pulse{animation:headerBadgePulse .4s ease!important}
.menu-toggle{display:flex;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center}
@media(min-width:992px){.menu-toggle{display:none}}
.menu-toggle span{width:20px;height:1.5px;background:var(--espresso);transition:all .3s}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
.hide-mobile{display:none}
@media(min-width:992px){.hide-mobile{display:flex}}

/* Profile Dropdown */
.profile-dropdown{position:relative}
.profile-menu{position:absolute;top:100%;right:0;background:#fff;min-width:200px;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s;z-index:100;padding:10px 0;pointer-events:none}
.profile-dropdown:hover .profile-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.profile-menu a{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;transition:background .2s}
.profile-menu a:hover{background:var(--sand)}
.profile-menu a svg{width:16px;height:16px}
.profile-menu hr{border:none;border-top:1px solid var(--beige);margin:5px 0}

/* Mobile Menu */
.mobile-menu{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:var(--cream);z-index:999;padding:30px 20px;transform:translateX(-100%);transition:transform .4s ease,visibility 0s .4s,opacity .4s;overflow-y:auto;pointer-events:none;visibility:hidden;opacity:0}
.mobile-menu.active{transform:translateX(0);pointer-events:auto;visibility:visible;opacity:1;transition:transform .4s ease,visibility 0s 0s,opacity .4s}
.mobile-link{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:24px;padding:16px 0;border-bottom:1px solid var(--beige)}
.mobile-link:hover{color:var(--gold)}
.mobile-section{margin-top:30px;padding-top:20px;border-top:1px solid var(--beige)}
.mobile-section-title{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--mocha);margin-bottom:15px}
.mobile-btns{display:flex;gap:12px;margin-top:20px}
.mobile-btn{flex:1;padding:14px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-align:center;border-radius:var(--radius)}
.mobile-btn.primary{background:var(--espresso);color:#fff}
.mobile-btn.secondary{border:1px solid var(--taupe)}

/* Hero */
.hero{position:relative;width:100%;height:auto;min-height:100vh;min-height:100dvh;overflow:visible;touch-action:pan-y;-webkit-overflow-scrolling:touch;background:var(--sand);margin:0;padding:0}
.hero-slider{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:pan-y;margin:0;padding:0}
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;touch-action:pan-y;visibility:hidden;transition:opacity 1s,visibility 1s;margin:0;padding:0}
.hero-slide.active{opacity:1;visibility:visible;z-index:1}
.hero-picture{display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0}
.hero-slide-img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;max-width:none!important;max-height:none!important;min-width:100%!important;min-height:100%!important;margin:0!important;padding:0!important;display:block!important}
.hero-overlay{position:absolute;inset:0;touch-action:pan-y;pointer-events:none;background:linear-gradient(to top,rgba(26,22,19,.7) 0%,rgba(26,22,19,.3) 50%,rgba(26,22,19,.1) 100%);z-index:2}
.hero-content-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;touch-action:pan-y;pointer-events:none;align-items:flex-end;justify-content:flex-start;z-index:10;padding:0 20px 60px}
.hero-content{width:100%;max-width:100%;color:#fff;z-index:10;pointer-events:auto}
@media(min-width:768px){.hero-content-wrapper{align-items:center;padding:0 60px}.hero-content{max-width:700px}}
.hero-tag{display:inline-block;font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px;opacity:0;animation:fadeInUp .6s ease .2s forwards}
.hero-title{font-family:var(--font-display);font-size:32px;font-weight:400;line-height:1.15;margin-bottom:12px;opacity:0;animation:fadeInUp .6s ease .4s forwards}
@media(min-width:768px){.hero-title{font-size:48px}}
.hero-title em{font-style:italic;color:var(--gold-light)}
.hero-desc{font-size:13px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:20px;max-width:380px;opacity:0;animation:fadeInUp .6s ease .6s forwards}
.hero-btns{display:flex;flex-direction:column;gap:10px;opacity:0;animation:fadeInUp .6s ease .8s forwards}
@media(min-width:480px){.hero-btns{flex-direction:row;gap:12px}}
.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:8px}
@media(min-width:768px){.hero-dots{bottom:40px}}
.hero-dot{width:24px;height:3px;background:rgba(255,255,255,.3);border-radius:2px;cursor:pointer;transition:all .4s;padding:0}
.hero-dot.active{background:#fff;width:40px}
.hero-scroll{position:absolute;bottom:20px;right:20px;display:none;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:9px;letter-spacing:.1em;text-transform:uppercase;z-index:20}
@media(min-width:768px){.hero-scroll{display:flex;bottom:40px;right:40px}}
.hero-scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,var(--gold),transparent);animation:pulse 2s infinite}

/* Buttons - Angular Konto Style - KANTIG */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:0;transition:all .2s ease;border:none;cursor:pointer;text-decoration:none}
@media(min-width:768px){.btn{padding:14px 32px}}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-gold,.btn-dark,.btn-primary{background:#3E322A;color:#fff}
.btn-gold:hover,.btn-dark:hover,.btn-primary:hover{background:#2D241E;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn-outline{border:2px solid #fff;color:#fff;background:transparent}
.btn-outline:hover{background:#fff;color:#3E322A}
.btn-outline-dark{border:2px solid #3E322A;color:#3E322A;background:transparent}
.btn-outline-dark:hover{background:#3E322A;color:#fff}
.btn-sm{padding:10px 18px;font-size:11px}

/* Trust Bar */
.trust{background:var(--sand);padding:20px 0;border-bottom:1px solid var(--beige)}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.trust-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.trust-icon svg{width:24px;height:24px}
.trust-item h4{font-family:var(--font-display);font-size:12px;font-weight:500;margin-bottom:2px}
.trust-item p{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--mocha)}

/* Sections */
.section{padding:50px 0}
@media(min-width:768px){.section{padding:80px 0}}
.section-sand{background:var(--sand)}
.section-header{text-align:center;margin-bottom:35px}
@media(min-width:768px){.section-header{margin-bottom:50px}}
.section-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mocha);margin-bottom:8px}
.section-title{font-family:var(--font-display);font-size:26px;font-weight:400;line-height:1.2}
@media(min-width:768px){.section-title{font-size:36px}}
.section-title em{font-style:italic;color:var(--gold)}
.section-flex{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}
@media(min-width:768px){.section-flex{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.section-flex .section-header{text-align:left;margin-bottom:0}
.section-link{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--coffee);display:inline-flex;align-items:center;gap:6px}
.section-link:hover{color:var(--gold)}

/* Collections */
.collections-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.collections-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.collection-card{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:var(--radius);display:block}
.collection-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.collection-placeholder{background:linear-gradient(135deg,var(--beige),var(--taupe))}
.collection-card:hover .collection-img{transform:scale(1.05)}
.collection-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,22,19,.75) 0%,rgba(26,22,19,.2) 50%,transparent 100%);transition:background .4s}
.collection-card:hover .collection-overlay{background:linear-gradient(to top,rgba(26,22,19,.85) 0%,rgba(26,22,19,.4) 100%)}
.collection-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff}
.collection-count{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:6px}
.collection-title{font-family:var(--font-display);font-size:18px;font-weight:400;margin-bottom:10px}
@media(min-width:768px){.collection-title{font-size:22px}}
.collection-cta{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.5);opacity:0;transform:translateY(8px);transition:all .3s}
.collection-card:hover .collection-cta{opacity:1;transform:translateY(0);border-color:#fff}

/* Categories */
.categories-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.categories-scroll::-webkit-scrollbar{display:none}
.category-card{flex:0 0 200px;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.category-card img,.category-placeholder{width:100%;aspect-ratio:3/4;object-fit:cover}
.category-placeholder{background:linear-gradient(135deg,var(--beige),var(--taupe))}
.category-info{padding:16px;text-align:center}
.category-info h3{font-family:var(--font-display);font-size:15px;font-weight:500;margin-bottom:4px}
.category-info span{font-size:11px;color:var(--mocha)}

/* Products Grid */
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.products-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.products-grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.products-grid-4{grid-template-columns:repeat(4,1fr)}}

/* Product Card */
.product-card{cursor:pointer}
.product-image{position:relative;overflow:hidden;margin-bottom:12px;background:var(--beige);border-radius:var(--radius);aspect-ratio:3/4}
.product-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.product-img.hover{display:none}
.product-placeholder{position:absolute;inset:0;background:linear-gradient(135deg,var(--beige),var(--taupe))}
.product-badge{position:absolute;top:10px;left:10px;padding:5px 10px;font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border-radius:4px}
.product-badge.new{background:#fff;color:var(--espresso)}
.product-badge.sale{background:var(--gold);color:var(--espresso)}
.product-wish{position:absolute;top:10px;right:10px;width:32px;height:32px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--coffee);transition:all .3s;z-index:5}
.product-wish:hover,.product-wish.active{color:var(--gold);transform:scale(1.1)}
.product-wish svg{width:16px;height:16px}
.product-actions{position:absolute;bottom:0;left:0;right:0;padding:10px;opacity:0;transform:translateY(8px);transition:all .3s}
.product-card:hover .product-actions{opacity:1;transform:translateY(0)}
.product-add{width:100%;padding:12px;background:var(--espresso);color:#fff;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;transition:background .3s}
.product-add:hover{background:var(--coffee)}
.product-link{position:absolute;inset:0;z-index:1}
.product-info{text-align:center}
.product-cat{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mocha);margin-bottom:4px}
.product-name{font-family:var(--font-display);font-size:14px;font-weight:500;margin-bottom:5px;transition:color .3s}
@media(min-width:768px){.product-name{font-size:15px}}
.product-card:hover .product-name{color:var(--gold)}
.product-price{font-size:13px;color:var(--coffee)}
.product-price .old{text-decoration:line-through;color:var(--taupe);margin-left:6px;font-size:11px}
.product-colors{display:flex;gap:4px;justify-content:center;margin-top:8px}
.product-color{width:14px;height:14px;border-radius:50%;border:1px solid var(--beige);cursor:pointer}

/* Shop The Look */
.shop-look-grid{display:grid;gap:30px}
@media(min-width:768px){.shop-look-grid{grid-template-columns:2fr 1fr;gap:40px}}
.shop-look-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shop-look-video{position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;cursor:pointer}
.shop-look-video video,.shop-look-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-look-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s}
.shop-look-video:hover .shop-look-play{opacity:1}
.shop-look-play svg{width:40px;height:40px;color:#fff}
.shop-look-video.active{ring:2px solid var(--gold)}
.shop-look-products{background:#fff;border-radius:var(--radius);padding:24px}
.shop-look-title{font-family:var(--font-display);font-size:18px;margin-bottom:16px}
.shop-look-hint{color:var(--mocha);font-size:13px}
.shop-look-product{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--beige)}
.shop-look-product:last-child{border-bottom:none}
.shop-look-product img{width:60px;height:80px;object-fit:cover;border-radius:4px}
.shop-look-product-info{flex:1}
.shop-look-product-name{font-size:13px;font-weight:500;display:block;margin-bottom:4px}
.shop-look-product-price{font-size:12px;color:var(--gold)}

/* Reviews */
.reviews-slider{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.reviews-slider::-webkit-scrollbar{display:none}
.review-card{flex:0 0 300px;scroll-snap-align:start;background:#fff;border-radius:var(--radius);padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.review-stars{display:flex;gap:2px;margin-bottom:12px}
.review-stars svg{width:16px;height:16px;color:var(--beige)}
.review-stars svg.filled{color:var(--gold)}
.review-title{font-family:var(--font-display);font-size:15px;margin-bottom:8px}
.review-text{font-size:13px;color:var(--coffee);line-height:1.6;margin-bottom:12px}
.review-meta{font-size:11px;color:var(--mocha)}
.review-author{font-weight:500;color:var(--espresso)}
.review-product{display:block;margin-top:2px}

/* Newsletter */
.newsletter{background:var(--espresso);padding:60px 0;position:relative;overflow:hidden}
@media(min-width:768px){.newsletter{padding:80px 0}}
.newsletter-bg{position:absolute;border-radius:50%;filter:blur(100px);opacity:.1}
.newsletter-bg.a{width:300px;height:300px;background:var(--gold);top:-100px;right:-50px}
.newsletter-bg.b{width:200px;height:200px;background:var(--coffee);bottom:-50px;left:-50px}
.newsletter-inner{position:relative;z-index:10;max-width:450px;margin:0 auto;text-align:center}
.newsletter-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px;display:block}
.newsletter-title{font-family:var(--font-display);font-size:26px;font-weight:400;color:#fff;margin-bottom:10px}
@media(min-width:768px){.newsletter-title{font-size:32px}}
.newsletter-text{font-size:13px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.7);margin-bottom:24px}
.newsletter-form{display:flex;flex-direction:column;gap:10px}
@media(min-width:480px){.newsletter-form{flex-direction:row}}
.newsletter-input{flex:1;padding:14px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:13px;outline:none;border-radius:6px;transition:all .3s}
.newsletter-input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-input:focus{border-color:var(--gold);background:rgba(255,255,255,.12)}
.newsletter-btn{padding:14px 24px;background:var(--gold);color:var(--espresso);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;transition:all .3s;white-space:nowrap}
.newsletter-btn:hover{background:#fff}
.newsletter-note{font-size:10px;color:rgba(255,255,255,.4);margin-top:12px}
.newsletter-note a{color:var(--gold-light)}
.newsletter-msg{margin-top:15px}

/* Footer */
.footer{background:var(--black);color:#fff;padding:50px 0 30px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:40px}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr repeat(3,1fr);gap:40px}}
.footer-brand{grid-column:1/-1}
@media(min-width:768px){.footer-brand{grid-column:auto}}
.footer-logo{font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:.1em;margin-bottom:12px}
.footer-desc{font-size:12px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.6);margin-bottom:20px;max-width:280px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:rgba(255,255,255,.7);transition:all .3s}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--espresso)}
.footer-col h4{font-family:var(--font-display);font-size:13px;font-weight:500;margin-bottom:16px;color:rgba(255,255,255,.9)}
.footer-col a{display:block;font-size:12px;font-weight:300;color:rgba(255,255,255,.55);margin-bottom:10px;transition:color .3s}
.footer-col a:hover{color:var(--gold-light)}
.footer-bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between}}
.footer-copy{font-size:10px;color:rgba(255,255,255,.4)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:10px;color:rgba(255,255,255,.4);transition:color .3s}
.footer-legal a:hover{color:var(--gold-light)}

/* WhatsApp */
.whatsapp-float{position:fixed;bottom:20px;right:20px;width:50px;height:50px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 15px rgba(37,211,102,.4);z-index:998;transition:transform .3s}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:26px;height:26px}

/* Alerts */
.alert{padding:14px 18px;border-radius:var(--radius);font-size:13px;margin-bottom:20px}
.alert-success{background:#E8F5E9;color:#2E7D32;border:1px solid #C8E6C9}
.alert-error{background:#FFEBEE;color:#C62828;border:1px solid #FFCDD2}
.alert-info{background:#E3F2FD;color:#1565C0;border:1px solid #BBDEFB}

/* Forms */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--coffee);margin-bottom:8px}
.form-input,.form-select,.form-textarea{width:100%;padding:14px 16px;border:1px solid var(--beige);border-radius:var(--radius);font-size:14px;background:#fff;transition:all .3s;outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(191,160,101,.1)}
.form-textarea{min-height:120px;resize:vertical}
.form-row{display:grid;gap:16px}
@media(min-width:480px){.form-row{grid-template-columns:repeat(2,1fr)}}
.form-error{color:var(--error);font-size:12px;margin-top:6px}
.form-hint{color:var(--mocha);font-size:11px;margin-top:4px}

/* Cards */
.card{background:#fff;border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.06);overflow:hidden}
.card-header{padding:20px 24px;border-bottom:1px solid var(--beige)}
.card-title{font-family:var(--font-display);font-size:18px;font-weight:500}
.card-body{padding:24px}

/* Sidebar Cart/Wish */
.sidebar{position:fixed;top:0;right:0;width:100%;max-width:420px;height:100%;background:#fff;z-index:1001;transform:translateX(100%);transition:transform .4s ease;display:flex;flex-direction:column;pointer-events:none;visibility:hidden}
.sidebar.active{transform:translateX(0);pointer-events:auto;visibility:visible}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;visibility:hidden;transition:all .3s}
.sidebar-overlay.active{opacity:1;visibility:visible}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--beige)}
.sidebar-title{font-family:var(--font-display);font-size:18px;font-weight:500}
.sidebar-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .3s}
.sidebar-close:hover{background:var(--sand)}
.sidebar-close svg{width:20px;height:20px}
.sidebar-body{flex:1;overflow-y:auto;padding:20px}
.sidebar-footer{padding:20px;border-top:1px solid var(--beige)}
.sidebar-total{display:flex;justify-content:space-between;margin-bottom:16px;font-size:15px}
.sidebar-total strong{font-weight:600}
.sidebar-btn{width:100%;padding:16px;background:var(--espresso);color:#fff;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius);transition:background .3s}
.sidebar-btn:hover{background:var(--coffee)}

/* Cart Item */
.cart-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--beige)}
.cart-item:last-child{border-bottom:none}
.cart-item-img{width:80px;height:100px;object-fit:cover;border-radius:4px;background:var(--beige)}
.cart-item-info{flex:1}
.cart-item-name{font-size:14px;font-weight:500;margin-bottom:4px}
.cart-item-meta{font-size:11px;color:var(--mocha);margin-bottom:8px}
.cart-item-price{font-size:13px;font-weight:500;color:var(--gold)}
.cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:10px}
.cart-item-qty button{width:28px;height:28px;border:1px solid var(--beige);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px}
.cart-item-qty span{font-size:13px;min-width:30px;text-align:center}
.cart-item-remove{color:var(--mocha);font-size:11px;cursor:pointer;margin-top:8px}
.cart-item-remove:hover{color:var(--error)}
.cart-empty{text-align:center;padding:40px 20px;color:var(--mocha)}

/* Page Header */
.page-header{background:var(--sand);padding:120px 0 40px;margin-top:var(--header-height);text-align:center}
.page-title{font-family:var(--font-display);font-size:32px;font-weight:400}
.page-subtitle{font-size:14px;color:var(--mocha);margin-top:8px}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mocha);margin-bottom:20px}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--espresso)}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.filter-btn{padding:10px 20px;border:1px solid var(--beige);border-radius:30px;font-size:12px;transition:all .3s}
.filter-btn:hover,.filter-btn.active{border-color:var(--espresso);background:var(--espresso);color:#fff}
.filter-select{padding:10px 36px 10px 16px;border:1px solid var(--beige);border-radius:30px;font-size:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B5B4F'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:16px;appearance:none;cursor:pointer}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pagination a,.pagination span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--beige);border-radius:var(--radius);font-size:13px;transition:all .3s}
.pagination a:hover{border-color:var(--gold);color:var(--gold)}
.pagination .active{background:var(--espresso);border-color:var(--espresso);color:#fff}

/* Loading */
.loading{display:flex;align-items:center;justify-content:center;padding:40px}
.spinner{width:30px;height:30px;border:2px solid var(--beige);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}

/* Profile completion */
.profile-progress{background:var(--sand);border-radius:var(--radius);padding:20px;margin-bottom:30px}
.profile-progress-title{font-size:13px;font-weight:500;margin-bottom:12px}
.profile-progress-bar{height:8px;background:var(--beige);border-radius:4px;overflow:hidden}
.profile-progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .5s}
.profile-goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.profile-goal{font-size:11px;padding:6px 12px;background:#fff;border-radius:20px;display:flex;align-items:center;gap:6px}
.profile-goal.done{background:var(--gold);color:#fff}
.profile-goal svg{width:12px;height:12px}

/* Empty state */
.empty-state{text-align:center;padding:60px 20px}
.empty-state svg{width:80px;height:80px;color:var(--beige);margin-bottom:20px}
.empty-state h3{font-family:var(--font-display);font-size:20px;margin-bottom:8px}
.empty-state p{color:var(--mocha);font-size:14px;margin-bottom:20px}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid var(--beige);margin-bottom:30px;overflow-x:auto}
.tab{padding:14px 24px;font-size:13px;font-weight:500;color:var(--mocha);border-bottom:2px solid transparent;white-space:nowrap;transition:all .3s}
.tab:hover{color:var(--espresso)}
.tab.active{color:var(--espresso);border-color:var(--gold)}

/* Table */
table{width:100%;border-collapse:collapse}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--beige)}
th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mocha);background:var(--sand)}
td{font-size:13px}

/* Status badges */
.status{display:inline-flex;padding:4px 10px;font-size:10px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;border-radius:20px}
.status-pending{background:#FFF3E0;color:#E65100}
.status-success{background:#E8F5E9;color:#2E7D32}
.status-danger{background:#FFEBEE;color:#C62828}
.status-info{background:#E3F2FD;color:#1565C0}

/* Account layout */
.account-layout{display:grid;gap:30px;margin-top:var(--header-height);padding:40px 0}
@media(min-width:768px){.account-layout{grid-template-columns:250px 1fr;padding:60px 0}}
.account-nav{background:#fff;border-radius:var(--radius);padding:20px;height:fit-content;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.account-nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius);font-size:13px;color:var(--coffee);transition:all .3s;margin-bottom:4px}
.account-nav-item:hover{background:var(--sand);color:var(--espresso)}
.account-nav-item.active{background:var(--espresso);color:#fff}
.account-nav-item svg{width:18px;height:18px}
.account-content{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.account-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--beige)}
.account-title{font-family:var(--font-display);font-size:22px;font-weight:500}

/* Grid utilities */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:767px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Text utilities */
.text-center{text-align:center}
.text-gold{color:var(--gold)}
.text-muted{color:var(--mocha)}
.text-sm{font-size:12px}
.text-lg{font-size:18px}
.font-display{font-family:var(--font-display)}

/* Spacing */
.mt-0{margin-top:0}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}
.mb-0{margin-bottom:0}.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}
.p-20{padding:20px}.p-30{padding:30px}

/* Hide/show */
.hidden{display:none!important}
@media(max-width:767px){.hide-mobile{display:none!important}}
@media(min-width:768px){.hide-desktop{display:none!important}}

/* ======================================
   SHOP THE LOOK - COMPLETE STYLES
   ====================================== */

.shop-look-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 992px) {
    .shop-look-container {
        grid-template-columns: 1fr;
    }
}

.shop-look-videos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 768px) {
    .shop-look-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

.shop-look-video {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--beige);
    transition: transform 0.3s, box-shadow 0.3s;
}

.shop-look-video:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.shop-look-video.active {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.shop-look-video video,
.shop-look-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-look-video .shop-look-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--beige), var(--sand));
}

.shop-look-video .shop-look-placeholder svg {
    width: 40px;
    height: 40px;
    color: var(--mocha);
}

.shop-look-video .shop-look-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 15px 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.shop-look-video .shop-look-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.shop-look-video:hover .shop-look-play {
    opacity: 1;
}

.shop-look-video .shop-look-play svg {
    width: 20px;
    height: 20px;
    color: var(--espresso);
    margin-left: 3px;
}

.shop-look-products {
    background: #fff;
    border-radius: var(--radius);
    padding: 25px;
    max-height: 600px;
    overflow-y: auto;
}

.shop-look-products-title {
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--beige);
}

.shop-look-hint {
    color: var(--mocha);
    font-size: 14px;
}

.shop-look-product {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--beige);
    transition: background 0.3s;
}

.shop-look-product:hover {
    background: var(--sand);
    margin: 0 -15px;
    padding: 15px;
}

.shop-look-product:last-child {
    border-bottom: none;
}

.shop-look-product img {
    width: 70px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--sand);
}

.shop-look-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shop-look-product-name {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--espresso);
}

.shop-look-product-price {
    font-size: 14px;
    color: var(--gold);
    font-weight: 600;
}

.shop-look-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--mocha);
    background: rgba(255,255,255,0.5);
    border-radius: var(--radius);
}

/* Section Subtitle */
.section-subtitle {
    max-width: 600px;
    margin: 10px auto 0;
    color: var(--mocha);
    font-size: 15px;
}

/* ===== NEUE FEATURES 2026 ===== */

/* Versand Progress Circle */
.shipping-progress {
    padding: 20px;
    text-align: center;
    background: var(--sand);
    border-bottom: 1px solid var(--beige);
}

.shipping-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    position: relative;
}

.progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-bg {
    fill: none;
    stroke: var(--beige);
    stroke-width: 8;
}

.progress-fill {
    fill: none;
    stroke: var(--gold);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.progress-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.progress-icon {
    width: 32px;
    height: 32px;
    color: var(--espresso);
}

.progress-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.progress-icon-free {
    width: 32px;
    height: 32px;
    color: #E53935;
    animation: heartbeat 1.5s ease-in-out infinite;
}

.progress-icon-free svg {
    width: 100%;
    height: 100%;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.progress-amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--espresso);
}

.progress-text-free {
    font-size: 11px;
    font-weight: 600;
    color: #E53935;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shipping-text {
    font-size: 12px;
    color: var(--coffee);
    line-height: 1.5;
}

.shipping-text strong {
    color: var(--gold);
    font-weight: 600;
}

.shipping-text-free {
    font-size: 13px;
    color: #4CAF50;
    font-weight: 600;
}

/* Coupon Section */
.coupon-section {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.coupon-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--beige);
    border-radius: var(--radius);
    font-size: 13px;
    transition: all 0.3s;
}

.coupon-input:focus {
    outline: none;
    border-color: var(--gold);
}

.coupon-btn {
    padding: 12px 20px;
    background: var(--espresso);
    color: #fff;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s;
}

.coupon-btn:hover {
    background: var(--gold);
}

.coupon-message {
    font-size: 12px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 4px;
}

.coupon-message.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.coupon-message.error {
    background: rgba(229, 57, 53, 0.1);
    color: #E53935;
}

/* Cart Summary */
.cart-summary {
    background: var(--sand);
    padding: 15px;
    border-radius: var(--radius);
    margin-bottom: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

.summary-row.total {
    border-top: 1px solid var(--beige);
    margin-top: 8px;
    padding-top: 15px;
    font-size: 16px;
}

.summary-row strong {
    font-weight: 600;
    color: var(--espresso);
}

/* Continue Shopping */
.continue-shopping {
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 10px;
    color: var(--coffee);
    font-size: 13px;
    transition: color 0.3s;
}

.continue-shopping:hover {
    color: var(--gold);
}

/* Improved Cart Items */
.cart-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid var(--beige);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-img {
    width: 90px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--sand);
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--espresso);
    line-height: 1.4;
}

.cart-item-name a {
    color: inherit;
    transition: color 0.3s;
}

.cart-item-name a:hover {
    color: var(--gold);
}

.cart-item-meta {
    font-size: 12px;
    color: var(--mocha);
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.cart-item-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--espresso);
}

.cart-item-old-price {
    font-size: 13px;
    color: var(--mocha);
    text-decoration: line-through;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

.cart-item-qty {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--sand);
    border-radius: var(--radius);
    padding: 6px 12px;
}

.cart-item-qty button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--espresso);
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s;
}

.cart-item-qty button:hover {
    color: var(--gold);
}

.cart-item-qty span {
    font-size: 14px;
    font-weight: 500;
    min-width: 20px;
    text-align: center;
}

.cart-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mocha);
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 50%;
}

.cart-item-remove:hover {
    background: rgba(229, 57, 53, 0.1);
    color: #E53935;
}

.cart-item-remove svg {
    width: 18px;
    height: 18px;
}

/* Wish Item Actions */
.wish-item-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.wish-item-actions .btn {
    flex: 1;
    padding: 10px 15px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.wish-item-actions .btn svg {
    width: 14px;
    height: 14px;
}

/* Empty States */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
}

.cart-empty svg {
    width: 60px;
    height: 60px;
    color: var(--mocha);
    margin: 0 auto 20px;
    opacity: 0.5;
}

.cart-empty p {
    font-size: 15px;
    color: var(--mocha);
    margin-bottom: 25px;
}

/* Product Colors */
.product-colors {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.color-bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.color-bubble:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.color-more {
    font-size: 11px;
    color: var(--mocha);
    font-weight: 500;
}

/* Product Quick View Button */
.product-quick {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.product-quick svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

.product-quick:hover {
    background: var(--gold);
    color: #fff;
    transform: scale(1.05);
}

/* Product Actions Layout */
.product-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    gap: 10px;
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

.product-add {
    flex: 1;
    padding: 12px 20px;
    background: #fff;
    color: var(--espresso);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: all 0.3s;
}

.product-add:hover {
    background: var(--gold);
    color: #fff;
}

/* Quick View Modal */
.quick-view-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.quick-view-modal.active {
    display: flex;
}

.quick-view-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
}

.quick-view-content {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .quick-view-content {
        flex-direction: row;
    }
}

.quick-view-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.quick-view-close:hover {
    background: var(--espresso);
    color: #fff;
    transform: rotate(90deg);
}

.quick-view-close svg {
    width: 20px;
    height: 20px;
}

.quick-view-images {
    flex: 1;
    padding: 30px;
    background: var(--sand);
}

.quick-view-main-image {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 15px;
}

.quick-view-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.quick-view-thumb {
    width: 70px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.quick-view-thumb:hover,
.quick-view-thumb.active {
    opacity: 1;
    border-color: var(--gold);
}

.quick-view-details {
    flex: 1;
    padding: 40px 30px;
}

.quick-view-title {
    font-family: var(--font-display);
    font-size: 28px;
    margin-bottom: 10px;
}

.quick-view-price {
    font-size: 24px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 20px;
}

.quick-view-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--coffee);
    margin-bottom: 25px;
}

.quick-view-colors {
    margin-bottom: 20px;
}

.quick-view-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mocha);
    margin-bottom: 10px;
}

.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.color-option:hover,
.color-option.active {
    border-color: var(--espresso);
    transform: scale(1.1);
}

.size-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.size-option {
    padding: 10px 20px;
    border: 1px solid var(--beige);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.size-option:hover,
.size-option.active {
    border-color: var(--espresso);
    background: var(--espresso);
    color: #fff;
}

.quick-view-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

/* Mobile Optimierungen */
@media (max-width: 767px) {
    .shipping-circle {
        width: 100px;
        height: 100px;
    }
    
    .progress-icon {
        width: 28px;
        height: 28px;
    }
    
    .cart-item-img {
        width: 70px;
        height: 95px;
    }
    
    .product-colors {
        margin-top: 6px;
    }
    
    .color-bubble {
        width: 18px;
        height: 18px;
    }
    
    .quick-view-content {
        margin: 20px;
    }
    
    .quick-view-images,
    .quick-view-details {
        padding: 20px;
    }
}

/* Bildformat 3:4 für alle Produktbilder */
.product-img,
.collection-img,
.category-img {
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center;
}

/* Collection & Category Cards mit 3:4 */
.collection-card img,
.category-card img {
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center;
}

/* Placeholder mit 3:4 */
.product-placeholder,
.collection-placeholder {
    aspect-ratio: 3/4;
    background: var(--sand);
    border-radius: var(--radius);
}

/* Footer Adresse & Kontakt */
.footer-address {
    margin: 20px 0;
}

.footer-address h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mocha);
    margin-bottom: 12px;
}

.footer-address p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--coffee);
    margin: 0;
}

.footer-address strong {
    color: var(--espresso);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.footer-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold);
    font-size: 13px;
    transition: all 0.3s;
    padding: 8px 0;
}

.footer-contact a:hover {
    color: var(--gold-light);
    transform: translateX(3px);
}

.footer-contact a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===== MOBILE OPTIMIERUNGEN ===== */

/* Touch-optimierte Buttons */
@media (max-width: 767px) {
    .btn,
    .nav-btn,
    .product-add,
    .product-wish {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Mobile Header */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    
    /* Mobile Menu verbessert */
    .mobile-menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .mobile-link {
        font-size: 20px;
        padding: 18px 0;
    }
    
    /* Sidebars auf Mobile */
    .sidebar {
        max-width: 100%;
        width: 100%;
    }
    
    .sidebar-body {
        padding: 15px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }
    
    .sidebar-footer {
        padding: 15px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }
    
    /* Hero auf Mobile */
    .hero {
        min-height: 500px;
        height: 70vh;
    }
    
    .hero-content {
        padding: 20px 15px calc(20px + env(safe-area-inset-bottom));
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-btns {
        gap: 8px;
    }
    
    /* Products Grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .products-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-card {
        font-size: 13px;
    }
    
    .product-name {
        font-size: 13px;
        line-height: 1.3;
    }
    
    .product-price {
        font-size: 14px;
    }
    
    /* Collections auf Mobile */
    .collections-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Formulare */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Verhindert Zoom beim Focus auf iOS */
    }
    
    /* Checkout auf Mobile */
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    
    .checkout-section {
        padding: 20px 15px;
    }
    
    /* Footer auf Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* Extra kleine Bildschirme */
@media (max-width: 374px) {
    .hero-title {
        font-size: 24px;
    }
    
    .products-grid {
        gap: 10px;
    }
    
    .product-name {
        font-size: 12px;
    }
}

/* Landscape-Modus auf Mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        height: 100vh;
        min-height: 100vh;
    }
    
    .hero-content {
        top: 50%;
        transform: translateY(-50%);
    }
    
    .mobile-menu {
        padding-top: 20px;
    }
}

/* Tablet Portrait */
@media (min-width: 768px) and (max-width: 991px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .collections-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Safe-Area Support für Geräte mit Notch */
@supports (padding: max(0px)) {
    .hero-content,
    .sidebar-body,
    .sidebar-footer,
    .mobile-menu {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    
    .nav-inner {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* High-DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-img,
    .collection-img,
    .hero-slide-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero-slide-img {
        transform: none !important;
    }
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
    /* Kann später aktiviert werden */
    /* :root {
        --cream: #1a1613;
        --sand: #2a2420;
        --espresso: #FFFCF7;
    } */
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--espresso);
    color: #fff;
    padding: 15px 25px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 767px) {
    .toast-notification {
        bottom: calc(60px + env(safe-area-inset-bottom));
        left: 20px;
        right: 20px;
        transform: translateX(0) translateY(100px);
    }
    
    .toast-notification.show {
        transform: translateX(0) translateY(0);
    }
}

/* ============================================
   COOKIE CONSENT - DSGVO-konform
   ============================================ */

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 20px;
    z-index: 99999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.cookie-banner-text h3 {
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--espresso);
}

.cookie-banner-text p {
    font-size: 13px;
    color: var(--coffee);
    line-height: 1.6;
    margin: 0;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .cookie-banner {
        padding: 20px 15px calc(20px + env(safe-area-inset-bottom));
    }
    
    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .cookie-banner-actions {
        flex-direction: column;
    }
    
    .cookie-banner-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Cookie Modal */
.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.cookie-modal.show {
    opacity: 1;
    visibility: visible;
}

.cookie-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.cookie-modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s;
}

.cookie-modal.show .cookie-modal-content {
    transform: scale(1);
}

.cookie-modal-header {
    padding: 25px 30px;
    border-bottom: 1px solid var(--beige);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cookie-modal-header h2 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--espresso);
    margin: 0;
}

.cookie-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.cookie-modal-close:hover {
    background: var(--beige);
    transform: rotate(90deg);
}

.cookie-modal-close svg {
    width: 18px;
    height: 18px;
    color: var(--espresso);
}

.cookie-modal-body {
    padding: 25px 30px;
    overflow-y: auto;
    flex: 1;
}

.cookie-intro {
    font-size: 14px;
    color: var(--coffee);
    line-height: 1.7;
    margin-bottom: 25px;
}

.cookie-category {
    background: var(--sand);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 15px;
}

.cookie-category:last-child {
    margin-bottom: 0;
}

.cookie-category-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.cookie-category-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--espresso);
    margin-bottom: 6px;
}

.cookie-category-info p {
    font-size: 13px;
    color: var(--coffee);
    line-height: 1.6;
    margin: 0;
}

/* Cookie Toggle Switch */
.cookie-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: relative;
    width: 50px;
    height: 26px;
    background: var(--taupe);
    border-radius: 13px;
    transition: all 0.3s;
}

.cookie-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background: var(--gold);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
    transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
    background: var(--mocha);
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-required {
    font-size: 11px;
    font-weight: 600;
    color: var(--mocha);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cookie-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--beige);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-privacy-link {
    font-size: 12px;
    color: var(--gold);
    text-decoration: underline;
    margin-left: auto;
}

.cookie-privacy-link:hover {
    color: var(--gold-light);
}

@media (max-width: 767px) {
    .cookie-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .cookie-modal-header,
    .cookie-modal-body,
    .cookie-modal-footer {
        padding: 20px;
    }
    
    .cookie-category {
        padding: 15px;
    }
    
    .cookie-category-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .cookie-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cookie-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }
    
    .cookie-privacy-link {
        margin-left: 0;
        text-align: center;
    }
}

/* Cookie Settings Trigger (z.B. im Footer) */
.cookie-settings-trigger {
    cursor: pointer;
    color: var(--gold);
    transition: color 0.3s;
}

.cookie-settings-trigger:hover {
    color: var(--gold-light);
}

/* ============================================
   HIGH-END OPTIMIZATIONS
   ============================================ */

/* HERO BANNER - Perfekt anzeigen */
.hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 !important;
}

.hero-image, .hero img {
    width: 100%;
    height: auto;
    min-height: 400px;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
}

@media (max-width: 768px) {
    .hero-image, .hero img {
        min-height: 300px;
        object-fit: contain !important;
    }
}

/* Loading Screen Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease;
}

.animate-slideUp {
    animation: slideUp 0.6s ease;
}


/* HERO MOBILE FIX - AM ENDE DER DATEI */
@media (max-width: 767px) {
    .hero {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        margin-top: 0 !important;
    }
    
    .hero-slide-img {
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .hero-content-wrapper {
        padding: 0 20px 80px !important;
        align-items: flex-end !important;
    }
    
    .hero-overlay {
        background: linear-gradient(to top, rgba(26,22,19,0.8) 0%, rgba(26,22,19,0.4) 40%, rgba(26,22,19,0.1) 70%, transparent 100%) !important;
    }
}

/* LANDSCAPE MOBILE */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        height: 100vh !important;
    }
    
    .hero-content-wrapper {
        align-items: center !important;
        padding: 0 20px !important;
    }
}

/* SEHR KLEINE SCREENS */
@media (max-width: 375px) {
    .hero {
        min-height: 100vh !important;
    }
}

/* ========== IMPROVED HERO STYLES ========== */
.hero-slide-image {
    touch-action: pan-y;
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 8s ease-out;
}

.hero-slide.active .hero-slide-image {
    touch-action: pan-y;
    pointer-events: none;
    transform: scale(1.05);
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: auto;
    width: 100%;
    max-width: 580px;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .hero-content {
        padding: 0 40px;
        max-width: 650px;
    }
}

@media (min-width: 1200px) {
    .hero-content {
        padding: 0 80px;
    }
}

.hero-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 12px;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

@media (min-width: 768px) {
    .hero-tag {
        font-size: 11px;
        letter-spacing: 0.3em;
        margin-bottom: 18px;
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    color: white;
    margin-bottom: 12px;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: fadeInUp 0.8s ease 0.4s forwards;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 48px;
        margin-bottom: 18px;
    }
}

@media (min-width: 1200px) {
    .hero-title {
        font-size: 62px;
    }
}

.hero-title em {
    font-style: italic;
    color: var(--gold-light);
}

.hero-description {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 400px;
    margin-bottom: 22px;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: fadeInUp 0.8s ease 0.6s forwards;
}

@media (min-width: 768px) {
    .hero-description {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 30px;
    }
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: fadeInUp 0.8s ease 0.8s forwards;
}

@media (min-width: 480px) {
    .hero-buttons {
        flex-direction: row;
        gap: 12px;
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    background: var(--coffee);
    color: white;
}

@media (min-width: 768px) {
    .btn-primary {
        padding: 16px 32px;
        font-size: 11px;
        letter-spacing: 0.12em;
    }
}

.btn-primary:hover {
    background: var(--espresso);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

@media (min-width: 768px) {
    .btn-outline {
        padding: 16px 32px;
        font-size: 11px;
        letter-spacing: 0.12em;
    }
}

.btn-outline:hover {
    background: white;
    color: var(--espresso);
    border-color: white;
}

.btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.btn:hover svg {
    transform: translate3d(4px, 0, 0);
}

.hero-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
}

@media (min-width: 768px) {
    .hero-slider-dots {
        bottom: 35px;
        gap: 10px;
    }
}

.hero-slider-dot {
    width: 25px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

@media (min-width: 768px) {
    .hero-slider-dot {
        width: 35px;
    }
}

.hero-slider-dot.active {
    background: white;
    width: 45px;
}

@media (min-width: 768px) {
    .hero-slider-dot.active {
        width: 55px;
    }
}

@keyframes playPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ========== IMPROVED SHOP THE LOOK STYLES ========== */
.shop-look-section {
    background: linear-gradient(135deg, #F5E6E0 0%, var(--sand) 50%, var(--cream) 100%);
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .shop-look-section {
        padding: 80px 0;
    }
}

@media (min-width: 1200px) {
    .shop-look-section {
        padding: 100px 0;
    }
}

.shop-look-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #E8D4D4 0%, transparent 70%);
    opacity: 0.5;
    border-radius: 50%;
}

.shop-look-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
    opacity: 0.3;
    border-radius: 50%;
}

.shop-look-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .shop-look-header {
        margin-bottom: 50px;
    }
}

.shop-look-content {
    position: relative;
    z-index: 2;
}

.shop-look-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

@media (min-width: 992px) {
    .shop-look-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
}

@media (min-width: 1200px) {
    .shop-look-grid {
        gap: 60px;
    }
}

.look-videos-container {
    position: relative;
}

.look-videos {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 15px;
    margin: 0 -16px;
}

@media (min-width: 992px) {
    .look-videos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
}

.look-video-card {
    flex: 0 0 70%;
    max-width: 280px;
    scroll-snap-align: center;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(62, 50, 42, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 992px) {
    .look-video-card {
        flex: none;
        max-width: none;
        border-radius: 20px;
    }
}

.look-video-card:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 25px 60px rgba(62, 50, 42, 0.2);
}

.look-video-card::before {
    content: '';
    display: block;
    padding-top: 150%;
}

@media (min-width: 992px) {
    .look-video-card::before {
        padding-top: 140%;
    }
}

.look-video-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.look-video-card:hover .look-video-image {
    transform: scale(1.05);
}

.look-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 24, 20, 0.6) 0%, transparent 50%, transparent 100%);
    transition: background 0.4s ease;
}

.look-video-card:hover .look-video-overlay {
    background: linear-gradient(to top, rgba(30, 24, 20, 0.7) 0%, rgba(30, 24, 20, 0.2) 100%);
}

.look-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--espresso);
    transition: transform 0.4s ease, background 0.4s ease;
    animation: playPulse 2s infinite;
}

@media (min-width: 768px) {
    .look-video-play {
        width: 64px;
        height: 64px;
    }
}

.look-video-card:hover .look-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: white;
}

.look-video-play svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}

@media (min-width: 768px) {
    .look-video-play svg {
        width: 24px;
        height: 24px;
    }
}

.look-video-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
}

@media (min-width: 768px) {
    .look-video-info {
        padding: 25px;
    }
}

.look-video-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .look-video-title {
        font-size: 20px;
    }
}

.look-video-subtitle {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.look-video-card.active {
    border: 3px solid var(--gold);
}

.look-video-card.active::after {
    content: 'Aktiv';
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    background: var(--gold);
    color: white;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 20px;
    z-index: 10;
}

.look-products-container {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(62, 50, 42, 0.08);
}

@media (min-width: 768px) {
    .look-products-container {
        padding: 30px;
    }
}

@media (min-width: 992px) {
    .look-products-container {
        position: sticky;
        top: 130px;
    }
}

.look-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--beige);
}

.look-products-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--espresso);
}

@media (min-width: 768px) {
    .look-products-title {
        font-size: 22px;
    }
}

.look-products-count {
    font-size: 11px;
    color: var(--mocha);
    background: var(--sand);
    padding: 6px 12px;
    border-radius: 20px;
}

.look-products-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.look-product-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: var(--sand);
    border-radius: 12px;
    transition: background 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .look-product-item {
        padding: 15px;
        gap: 18px;
    }
}

.look-product-item:hover {
    background: var(--beige);
    transform: translate3d(5px, 0, 0);
}

.look-product-image {
    width: 70px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .look-product-image {
        width: 80px;
        height: 100px;
    }
}

.look-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.look-product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.look-product-category {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mocha);
    margin-bottom: 4px;
}

.look-product-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--espresso);
    margin-bottom: 6px;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .look-product-name {
        font-size: 15px;
    }
}

.look-product-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--coffee);
}

.look-product-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.look-product-add {
    width: 36px;
    height: 36px;
    background: var(--espresso);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    border: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .look-product-add {
        width: 40px;
        height: 40px;
    }
}

.look-product-add:hover {
    background: var(--gold);
    transform: scale(1.1);
}

.look-product-add svg {
    width: 16px;
    height: 16px;
}

.look-shop-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    background: transparent;
    border: 1px solid var(--espresso);
    color: var(--espresso);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.look-shop-all:hover {
    background: var(--espresso);
    color: white;
}

.look-shop-all svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.look-shop-all:hover svg {
    transform: translate3d(4px, 0, 0);
}

/* ========== IMPROVED FOOTER STYLES ========== */
.footer-brand-logo {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.footer-brand-text {
    font-size: 11px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 18px;
    max-width: 240px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--espresso);
}

.footer-column-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--gold-light);
}

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}

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

.footer-copyright {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    order: 2;
}

@media (min-width: 768px) {
    .footer-copyright {
        order: 1;
    }
}

.footer-legal {
    display: flex;
    gap: 18px;
    order: 1;
}

@media (min-width: 768px) {
    .footer-legal {
        order: 2;
    }
}

.footer-legal a {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--gold-light);
}

/* ========== BACK TO TOP BUTTON ========== */
.back-to-top {
    position: fixed;
    bottom: 74px;
    right: 18px;
    width: 42px;
    height: 42px;
    background: var(--espresso);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 20px, 0);
    transition: all 0.4s ease;
    z-index: 998;
    border: none;
    cursor: pointer;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.back-to-top:hover {
    background: var(--gold);
}

.back-to-top svg {
    width: 16px;
    height: 16px;
}

/* ========== MOBILE NAV ICONS FIX ========== */
@media (max-width: 767px) {
    .nav-btn {
        color: var(--espresso);
    }
    
    .nav-btn:active {
        background: var(--sand);
        color: var(--gold);
    }
}

/* ========== IMPROVED SHOP THE LOOK DESKTOP ========== */
@media (min-width: 992px) {
    .shop-look-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 50px;
    }
    
    .look-videos {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* ========== COLLECTIONS SWIPER WITH DOTS ========== */
/* Collections Grid - Mobile Swiper, Desktop Grid */
.collections-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 20px;
    margin: 0 -20px;
}

@media (min-width: 768px) {
    .collections-grid {
        padding: 0 40px 20px;
        margin: 0 -40px;
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .collections-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        margin: 0;
    }
}

.collection-card {
    flex: 0 0 85%;
    max-width: 400px;
    scroll-snap-align: center;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 768px) {
    .collection-card {
        flex: 0 0 45%;
    }
}

@media (min-width: 992px) {
    .collection-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (min-width: 1200px) {
    .collection-card {
        flex: none;
        max-width: none;
    }
}

.collection-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(62, 50, 42, 0.2);
}

/* Swipe Indicator for Collections */
.swipe-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

@media (min-width: 1200px) {
    .swipe-indicator {
        display: none;
    }
}

.swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--taupe);
    transition: all 0.3s ease;
}

.swipe-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--gold);
}

/* ========== SCROLL REVEAL ANIMATIONS ========== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ========== STAGGER ANIMATIONS ========== */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-item.revealed {
    animation: staggerFadeInUp 0.6s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.2s; }
.stagger-item:nth-child(4) { animation-delay: 0.3s; }
.stagger-item:nth-child(5) { animation-delay: 0.4s; }
.stagger-item:nth-child(6) { animation-delay: 0.5s; }
.stagger-item:nth-child(7) { animation-delay: 0.6s; }
.stagger-item:nth-child(8) { animation-delay: 0.7s; }

@keyframes staggerFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== ENHANCED HOVER EFFECTS ========== */
.product-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(62, 50, 42, 0.15);
}

.product-card:hover .product-img {
    transform: scale(1.08);
}

.collection-card .collection-img {
    transition: transform 0.6s ease;
}

.collection-card:hover .collection-img {
    transform: scale(1.1);
}

/* ========== PARALLAX EFFECT ========== */
.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ========== SECTION DECORATIONS ========== */
.section-decoration {
    position: absolute;
    pointer-events: none;
}

.section-decoration-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
    opacity: 0.1;
    filter: blur(60px);
}

.section-decoration-line {
    width: 2px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    opacity: 0.3;
}

/* ========== FLOATING ELEMENTS ========== */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

.floating-slow {
    animation: float 8s ease-in-out infinite;
}

/* ========== TEXT SHINE EFFECT ========== */
.shine-text {
    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--gold) 50%,
        var(--espresso) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* ========== GRADIENT BORDERS ========== */
.gradient-border {
    position: relative;
    background: white;
    border-radius: 12px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--gold), var(--gold-light), var(--gold));
    background-size: 200% 200%;
    animation: gradientRotate 3s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========== RIPPLE EFFECT ========== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(191, 160, 101, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* ========== SMOOTH SECTION TRANSITIONS ========== */
/* Sections sind standardmäßig sichtbar - nur scroll-reveal Klassen werden animiert */
.section {
    opacity: 1;
    transform: translateY(0);
}

.section.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section.scroll-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ========== IMPROVED TRUST BAR ICONS ========== */
.trust-item-icon {
    position: relative;
}

.trust-item-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.trust-item:hover .trust-item-icon::before {
    opacity: 0.2;
}

.trust-item-icon svg {
    filter: drop-shadow(0 2px 8px rgba(191, 160, 101, 0.2));
    transition: transform 0.3s ease;
}

.trust-item:hover .trust-item-icon svg {
    transform: scale(1.1) rotate(5deg);
}

/* ========== ENHANCED NEWSLETTER ========== */
.newsletter {
    position: relative;
}

.newsletter-bg {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: float 10s ease-in-out infinite;
}

.newsletter-bg.a {
    background: var(--gold);
    top: -100px;
    left: -100px;
}

.newsletter-bg.b {
    background: var(--gold-light);
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

/* ========== SCROLL PROGRESS BAR ========== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    z-index: 10001;
    transition: width 0.1s ease;
}

/* ========== IMAGE LOADING EFFECT ========== */
.lazy-load {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.lazy-load.loaded {
    opacity: 1;
}

/* ========== CURSOR TRAIL EFFECT (Desktop only) ========== */
@media (min-width: 1024px) {
    .cursor-trail {
        position: fixed;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--gold);
        opacity: 0;
        pointer-events: none;
        z-index: 9999;
        transition: opacity 0.3s ease, transform 0.3s ease;
        mix-blend-mode: difference;
    }
}

/* ========== SECTION TITLE ANIMATIONS ========== */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    transition: width 0.6s ease;
}

.section-header.in-view .section-title::after {
    width: 100%;
}

/* ========== BUTTON LOADING STATE ========== */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== TOAST NOTIFICATIONS ========== */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    border-left: 4px solid var(--success);
}

.toast.error {
    border-left: 4px solid var(--error);
}

/* ========== ENHANCED REVIEW CARDS ========== */
.review-card {
    transition: all 0.4s ease;
}

.review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(62, 50, 42, 0.12);
}

.review-stars svg {
    transition: all 0.3s ease;
}

.review-card:hover .review-stars svg.filled {
    transform: scale(1.2);
    filter: drop-shadow(0 2px 4px rgba(191, 160, 101, 0.4));
}

/* ========== MOBILE OPTIMIZATIONS ========== */
@media (max-width: 767px) {
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale {
        opacity: 1;
        transform: none;
    }
}

/* ========== HIDE SCROLLBAR ========== */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ========== FALLBACK FÜR DEAKTIVIERTES JAVASCRIPT ========== */
/* Wenn JavaScript nicht läuft, zeige alle Elemente trotzdem an */
.no-js .scroll-reveal,
.no-js .scroll-reveal-left,
.no-js .scroll-reveal-right,
.no-js .scroll-reveal-scale,
.no-js .stagger-item {
    opacity: 1 !important;
    transform: none !important;
}

/* Standard-Fallback für bessere Kompatibilität */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale,
    .stagger-item,
    .section.scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Wallet Amount (kleiner) */
.wallet-amount{font-size:11px;color:var(--gold);display:inline-block;white-space:nowrap}

/* Categories Section */
.categories-section{padding:60px 0;background:var(--cream)}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.category-card{position:relative;height:320px;border-radius:16px;overflow:hidden;display:block;transition:transform .4s ease,box-shadow .4s ease}
.category-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(62,50,42,.15)}
.category-image{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.category-card:hover .category-image{transform:scale(1.1)}
.category-placeholder{background:var(--sand)}
.category-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,22,19,.7) 0%,transparent 60%);transition:background .4s ease}
.category-card:hover .category-overlay{background:linear-gradient(to top,rgba(26,22,19,.8) 0%,rgba(26,22,19,.3) 60%)}
.category-content{position:absolute;bottom:0;left:0;right:0;padding:30px 24px;z-index:2}
.category-name{font-family:'Playfair Display',serif;font-size:24px;font-weight:500;color:#fff;margin:0 0 8px;transition:transform .4s ease}
.category-card:hover .category-name{transform:translateY(-4px)}
.category-cta{font-size:13px;color:var(--gold-light);text-transform:uppercase;letter-spacing:0.1em;opacity:0;transform:translateY(10px);transition:all .4s ease}
.category-card:hover .category-cta{opacity:1;transform:translateY(0)}
@media(max-width:768px){
.categories-section{padding:40px 0}
.categories-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.category-card{height:240px}
.category-name{font-size:18px}
}

/* Adressen als Boxen */
.adress-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:24px}
.adress-card{background:#fff;border:2px solid var(--beige);border-radius:12px;padding:20px;position:relative;transition:all .3s}
.adress-card.standard{border-color:var(--gold);background:var(--cream)}
.adress-card:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.adress-badge{position:absolute;top:12px;right:12px;background:var(--gold);color:#fff;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase}
.adress-name{font-size:16px;font-weight:600;margin:0 0 12px;color:var(--espresso)}
.adress-details{font-size:14px;line-height:1.6;color:#666;margin-bottom:16px}
.adress-actions{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--beige)}
.adress-btn{padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .3s;text-decoration:none;border:none;background:var(--sand)}
.adress-btn:hover{background:var(--beige)}
.adress-btn-primary{background:var(--espresso);color:#fff}
.adress-btn-primary:hover{background:var(--coffee)}

/* ============================================
   WISHLIST & CART ANIMATION EFFECTS
   ============================================ */

/* Heart pulse animation on header wishlist icon */
@keyframes heartPulse {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.2); }
    60% { transform: scale(1); }
}

@keyframes heartBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-3px); }
}

/* Cart bounce animation */
@keyframes cartBounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    20% { transform: translateY(-8px) rotate(-5deg); }
    40% { transform: translateY(0) rotate(5deg); }
    60% { transform: translateY(-4px) rotate(-3deg); }
    80% { transform: translateY(0) rotate(2deg); }
}

/* Floating heart that flies to header - uses CSS custom properties for target */
.flying-heart {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    width: 24px;
    height: 24px;
}

.flying-heart svg {
    width: 24px;
    height: 24px;
    fill: #c41e3a;
    stroke: #c41e3a;
}

/* Flying cart item */
.flying-cart {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    width: 28px;
    height: 28px;
}

.flying-cart svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 2;
}

@keyframes flyToCart {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    30% {
        opacity: 1;
        transform: scale(1.3) rotate(15deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }
}

/* Header icon animations when item is added */
.nav-btn.animate-heart svg {
    animation: heartPulse 0.6s ease-in-out;
    color: #c41e3a;
}

.nav-btn.animate-heart .badge {
    animation: heartBounce 0.5s ease-in-out;
}

.nav-btn.animate-cart svg {
    animation: cartBounce 0.6s ease-in-out;
}

.nav-btn.animate-cart .badge {
    animation: heartBounce 0.5s ease-in-out;
    background: #2e7d32 !important;
}

/* Success ripple effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(46, 125, 50, 0.3);
    animation: ripple 0.6s ease-out forwards;
    pointer-events: none;
}

/* ================================================================
   KRITISCHER FIX - MOBILE MENU AUF DESKTOP DEAKTIVIEREN
   Hinzugefügt am Ende der Datei
   ================================================================ */

@media (min-width: 992px) {
    .mobile-menu,
    #mobileMenu,
    #mobileMenuContainer,
    div.mobile-menu,
    [class*="mobile-menu"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        z-index: -9999 !important;
        transform: none !important;
    }
    
    .mobile-menu.active,
    #mobileMenu.active {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        left: -99999px !important;
        z-index: -9999 !important;
    }
}

@media (max-width: 991px) {
    .mobile-menu:not(.active) {
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

.sidebar:not(.active),
.sidebar-overlay:not(.active) {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* =====================================================================
   🔥 FINALE OVERRIDE CSS - ANS ENDE VON main.css EINFÜGEN 🔥
   Diese Regeln überschreiben ALLES mit maximaler Spezifität
   Datum: 28.01.2026
   ===================================================================== */

/* =====================================================================
   HEADER FIX - MAXIMALE SPEZIFITÄT
   ===================================================================== */

@media (min-width: 992px) {
    /* Header Container - KEINE Klicks */
    body header.header,
    html body header.header,
    body .header,
    html body .header,
    header.header.header {
        pointer-events: none !important;
        z-index: 1000 !important;
    }
    
    /* Announce - klickbar */
    body header.header .announce,
    body header.header .announce *,
    body .header .announce,
    body .header .announce *,
    html body .header .announce,
    html body .header .announce * {
        pointer-events: auto !important;
    }
    
    /* Nav - klickbar */
    body header.header .nav,
    body header.header .nav *,
    body .header .nav,
    body .header .nav *,
    html body .header .nav,
    html body .header .nav *,
    body .header .nav-inner,
    body .header .nav-inner *,
    body .header .logo,
    body .header .nav-menu,
    body .header .nav-menu *,
    body .header .nav-link,
    body .header .nav-right,
    body .header .nav-right *,
    body .header .nav-btn,
    body .header button.nav-btn {
        pointer-events: auto !important;
    }
    
    /* Profile Dropdown */
    body .header .profile-dropdown,
    body .header .profile-dropdown > button,
    html body .header .profile-dropdown {
        pointer-events: auto !important;
    }
    
    /* Profile Menu - NUR beim Hover */
    body .header .profile-menu,
    body header.header .profile-menu,
    html body .header .profile-menu {
        pointer-events: none !important;
        z-index: 1003 !important;
    }
    
    body .header .profile-dropdown:hover .profile-menu,
    body .header .profile-menu:hover,
    html body .header .profile-dropdown:hover .profile-menu {
        pointer-events: auto !important;
    }
    
    /* Mobile Menu WEG */
    .mobile-menu,
    #mobileMenu,
    #mobileMenuContainer > *,
    body .mobile-menu,
    body #mobileMenu,
    html body .mobile-menu,
    html body #mobileMenu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -99999px !important;
        z-index: -9999 !important;
    }
}

/* =====================================================================
   PRODUKTE FIX
   ===================================================================== */

/* Produktkarten */
body .pcard,
body article.pcard,
html body .pcard,
html body article.pcard {
    position: relative !important;
    pointer-events: auto !important;
    z-index: 1001 !important;
}

/* Alle Produkt-Elemente */
body .pcard *,
body .pcard a,
body .pcard-link,
body .pcard-img-wrap,
body .pcard-img-wrap *,
body .pcard-img,
body .pcard-info,
body article.pcard *,
body article.pcard a,
html body .pcard *,
html body article.pcard * {
    pointer-events: auto !important;
}

/* Shop Grid */
body .shop-grid,
body .shop-grid > *,
html body .shop-grid,
html body .shop-grid > *,
body .shop-grid > article {
    pointer-events: auto !important;
}

/* Wishlist Button */
body .pcard .pcard-wish,
body .pcard button.pcard-wish,
body article.pcard .pcard-wish,
html body .pcard .pcard-wish {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    width: 36px !important;
    height: 36px !important;
    background: #FFFCF7 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

/* Color Buttons */
body .pcard-color,
body button.pcard-color {
    pointer-events: auto !important;
}

/* =====================================================================
   SIDEBARS
   ===================================================================== */

body .sidebar:not(.active),
body .sidebar-overlay:not(.active) {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body .sidebar.active,
body .sidebar-overlay.active {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

/* =====================================================================
   ENDE - NICHT DARUNTER SCHREIBEN!
   ===================================================================== */
/* BADGE FIX - show class */
#wishBadge.show,
#cartBadge.show,

/* FINAL HERO TOUCH SCROLL FIX */
.hero, .hero-slider, .hero-slide, .hero-slide-image, .hero-overlay, .hero-content {
    touch-action: pan-y !important;
}
.hero-content {
    pointer-events: none !important;
}
.hero-content a,
.hero-content button,
.hero-buttons,
.hero-buttons a,
.hero-slider-dots,
.hero-slider-dot {
    pointer-events: auto !important;
}

/* ============================================
   FINAL HERO MOBILE SCROLL FIX
   ============================================ */
.hero,
.hero-slider,
.hero-slide,
.hero-slide-image,
.hero-overlay {
    touch-action: pan-y pan-x !important;
    -webkit-overflow-scrolling: touch !important;
}

.hero-content {
    pointer-events: none !important;
    touch-action: pan-y !important;
}

.hero-content a,
.hero-content button,
.hero-buttons,
.hero-buttons a,
.hero-buttons button,
.hero-slider-dots,
.hero-slider-dot,
.btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* Verhindere dass Hero den Scroll blockiert */
.hero {
    overscroll-behavior: auto !important;
}

html, body {
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* CRITICAL MOBILE SCROLL FIX */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
    }
    
    .hero {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    .hero, .hero *, .hero-slider, .hero-slide, .hero-slide-image, .hero-overlay, .hero-content {
        touch-action: pan-y !important;
    }
}