/* ==========================================================================
   RUNDHOLZ Erdtmann — Production Design System
   Organic Luxury · Swiss Precision · Living Interface
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Forest Green */
    --forest-950: #071410;
    --forest-900: #0E2518;
    --forest-800: #153623;
    --forest-700: #1C472E;
    --forest-600: #245A3B;
    --forest-500: #2E7049;
    --forest-400: #3E9462;
    --forest-300: #5AB87E;
    --forest-200: #89D4A4;
    --forest-100: #C0EACE;
    --forest-50: #E8F7ED;

    /* Amber / Gold */
    --amber-700: #7A5A1F;
    --amber-600: #92702A;
    --amber-500: #B8943F;
    --amber-400: #D4AD54;
    --amber-300: #E5C878;
    --amber-200: #F0DCA4;
    --amber-100: #F9F0D6;
    --amber-50: #FDFAF0;

    /* Neutral Warm */
    --stone-950: #171714;
    --stone-900: #1E1E1A;
    --stone-800: #2C2C26;
    --stone-700: #3E3E36;
    --stone-600: #56564D;
    --stone-500: #6F6F64;
    --stone-400: #8E8E83;
    --stone-300: #B3B3A8;
    --stone-200: #D2D2C9;
    --stone-100: #E8E8E2;
    --stone-50: #F5F5F1;

    /* Semantic */
    --success: #2D7A4A;
    --success-light: #E8F5EC;
    --danger: #B83A2E;
    --danger-light: #FCEAE8;
    --warning: #C4870A;
    --warning-light: #FEF5E0;
    --info: #2A6BC4;
    --info-light: #E4EEFA;

    /* Surfaces */
    --surface-page: #F7F6F2;
    --surface-card: #FFFFFF;
    --surface-sunken: #EEEDEA;
    --surface-overlay: rgba(7, 20, 16, 0.65);

    /* Typography */
    --ff-display: 'Fraunces', 'Georgia', serif;
    --ff-body: 'Figtree', system-ui, -apple-system, sans-serif;
    --ff-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing (4px base) */
    --s-0: 0;
    --s-1: 0.25rem;   /* 4 */
    --s-2: 0.5rem;    /* 8 */
    --s-3: 0.75rem;   /* 12 */
    --s-4: 1rem;      /* 16 */
    --s-5: 1.25rem;   /* 20 */
    --s-6: 1.5rem;    /* 24 */
    --s-8: 2rem;      /* 32 */
    --s-10: 2.5rem;   /* 40 */
    --s-12: 3rem;     /* 48 */
    --s-14: 3.5rem;   /* 56 */
    --s-16: 4rem;     /* 64 */
    --s-20: 5rem;     /* 80 */
    --s-24: 6rem;     /* 96 */
    --s-32: 8rem;     /* 128 */

    /* Radii */
    --r-xs: 3px;
    --r-sm: 5px;
    --r: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
    --shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
    --shadow-xl: 0 20px 48px rgba(0,0,0,.1);

    /* Timing */
    --ease: cubic-bezier(.16,1,.3,1);
    --ease-in: cubic-bezier(.55,0,1,.45);
    --ease-in-out: cubic-bezier(.65,0,.35,1);
    --dur-fast: 120ms;
    --dur: 200ms;
    --dur-slow: 350ms;
    --dur-slower: 500ms;

    /* Layout */
    --max-w: 1220px;
    --header-h: 68px;
    --nav-h: 44px;
}

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

html{
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-size-adjust:100%;
}

body{
    font-family:var(--ff-body);
    font-size:.9375rem;
    background:var(--surface-page);
    color:var(--stone-800);
    line-height:1.65;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    font-weight:400;
    letter-spacing:-.01em;
    overflow-x:hidden;
}

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

::selection{background:var(--forest-100);color:var(--forest-900)}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-display);
    font-weight:400;
    color:var(--stone-900);
    line-height:1.15;
    letter-spacing:-.02em;
}
h1{font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:var(--s-4)}
h2{font-size:clamp(1.4rem,3vw,2.125rem);margin-bottom:var(--s-3)}
h3{font-size:clamp(1.1rem,2.5vw,1.375rem);margin-bottom:var(--s-3)}
h4{font-size:1.125rem;margin-bottom:var(--s-2)}
p+p{margin-top:var(--s-4)}
small{font-size:.8125rem}

.section-label{
    font-family:var(--ff-body);
    font-size:.6875rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--forest-500);
    margin-bottom:var(--s-3);
    display:block;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);width:100%}

main{flex:1}

.grid{display:grid;gap:var(--s-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.section{padding:var(--s-16) 0}
.section--alt{background:var(--surface-sunken)}
.section--dark{background:var(--forest-800);color:white}

.page-header{margin-bottom:var(--s-8);padding-top:var(--s-10)}
.page-header h1{margin-bottom:var(--s-2)}
.page-header p{color:var(--stone-500);font-size:.9375rem;max-width:520px}

.section-header{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:var(--s-6);gap:var(--s-4);flex-wrap:wrap;
}
.section-header h2{margin-bottom:0}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    padding:.6rem 1.375rem;border-radius:var(--r-sm);
    font-family:var(--ff-body);font-size:.8125rem;font-weight:600;
    letter-spacing:.01em;border:1.5px solid transparent;cursor:pointer;
    transition:all var(--dur) var(--ease);text-align:center;line-height:1.4;white-space:nowrap;
    position:relative;
}
.btn:active:not(.btn--loading){transform:scale(.97)}

.btn-primary{background:var(--forest-700);color:#fff;border-color:var(--forest-700)}
.btn-primary:hover{background:var(--forest-800);border-color:var(--forest-800);color:#fff;box-shadow:var(--shadow-md)}

.btn-secondary{background:var(--amber-500);color:#fff;border-color:var(--amber-500)}
.btn-secondary:hover{background:var(--amber-600);border-color:var(--amber-600);color:#fff}

.btn-outline{background:transparent;border-color:var(--stone-300);color:var(--stone-700)}
.btn-outline:hover{border-color:var(--forest-600);color:var(--forest-700);background:var(--forest-50)}

.btn-ghost{background:transparent;border-color:transparent;color:var(--stone-600)}
.btn-ghost:hover{background:var(--stone-50);color:var(--stone-800)}

.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{opacity:.9;color:#fff}

.btn-white{background:#fff;color:var(--forest-800);border-color:#fff}
.btn-white:hover{background:var(--amber-100);border-color:var(--amber-100);color:var(--forest-900)}

.btn-outline-white{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}

.btn-sm{padding:.35rem .8rem;font-size:.75rem}
.btn-lg{padding:.8rem 2rem;font-size:.875rem}
.btn-block{display:flex;width:100%}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r-sm)}
.btn-icon.btn-sm{width:32px;height:32px}

/* Loading state */
.btn--loading{pointer-events:none;opacity:.7}
.btn--loading::after{
    content:'';width:14px;height:14px;border:2px solid currentColor;
    border-right-color:transparent;border-radius:50%;
    animation:spin .5s linear infinite;margin-left:var(--s-2);
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.form-group{margin-bottom:var(--s-5)}
.form-group label{
    display:block;margin-bottom:var(--s-2);font-weight:500;
    font-size:.8125rem;color:var(--stone-700);letter-spacing:.01em;
}

.form-control{
    width:100%;padding:.6rem .875rem;
    border:1.5px solid var(--stone-200);border-radius:var(--r-sm);
    font-family:var(--ff-body);font-size:.875rem;color:var(--stone-800);
    background:var(--surface-card);line-height:1.5;
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.form-control::placeholder{color:var(--stone-400)}
.form-control:focus{
    outline:none;border-color:var(--forest-500);
    box-shadow:0 0 0 3px rgba(46,112,73,.1);
}

select.form-control{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236F6F64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .875rem center;
    padding-right:2.5rem;
}
textarea.form-control{resize:vertical}

.checkbox-label{
    display:inline-flex;align-items:center;gap:var(--s-2);
    font-weight:400;font-size:.875rem;cursor:pointer;color:var(--stone-600);
}
.checkbox-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--forest-600)}

.form-row{display:flex;gap:var(--s-4)}
.form-row>*{flex:1}

.form-hint{font-size:.75rem;color:var(--stone-400);margin-top:var(--s-1)}

/* Password toggle */
.password-field{position:relative}
.password-field .form-control{padding-right:3rem}
.password-toggle{
    position:absolute;right:0;top:0;width:3rem;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;cursor:pointer;color:var(--stone-400);
    font-size:.875rem;transition:color var(--dur-fast) var(--ease);
}
.password-toggle:hover{color:var(--stone-700)}

/* Password strength hint */
.password-hint{
    display:flex;align-items:center;gap:var(--s-2);
    font-size:.7rem;color:var(--stone-400);margin-top:var(--s-2);
}
.password-hint i{font-size:.6rem}

/* Radio cards */
.radio-group{display:flex;flex-direction:column;gap:var(--s-3)}

.radio-card{
    display:flex;align-items:center;gap:var(--s-3);
    padding:var(--s-4);border:1.5px solid var(--stone-200);border-radius:var(--r);
    cursor:pointer;transition:all var(--dur-fast) var(--ease);
}
.radio-card:hover{border-color:var(--forest-300)}
.radio-card input[type="radio"]{accent-color:var(--forest-600);width:16px;height:16px}
.radio-card:has(input:checked){border-color:var(--forest-500);background:var(--forest-50)}
.radio-card-content{font-size:.875rem;font-weight:500}
.radio-card-desc{font-size:.75rem;color:var(--stone-500);font-weight:400}

/* Search input */
.search-box{position:relative}
.search-box .form-control{padding-left:2.5rem}
.search-box-icon{
    position:absolute;left:.875rem;top:50%;transform:translateY(-50%);
    color:var(--stone-400);font-size:.875rem;pointer-events:none;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.card{
    background:var(--surface-card);border-radius:var(--r-lg);
    border:1px solid var(--stone-100);overflow:hidden;
    transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--stone-200)}
.card-body{padding:var(--s-6)}
.card-body--lg{padding:var(--s-8)}

/* ==========================================================================
   8. TABLES
   ========================================================================== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:var(--s-3) var(--s-4);text-align:left;font-size:.875rem}
.table th{
    font-weight:600;color:var(--stone-500);font-size:.7rem;
    text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--stone-100);
}
.table td{border-bottom:1px solid var(--stone-100);color:var(--stone-700)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--dur-fast)}
.table tbody tr:hover{background:var(--stone-50)}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}

.table--detail th{
    text-transform:none;letter-spacing:normal;font-weight:600;
    color:var(--stone-500);font-size:.8125rem;width:40%;border-bottom:1px solid var(--stone-100);
}
.table--detail td{font-weight:500;color:var(--stone-800)}

/* ==========================================================================
   9. BADGES
   ========================================================================== */
.status-badge{
    display:inline-flex;align-items:center;padding:.2rem .65rem;
    border-radius:var(--r-full);font-size:.675rem;font-weight:600;letter-spacing:.02em;
}
.status-pending{background:var(--warning-light);color:var(--warning)}
.status-paid{background:var(--info-light);color:var(--info)}
.status-processing{background:var(--forest-50);color:var(--forest-600)}
.status-shipped{background:var(--info-light);color:var(--info)}
.status-delivered{background:var(--success-light);color:var(--success)}
.status-cancelled{background:var(--danger-light);color:var(--danger)}

.category-badge{
    display:inline-block;padding:.15rem .5rem;font-size:.6rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;
    color:var(--forest-600);background:var(--forest-50);border-radius:var(--r-xs);
}

.discount-badge{
    display:inline-flex;align-items:center;padding:.2rem .5rem;
    border-radius:var(--r-xs);font-size:.75rem;font-weight:700;background:var(--danger);color:#fff;
}

/* ==========================================================================
   10. TOAST NOTIFICATIONS (PHP Flasher style)
   ========================================================================== */
.toast-container{
    position:fixed;top:var(--s-6);right:var(--s-6);z-index:9999;
    display:flex;flex-direction:column;gap:var(--s-3);
    pointer-events:none;max-width:380px;width:100%;
}

.toast{
    display:flex;align-items:flex-start;gap:var(--s-3);
    padding:var(--s-4) var(--s-5);
    background:var(--surface-card);border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,.04);
    pointer-events:auto;position:relative;overflow:hidden;
    animation:toastIn var(--dur-slow) var(--ease) both;
}

.toast--dismissing{
    animation:toastOut var(--dur-slow) var(--ease) both;
}

.toast-icon{
    width:32px;height:32px;border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;
    font-size:.875rem;flex-shrink:0;
}

.toast-success .toast-icon{background:var(--success-light);color:var(--success)}
.toast-error .toast-icon,.toast-danger .toast-icon{background:var(--danger-light);color:var(--danger)}
.toast-warning .toast-icon{background:var(--warning-light);color:var(--warning)}
.toast-info .toast-icon{background:var(--info-light);color:var(--info)}

.toast-body{
    flex:1;font-size:.8125rem;font-weight:500;color:var(--stone-800);
    line-height:1.5;padding-top:var(--s-1);
}

.toast-close{
    background:none;border:none;color:var(--stone-400);cursor:pointer;
    font-size:1rem;padding:var(--s-1);transition:color var(--dur-fast);
    line-height:1;flex-shrink:0;
}
.toast-close:hover{color:var(--stone-700)}

.toast-progress{
    position:absolute;bottom:0;left:0;height:3px;
    border-radius:0 0 var(--r-lg) var(--r-lg);
    animation:toastProgress 5s linear both;
}

.toast-success .toast-progress{background:var(--success)}
.toast-error .toast-progress,.toast-danger .toast-progress{background:var(--danger)}
.toast-warning .toast-progress{background:var(--warning)}
.toast-info .toast-progress{background:var(--info)}

@keyframes toastIn{
    from{opacity:0;transform:translateX(100%)}
    to{opacity:1;transform:translateX(0)}
}
@keyframes toastOut{
    from{opacity:1;transform:translateX(0);max-height:200px;margin-bottom:var(--s-3)}
    to{opacity:0;transform:translateX(120%);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}
}
@keyframes toastProgress{
    from{width:100%}to{width:0}
}

/* ==========================================================================
   11. TURBO PROGRESS BAR
   ========================================================================== */
.turbo-progress-bar{
    height:3px!important;
    background:linear-gradient(90deg,var(--amber-400),var(--forest-400))!important;
}

/* Page loader */
.page-loader{
    position:fixed;inset:0;z-index:10000;background:var(--surface-page);
    display:flex;align-items:center;justify-content:center;
    transition:opacity var(--dur-slow);
}
.page-loader.hide{opacity:0;pointer-events:none}

.page-loader-spinner{
    width:32px;height:32px;border:3px solid var(--stone-200);
    border-top-color:var(--forest-600);border-radius:50%;animation:spin .6s linear infinite;
}

/* Skeleton loader */
.skeleton{
    background:linear-gradient(90deg,var(--stone-100) 25%,var(--stone-50) 50%,var(--stone-100) 75%);
    background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;
    border-radius:var(--r-sm);
}
.skeleton-text{height:14px;margin-bottom:var(--s-2);border-radius:var(--r-xs)}
.skeleton-text:last-child{width:60%}
.skeleton-img{aspect-ratio:4/3;border-radius:var(--r)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ==========================================================================
   12. HEADER
   ========================================================================== */
.header{
    background:var(--surface-card);position:sticky;top:0;z-index:100;
    border-bottom:1px solid var(--stone-100);
    backdrop-filter:blur(12px);background:rgba(255,255,255,.92);
}

.header-top{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-h);gap:var(--s-8);
}

.logo{
    display:flex;align-items:center;
}
.logo:hover{opacity:.85}
.logo-img{
    height:120px;width:auto;display:block;
}
.footer-logo-img{
    height:96px;width:auto;display:block;
}
.auth-logo-img{
    height:108px;width:auto;display:block;
}

.header-nav{display:flex;align-items:center;gap:var(--s-1)}
.header-nav a{
    display:inline-flex;align-items:center;gap:var(--s-2);
    color:var(--stone-600);font-size:.8125rem;font-weight:500;
    padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
    transition:all var(--dur-fast) var(--ease);
}
.header-nav a:hover{color:var(--forest-700);background:var(--stone-50)}

.cart-count{
    background:var(--forest-700);color:#fff;border-radius:var(--r-full);
    min-width:18px;height:18px;font-size:.6rem;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:var(--s-1);
}

.nav-bar{border-top:1px solid var(--stone-100);background:var(--surface-card)}
.nav-bar-inner{
    display:flex;gap:0;height:var(--nav-h);align-items:stretch;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nav-bar-inner::-webkit-scrollbar{display:none}
.nav-bar a{
    display:flex;align-items:center;color:var(--stone-500);white-space:nowrap;
    padding:0 var(--s-5);font-size:.8125rem;font-weight:500;
    position:relative;transition:color var(--dur-fast) var(--ease);
}
.nav-bar a::after{
    content:'';position:absolute;bottom:0;left:var(--s-5);right:var(--s-5);
    height:2px;background:var(--forest-600);transform:scaleX(0);
    transition:transform var(--dur) var(--ease);transform-origin:left;
}
.nav-bar a:hover{color:var(--stone-800)}
.nav-bar a:hover::after{transform:scaleX(1)}
.nav-bar a.active{color:var(--forest-700);font-weight:600}
.nav-bar a.active::after{transform:scaleX(1)}

/* Mobile */
.mobile-menu-toggle{
    display:none;background:none;border:1px solid var(--stone-200);
    border-radius:var(--r-sm);color:var(--stone-700);font-size:1.125rem;
    cursor:pointer;padding:var(--s-2);width:40px;height:40px;
    align-items:center;justify-content:center;transition:all var(--dur-fast) var(--ease);
}
.mobile-menu-toggle:hover{border-color:var(--forest-500);color:var(--forest-700)}

.mobile-menu-overlay{
    display:none;position:fixed;inset:0;background:var(--surface-overlay);
    z-index:200;backdrop-filter:blur(4px);opacity:0;transition:opacity var(--dur) var(--ease);
}
.mobile-menu-overlay.open{display:block;opacity:1}

.mobile-menu-panel{
    position:fixed;top:0;right:0;bottom:0;width:320px;max-width:85vw;
    background:var(--surface-card);z-index:201;padding:var(--s-8) var(--s-6);
    transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);
    overflow-y:auto;box-shadow:var(--shadow-xl);
}
.mobile-menu-panel.open{transform:translateX(0)}

.mobile-menu-close{
    background:none;border:none;color:var(--stone-400);font-size:1.25rem;
    cursor:pointer;margin-bottom:var(--s-8);padding:var(--s-2);transition:color var(--dur-fast);
}
.mobile-menu-close:hover{color:var(--stone-800)}

.mobile-menu-panel nav{display:flex;flex-direction:column;gap:var(--s-1)}
.mobile-menu-panel nav a{
    display:flex;align-items:center;gap:var(--s-3);color:var(--stone-700);
    padding:var(--s-3) var(--s-4);border-radius:var(--r);
    font-size:.9375rem;font-weight:500;transition:all var(--dur-fast) var(--ease);
}
.mobile-menu-panel nav a:hover{background:var(--stone-50);color:var(--forest-700)}
.mobile-menu-divider{height:1px;background:var(--stone-100);margin:var(--s-4) 0}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer{
    background:var(--stone-900);color:rgba(255,255,255,.55);
    padding:var(--s-16) 0 var(--s-8);margin-top:auto;
}
.footer-grid{
    display:grid;grid-template-columns:1.5fr repeat(4,1fr);
    gap:var(--s-12);margin-bottom:var(--s-12);
}
.footer h4{
    color:#fff;font-family:var(--ff-body);font-size:.675rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;margin-bottom:var(--s-5);
}
.footer-brand{
    font-family:var(--ff-display);font-size:1.35rem;color:#fff;
    margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-3);
}
.footer-description{font-size:.8125rem;line-height:1.7;max-width:280px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:var(--s-3)}
.footer a{color:rgba(255,255,255,.45);font-size:.8125rem;transition:color var(--dur-fast)}
.footer a:hover{color:#fff}
.footer ul li i{width:14px;margin-right:var(--s-2);font-size:.7rem;opacity:.5}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.06);padding-top:var(--s-8);
    text-align:center;font-size:.75rem;color:rgba(255,255,255,.3);
    display:flex;justify-content:center;align-items:center;gap:var(--s-4);flex-wrap:wrap;
}
.footer-legal-links{display:inline-flex;gap:var(--s-4);margin-left:var(--s-2)}
.footer-legal-links a{color:rgba(255,255,255,.35);font-size:.75rem;text-decoration:none}
.footer-legal-links a:hover{color:#fff}

/* ==========================================================================
   14. HERO SECTION (100vw full-bleed)
   ========================================================================== */
.hero{
    position:relative;min-height:520px;width:100vw;margin-left:calc(-50vw + 50%);
    display:flex;align-items:center;justify-content:center;
    text-align:center;padding:var(--s-24) var(--s-6);overflow:hidden;
    background:var(--forest-800);
}

.hero--home{
    background:var(--forest-800) url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}

.hero::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 15% 40%,rgba(62,148,98,.2) 0%,transparent 55%),
        radial-gradient(ellipse at 85% 25%,rgba(184,148,63,.12) 0%,transparent 45%),
        radial-gradient(ellipse at 50% 90%,rgba(21,54,35,.4) 0%,transparent 55%);
}
.hero::after{
    content:'';position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0M-15 15L15-15M45 75L75 45' stroke='rgba(255,255,255,.025)' stroke-width='1'/%3E%3C/svg%3E");
    background-size:60px 60px;
}

.hero-inner{position:relative;z-index:1;max-width:680px;width:100%}
.hero-inner .section-label{color:var(--amber-300)}

.hero-title{
    color:#fff;font-size:clamp(2.25rem,5.5vw,3.75rem);
    margin-bottom:var(--s-6);line-height:1.1;font-weight:400;
}
.hero-highlight{color:var(--amber-300)}

.hero-subtitle{
    font-size:clamp(.875rem,1.5vw,1.0625rem);color:rgba(255,255,255,.65);
    margin-bottom:var(--s-10);line-height:1.85;font-weight:300;
}

.hero-cta{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}

.hero-stats{
    display:flex;gap:var(--s-12);justify-content:center;
    margin-top:var(--s-12);padding-top:var(--s-8);
    border-top:1px solid rgba(255,255,255,.1);
}
.hero-stat-number{
    font-family:var(--ff-display);font-size:1.75rem;color:#fff;display:block;
    line-height:1.2;margin-bottom:var(--s-1);
}
.hero-stat-label{font-size:.75rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em}

/* ==========================================================================
   15. TRUST BADGES
   ========================================================================== */
.trust-section{
    display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-8);
    padding:var(--s-10) 0;border-bottom:1px solid var(--stone-100);
}

.trust-badge{display:flex;align-items:flex-start;gap:var(--s-4)}
.trust-badge-icon{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:var(--r-md);
    background:var(--forest-50);color:var(--forest-600);font-size:1.125rem;flex-shrink:0;
    transition:all var(--dur) var(--ease);
}
.trust-badge:hover .trust-badge-icon{
    background:var(--forest-600);color:#fff;transform:scale(1.05);
}
.trust-badge-text strong{display:block;font-size:.8125rem;font-weight:600;color:var(--stone-800);margin-bottom:2px}
.trust-badge-text span{font-size:.75rem;color:var(--stone-400);line-height:1.5}

/* ==========================================================================
   16. CATEGORY SHOWCASE (Homepage)
   ========================================================================== */
.category-showcase{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);
}

.category-card{
    position:relative;border-radius:var(--r-xl);overflow:hidden;
    aspect-ratio:3/4;cursor:pointer;
    background:var(--forest-800);
}

.category-card-bg{
    position:absolute;inset:0;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    transition:transform var(--dur-slower) var(--ease);
}

.category-card:hover .category-card-bg{transform:scale(1.08)}

.category-card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 60%,transparent 100%);
    z-index:1;
}

.category-card-content{
    position:absolute;bottom:0;left:0;right:0;padding:var(--s-8);z-index:2;
    transform:translateY(8px);transition:transform var(--dur-slow) var(--ease);
}
.category-card:hover .category-card-content{transform:translateY(0)}

.category-card-icon{
    width:40px;height:40px;border-radius:var(--r);
    background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1rem;margin-bottom:var(--s-4);
}

.category-card h3{
    font-family:var(--ff-display);font-size:1.5rem;color:#fff;margin-bottom:var(--s-2);
}

.category-card p{
    font-size:.8125rem;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:var(--s-4);
}

.category-card-link{
    font-size:.8125rem;font-weight:600;color:var(--amber-300);
    display:inline-flex;align-items:center;gap:var(--s-2);
    opacity:0;transform:translateY(8px);
    transition:all var(--dur-slow) var(--ease);
}
.category-card:hover .category-card-link{opacity:1;transform:translateY(0)}
.category-card-link:hover{color:var(--amber-200)}

/* ==========================================================================
   17. USP / WHY US SECTION
   ========================================================================== */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}

.usp-card{
    padding:var(--s-8);border-radius:var(--r-lg);
    background:var(--surface-card);border:1px solid var(--stone-100);
    transition:all var(--dur) var(--ease);
}
.usp-card:hover{
    box-shadow:var(--shadow-lg);border-color:var(--stone-200);transform:translateY(-4px);
}

.usp-card-icon{
    width:48px;height:48px;border-radius:var(--r-md);
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;margin-bottom:var(--s-5);
}
.usp-card-icon--green{background:var(--forest-50);color:var(--forest-600)}
.usp-card-icon--amber{background:var(--amber-100);color:var(--amber-600)}
.usp-card-icon--stone{background:var(--stone-50);color:var(--stone-600)}

.usp-card h3{font-family:var(--ff-body);font-size:.9375rem;font-weight:700;margin-bottom:var(--s-2)}
.usp-card p{font-size:.8125rem;color:var(--stone-500);line-height:1.7}

/* ==========================================================================
   18. CTA BANNER
   ========================================================================== */
.cta-banner{
    width:100vw;margin-left:calc(-50vw + 50%);
    background:var(--forest-800);position:relative;overflow:hidden;
}
.cta-banner::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 80% 50%,rgba(184,148,63,.1) 0%,transparent 60%);
}
.cta-banner-inner{
    position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;
    padding:var(--s-16) var(--s-6);
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--s-8);flex-wrap:wrap;
}
.cta-banner h2{color:#fff;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:var(--s-2)}
.cta-banner p{color:rgba(255,255,255,.6);font-size:.9375rem;max-width:480px}

/* ==========================================================================
   19. STATS SECTION
   ========================================================================== */
.stats-bar{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:var(--s-6);padding:var(--s-10) 0;text-align:center;
    border-top:1px solid var(--stone-100);border-bottom:1px solid var(--stone-100);
}
.stat-number{
    font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.25rem);
    color:var(--forest-700);display:block;margin-bottom:var(--s-1);line-height:1.2;
}
.stat-label{font-size:.75rem;color:var(--stone-400);text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* ==========================================================================
   20. PRODUCT CARD
   ========================================================================== */
.product-card{
    display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
    background:var(--surface-card);border:1px solid var(--stone-100);
    transition:all var(--dur) var(--ease);
}
.product-card:hover{box-shadow:var(--shadow-lg);border-color:var(--stone-200)}

.product-card .card-img{
    aspect-ratio:4/3;overflow:hidden;background:var(--surface-sunken);
    display:flex;align-items:center;justify-content:center;position:relative;
}
.product-card .card-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform var(--dur-slower) var(--ease);
}
.product-card:hover .card-img img{transform:scale(1.05)}
.product-card .card-img .placeholder-icon{font-size:2.5rem;color:var(--stone-300)}

.product-card .card-body{
    flex:1;display:flex;flex-direction:column;padding:var(--s-5);
}
.product-card .category-badge{margin-bottom:var(--s-3);align-self:flex-start}

.product-card h3{
    font-family:var(--ff-body);font-size:.875rem;font-weight:600;
    margin-bottom:var(--s-3);line-height:1.4;
}
.product-card h3 a{color:var(--stone-800)}
.product-card h3 a:hover{color:var(--forest-700)}

.product-card .price{font-size:1.0625rem;font-weight:700;color:var(--forest-700);margin-top:auto}
.product-card .price-old{
    text-decoration:line-through;color:var(--stone-400);
    font-size:.8125rem;font-weight:400;margin-right:var(--s-2);
}
.product-card .price-range{font-size:.8125rem;font-weight:400;color:var(--stone-500)}
.product-card-excerpt{font-size:.8125rem;color:var(--stone-500);margin-top:var(--s-2);line-height:1.6}

/* Product card hover overlay */
.product-card .card-img::after{
    content:'Ansehen';
    position:absolute;bottom:var(--s-3);left:50%;transform:translateX(-50%) translateY(8px);
    background:var(--forest-700);color:#fff;font-size:.75rem;font-weight:600;
    padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
    opacity:0;transition:all var(--dur) var(--ease);pointer-events:none;
}
.product-card:hover .card-img::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   21. PRODUCT DETAIL PAGE
   ========================================================================== */
.breadcrumbs{
    font-size:.8125rem;margin-bottom:var(--s-8);color:var(--stone-400);
    display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
    padding-top:var(--s-10);
}
.breadcrumbs a{color:var(--stone-500)}
.breadcrumbs a:hover{color:var(--forest-600)}
.breadcrumb-separator{color:var(--stone-300);font-size:.6rem}
.breadcrumbs-current{color:var(--stone-700);font-weight:500}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:start}

.product-gallery-main{
    aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
    background:var(--surface-sunken);border-radius:var(--r-lg);overflow:hidden;
    border:1px solid var(--stone-100);
}
.product-gallery-main img{width:100%;height:100%;object-fit:cover}
.product-gallery-placeholder{font-size:4rem;color:var(--stone-300)}

.product-gallery-thumbs{
    display:flex;gap:var(--s-3);margin-top:var(--s-3);overflow-x:auto;padding-bottom:var(--s-1);
}
.product-gallery-thumb{
    width:72px;height:72px;border-radius:var(--r);overflow:hidden;
    border:2px solid transparent;cursor:pointer;flex-shrink:0;
    background:var(--surface-sunken);transition:border-color var(--dur-fast) var(--ease);
}
.product-gallery-thumb:hover,.product-gallery-thumb.active{border-color:var(--forest-600)}
.product-gallery-thumb img{width:100%;height:100%;object-fit:cover}

.product-info{padding-top:var(--s-2)}
.product-info .category-badge{margin-bottom:var(--s-4)}
.product-info h1{font-size:clamp(1.375rem,3vw,2rem);margin-bottom:var(--s-6)}

.product-price-section{margin-bottom:var(--s-6);padding-bottom:var(--s-6);border-bottom:1px solid var(--stone-100)}
.product-price-row{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.product-price-value{font-family:var(--ff-body);font-size:1.75rem;font-weight:700;color:var(--forest-700);letter-spacing:-.02em}
.product-price-old{font-size:1rem;text-decoration:line-through;color:var(--stone-400);font-weight:400}
.product-tax-note{font-size:.75rem;color:var(--stone-400);margin-top:var(--s-2)}

.product-stock{display:inline-flex;align-items:center;gap:var(--s-2);font-size:.8125rem;font-weight:600;margin-bottom:var(--s-6)}
.product-stock-dot{width:8px;height:8px;border-radius:var(--r-full);display:inline-block}
.product-stock--instock .product-stock-dot{background:var(--success)}
.product-stock--instock{color:var(--success)}
.product-stock--outofstock .product-stock-dot{background:var(--danger)}
.product-stock--outofstock{color:var(--danger)}

.product-variant-group{margin-bottom:var(--s-6)}

.quantity-selector{
    display:inline-flex;align-items:center;border:1.5px solid var(--stone-200);
    border-radius:var(--r-sm);overflow:hidden;
}
.quantity-selector button{
    width:40px;height:40px;border:none;background:transparent;font-size:1rem;
    cursor:pointer;color:var(--stone-600);display:flex;align-items:center;
    justify-content:center;transition:all var(--dur-fast) var(--ease);
}
.quantity-selector button:hover{background:var(--stone-50);color:var(--stone-800)}
.quantity-selector input{
    width:52px;height:40px;border:none;
    border-left:1.5px solid var(--stone-200);border-right:1.5px solid var(--stone-200);
    text-align:center;font-family:var(--ff-body);font-size:.875rem;font-weight:600;
    appearance:textfield;-moz-appearance:textfield;background:#fff;color:var(--stone-800);
}
.quantity-selector input::-webkit-inner-spin-button,
.quantity-selector input::-webkit-outer-spin-button{-webkit-appearance:none}

.product-actions{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-6);flex-wrap:wrap}

.product-wishlist-link{
    display:inline-flex;align-items:center;gap:var(--s-2);
    font-size:.8125rem;color:var(--stone-500);margin-bottom:var(--s-6);transition:color var(--dur-fast);
}
.product-wishlist-link:hover{color:var(--danger)}

.product-sku{font-size:.75rem;color:var(--stone-400);margin-bottom:var(--s-6);font-family:var(--ff-mono)}

.product-delivery-info{
    border:1px solid var(--stone-100);border-radius:var(--r-lg);padding:var(--s-5);background:var(--stone-50);
}
.product-delivery-item{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-3) 0}
.product-delivery-item:not(:last-child){border-bottom:1px solid var(--stone-200)}
.product-delivery-item i{color:var(--forest-500);margin-top:2px;width:18px;text-align:center;font-size:.875rem}
.product-delivery-item strong{display:block;font-size:.8125rem;font-weight:600;color:var(--stone-800)}
.product-delivery-item span{font-size:.75rem;color:var(--stone-500)}

.product-tabs{margin-top:var(--s-16);padding-top:var(--s-10)}
.tab-nav{display:flex;gap:0;border-bottom:1px solid var(--stone-200);margin-bottom:var(--s-8)}
.tab-button{
    padding:var(--s-4) var(--s-6);font-family:var(--ff-body);font-size:.8125rem;
    font-weight:600;background:none;border:none;cursor:pointer;color:var(--stone-400);
    border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:all var(--dur-fast) var(--ease);letter-spacing:.01em;
}
.tab-button:hover{color:var(--stone-700)}
.tab-button.active{color:var(--forest-700);border-bottom-color:var(--forest-600)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn var(--dur-slow) var(--ease)}
.tab-panel p{margin-bottom:var(--s-4);color:var(--stone-600);line-height:1.75;font-size:.9375rem}
.tab-panel h3{font-family:var(--ff-body);font-weight:700;font-size:1rem;margin-top:var(--s-6);margin-bottom:var(--s-3);color:var(--stone-800)}
.tab-panel h3:first-child{margin-top:0}

/* Description structured content */
.tab-panel .benefits-list{margin:var(--s-4) 0;padding:0}
.tab-panel .benefits-list dt{font-weight:700;color:var(--stone-800);font-size:.9375rem;margin-top:var(--s-4);padding-left:var(--s-3);border-left:3px solid var(--forest-500)}
.tab-panel .benefits-list dt:first-child{margin-top:0}
.tab-panel .benefits-list dd{margin:var(--s-1) 0 0 var(--s-3);padding-left:var(--s-3);color:var(--stone-600);line-height:1.75;font-size:.9375rem}
.tab-panel ul{margin:var(--s-3) 0;padding-left:var(--s-6);list-style:disc}
.tab-panel ul li{color:var(--stone-600);line-height:1.75;font-size:.9375rem;margin-bottom:var(--s-1)}
.tab-panel .table--detail{margin:var(--s-3) 0}

.related-products{margin-top:var(--s-16);padding-top:var(--s-10);border-top:1px solid var(--stone-100)}

/* ==========================================================================
   22. CATALOGUE PAGE
   ========================================================================== */
.catalogue-toolbar{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--s-6);gap:var(--s-4);flex-wrap:wrap;
    padding:var(--s-4) var(--s-5);background:var(--surface-card);
    border-radius:var(--r-lg);border:1px solid var(--stone-100);
}

.catalogue-filters-row{
    display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;
}

.filter-pills{
    display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-6);
}
.filter-pill{
    display:inline-flex;align-items:center;gap:var(--s-2);
    padding:var(--s-2) var(--s-4);border-radius:var(--r-full);
    font-size:.8125rem;font-weight:500;
    background:var(--surface-card);border:1.5px solid var(--stone-200);
    color:var(--stone-600);transition:all var(--dur-fast) var(--ease);
    cursor:pointer;text-decoration:none;
}
.filter-pill:hover{border-color:var(--forest-400);color:var(--forest-700)}
.filter-pill.active{
    background:var(--forest-700);border-color:var(--forest-700);color:#fff;
}
.filter-pill.active:hover{background:var(--forest-800);border-color:var(--forest-800);color:#fff}

.catalogue-results-count{
    font-size:.8125rem;color:var(--stone-400);margin-bottom:var(--s-6);
}

.search-input{width:220px}
.sort-select{width:auto;min-width:150px}

.empty-state{text-align:center;padding:var(--s-16) 0}
.empty-state-icon{
    display:flex;align-items:center;justify-content:center;
    width:64px;height:64px;border-radius:var(--r-full);background:var(--stone-50);
    margin:0 auto var(--s-5);color:var(--stone-400);font-size:1.5rem;
}

/* Filter toggle button badge */
.catalogue-filter-toggle{position:relative}
.filter-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;border-radius:var(--r-full);
    background:var(--forest-600);color:#fff;font-size:.625rem;font-weight:700;
    padding:0 5px;margin-left:var(--s-1);
}

/* Active filter tags */
.active-filters{
    display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
    margin-bottom:var(--s-4);
}
.active-filters-label{
    font-size:.75rem;font-weight:600;color:var(--stone-500);
    display:flex;align-items:center;gap:var(--s-1);
}
.filter-tag{
    display:inline-flex;align-items:center;gap:var(--s-1);
    padding:var(--s-1) var(--s-3);border-radius:var(--r-full);
    font-size:.75rem;font-weight:500;
    background:var(--forest-50);border:1px solid var(--forest-200);color:var(--forest-700);
}
.filter-tag i{font-size:.625rem;opacity:.6}
.filter-tag-remove{
    display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;border-radius:var(--r-full);
    color:var(--forest-600);transition:all var(--dur-fast) var(--ease);
    text-decoration:none;margin-left:2px;
}
.filter-tag-remove:hover{background:var(--forest-200);color:var(--forest-800)}
.filter-tag-remove i{font-size:.5rem}
.filter-tag-clear{
    background:var(--stone-100);border-color:var(--stone-200);color:var(--stone-600);
    text-decoration:none;cursor:pointer;
}
.filter-tag-clear:hover{background:var(--stone-200);color:var(--stone-700)}

/* Filter panel (collapsible) */
.filter-panel{
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .35s var(--ease),opacity .25s var(--ease),margin .25s var(--ease);
    margin-bottom:0;
}
.filter-panel.open{
    max-height:400px;opacity:1;margin-bottom:var(--s-6);
}
.filter-panel-form{
    padding:var(--s-5);background:var(--surface-card);
    border:1px solid var(--stone-100);border-radius:var(--r-lg);
}
.filter-panel-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--s-5);margin-bottom:var(--s-5);
}
.filter-group{}
.filter-group-label{
    display:flex;align-items:center;gap:var(--s-2);
    font-size:.75rem;font-weight:600;color:var(--stone-500);
    text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s-2);
}
.filter-group-label i{font-size:.7rem;color:var(--forest-500)}
.filter-range{
    display:flex;align-items:center;gap:var(--s-2);
}
.filter-range-sep{color:var(--stone-300);font-weight:600}
.form-control-sm{
    padding:var(--s-2) var(--s-3);font-size:.8125rem;
    border:1.5px solid var(--stone-200);border-radius:var(--r);
    background:var(--surface-card);color:var(--stone-800);
    transition:border-color var(--dur-fast) var(--ease);
}
.form-control-sm:focus{border-color:var(--forest-400);outline:none;box-shadow:0 0 0 3px rgba(28,71,46,.1)}
.filter-panel-actions{
    display:flex;gap:var(--s-3);align-items:center;
    padding-top:var(--s-4);border-top:1px solid var(--stone-100);
}

/* ==========================================================================
   23. CART PAGE
   ========================================================================== */
/* Step indicator */
.steps{
    display:flex;align-items:center;justify-content:center;gap:var(--s-2);
    margin-bottom:var(--s-10);padding-top:var(--s-6);
}
.step{
    display:flex;align-items:center;gap:var(--s-2);font-size:.75rem;font-weight:600;
    color:var(--stone-400);text-transform:uppercase;letter-spacing:.06em;
}
.step-number{
    width:28px;height:28px;border-radius:var(--r-full);
    display:flex;align-items:center;justify-content:center;font-size:.7rem;
    border:2px solid var(--stone-200);color:var(--stone-400);background:var(--surface-card);
    transition:all var(--dur) var(--ease);
}
.step.active .step-number{background:var(--forest-700);border-color:var(--forest-700);color:#fff}
.step.active{color:var(--forest-700)}
.step.done .step-number{background:var(--forest-50);border-color:var(--forest-500);color:var(--forest-600)}
.step.done{color:var(--forest-600)}
.step-connector{width:40px;height:2px;background:var(--stone-200);border-radius:1px}
.step-connector.done{background:var(--forest-400)}

/* Cart items */
.cart-item{
    display:grid;grid-template-columns:80px 1fr auto auto auto;align-items:center;
    gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--stone-100);
}
.cart-item:last-child{border-bottom:none}
.cart-item-img{
    width:80px;height:80px;border-radius:var(--r);overflow:hidden;
    background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-img .placeholder-icon{font-size:1.5rem;color:var(--stone-300)}
.cart-item-info{min-width:0}
.cart-item-name{font-weight:600;color:var(--stone-800);font-size:.9375rem;margin-bottom:var(--s-1)}
.cart-item-variant{font-size:.75rem;color:var(--stone-400)}
.cart-item-price{font-size:.9375rem;color:var(--stone-600);white-space:nowrap}
.cart-item-total{font-size:1rem;font-weight:700;color:var(--stone-800);white-space:nowrap;min-width:80px;text-align:right}
.cart-item-qty{display:flex;align-items:center;gap:0}
.btn-qty{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border:1px solid var(--stone-300);background:var(--stone-50);
    font-size:1.1rem;font-weight:700;color:var(--stone-600);cursor:pointer;
    transition:background var(--dur-fast),color var(--dur-fast);user-select:none;line-height:1;
}
.btn-qty:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);border-right:none}
.btn-qty:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:none}
.btn-qty:hover{background:var(--stone-200);color:var(--stone-800)}
.cart-quantity-input{width:52px;text-align:center;font-weight:600;border-radius:0;border-left:none;border-right:none;-moz-appearance:textfield}
.cart-quantity-input::-webkit-inner-spin-button,.cart-quantity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.cart-item-remove{
    color:var(--stone-400);font-size:.875rem;transition:color var(--dur-fast);
    background:none;border:none;cursor:pointer;padding:var(--s-2);
}
.cart-item-remove:hover{color:var(--danger)}

.cart-summary-section{
    background:var(--stone-50);border-radius:var(--r-lg);padding:var(--s-6);margin-top:var(--s-6);
}
.cart-summary-row{display:flex;justify-content:space-between;align-items:center;padding:var(--s-2) 0;font-size:.875rem;color:var(--stone-600)}
.cart-summary-total{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:var(--s-4);margin-top:var(--s-3);border-top:2px solid var(--stone-800);
}
.cart-total-label{font-weight:700;font-size:1rem;color:var(--stone-900)}
.cart-total-value{font-weight:700;font-size:1.375rem;color:var(--forest-700);font-family:var(--ff-body)}

.cart-actions{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:var(--s-8);flex-wrap:wrap;gap:var(--s-4);
}
.cart-promo{margin-top:var(--s-6)}
.cart-promo-form{display:flex;gap:var(--s-3);align-items:center}
.cart-promo-form .form-control{max-width:240px}
.cart-trust{
    display:flex;gap:var(--s-8);justify-content:center;padding:var(--s-8) 0;
    margin-top:var(--s-8);border-top:1px solid var(--stone-100);
}
.cart-trust-item{display:flex;align-items:center;gap:var(--s-2);font-size:.75rem;color:var(--stone-400)}
.cart-trust-item i{color:var(--forest-500);font-size:.875rem}

.cart-empty{text-align:center;padding:var(--s-16) 0}
.cart-empty-icon{
    display:flex;align-items:center;justify-content:center;
    width:80px;height:80px;border-radius:var(--r-full);
    background:var(--stone-50);color:var(--stone-300);font-size:2rem;
    margin:0 auto var(--s-6);
}

/* ==========================================================================
   24. CHECKOUT PAGE
   ========================================================================== */
.checkout-grid{gap:var(--s-8)}
.checkout-section-title{
    font-family:var(--ff-body);font-size:.9375rem;font-weight:700;margin-bottom:var(--s-5);color:var(--stone-800);
    display:flex;align-items:center;gap:var(--s-3);
}
.checkout-section-title i{
    width:32px;height:32px;border-radius:var(--r);
    background:var(--forest-50);color:var(--forest-600);font-size:.75rem;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.checkout-summary-sticky{position:sticky;top:calc(var(--header-h) + var(--nav-h) + var(--s-6))}

.checkout-total-section{border-top:1px solid var(--stone-200);padding-top:var(--s-4);margin-top:var(--s-4)}
.checkout-total-row{display:flex;justify-content:space-between;align-items:center;padding:var(--s-2) 0;font-size:.875rem;color:var(--stone-600)}
.checkout-grand-total{padding-top:var(--s-3);margin-top:var(--s-2);border-top:2px solid var(--stone-800);font-weight:700;color:var(--stone-900);font-size:1rem}
.checkout-grand-total-value{font-size:1.25rem;color:var(--forest-700)}
.checkout-terms{font-size:.75rem;color:var(--stone-400);text-align:center;margin-top:var(--s-4);line-height:1.6}
.checkout-secure{
    display:flex;align-items:center;justify-content:center;gap:var(--s-2);
    font-size:.7rem;color:var(--stone-400);margin-top:var(--s-3);
}
.checkout-secure i{color:var(--success)}

.checkout-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--stone-100)}
.checkout-item:last-child{border-bottom:none}
.checkout-item-qty{
    width:24px;height:24px;border-radius:var(--r-xs);background:var(--stone-50);
    display:flex;align-items:center;justify-content:center;
    font-size:.65rem;font-weight:700;color:var(--stone-500);flex-shrink:0;
}
.checkout-item-details{flex:1;min-width:0}
.checkout-item-name{font-size:.8125rem;font-weight:500;color:var(--stone-700)}
.checkout-item-meta{font-size:.75rem;color:var(--stone-400)}
.checkout-item-price{font-size:.875rem;font-weight:600;color:var(--stone-800);white-space:nowrap}

/* Payment method cards enhanced */
.radio-card-icon{
    width:36px;height:36px;border-radius:var(--r);
    background:var(--stone-50);display:flex;align-items:center;justify-content:center;
    font-size:.875rem;color:var(--stone-500);flex-shrink:0;
    transition:all var(--dur-fast) var(--ease);
}
.radio-card:has(input:checked) .radio-card-icon{background:var(--forest-50);color:var(--forest-600)}

/* ── Payment Section ── */
.radio-card--payment{
    display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4);
    cursor:pointer;transition:all var(--dur-fast) var(--ease);
}
.radio-card--payment .radio-card-body{flex:1;min-width:0}
.radio-card--payment .radio-card-logos{
    display:flex;gap:6px;margin-top:var(--s-2);flex-wrap:wrap;
}
.radio-card--payment .radio-card-logos svg{width:36px;height:24px;border-radius:3px;flex-shrink:0}

/* Shipping method cards */
.radio-card--shipping{
    display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);
    cursor:pointer;transition:all var(--dur-fast) var(--ease);
}
.radio-card--shipping .radio-card-body{flex:1;min-width:0}
.shipping-price{
    font-size:.9375rem;font-weight:700;color:var(--stone-800);
    white-space:nowrap;padding-left:var(--s-3);
}
.shipping-price--free{color:var(--success)}

.radio-card--disabled{
    opacity:.45;pointer-events:none;background:var(--stone-50);border-color:var(--stone-200);
}
.radio-card--disabled .radio-card-icon{background:var(--stone-100);color:var(--stone-400)}

/* Payment brand icons bar */
.payment-brands{
    display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-4);
    padding-bottom:var(--s-4);border-bottom:1px solid var(--stone-100);
}
.payment-brand{
    width:48px;height:32px;flex-shrink:0;
    transition:opacity .25s var(--ease),filter .25s var(--ease),transform .25s var(--ease);
    border-radius:4px;overflow:hidden;
}
.payment-brand svg{width:100%;height:100%;display:block}
.payment-brand--dimmed{opacity:.2;filter:grayscale(100%)}
.payment-brand--active{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Card form (expandable) */
.payment-card-form{
    overflow:hidden;transition:max-height .35s var(--ease),opacity .3s var(--ease);
    border-top:1px solid var(--stone-100);margin-top:var(--s-2);
}
.payment-card-form-inner{padding:var(--s-4) var(--s-2) var(--s-2)}
.payment-card-form .form-control--card{letter-spacing:.08em;font-family:'Courier New',monospace}
.payment-card-form .btn-block{width:100%;margin-top:var(--s-2)}
.payment-card-secure{
    display:flex;align-items:center;gap:var(--s-2);justify-content:center;
    font-size:.75rem;color:var(--stone-400);margin-top:var(--s-3);
}
.payment-card-secure i{color:var(--success);font-size:.625rem}

.payment-card-error{
    font-size:.75rem;color:#DC2626;margin-top:var(--s-1);line-height:1.5;
    padding:var(--s-2) var(--s-3);background:#FEF2F2;border-radius:var(--r);
    border:1px solid #FECACA;
}
.form-control--error{border-color:#DC2626 !important;box-shadow:0 0 0 3px rgba(220,38,38,.1)}

.input-icon-wrapper{position:relative}
.input-icon-right{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    color:var(--stone-400);font-size:.75rem;pointer-events:none;
}
.input-icon-hint{pointer-events:auto;cursor:help}

/* Payment shake animation */
@keyframes paymentShake{
    0%,100%{transform:translateX(0)}
    20%,60%{transform:translateX(-6px)}
    40%,80%{transform:translateX(6px)}
}
.payment-shake{animation:paymentShake .4s var(--ease)}

/* Payment processing overlay */
.payment-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.payment-overlay.active{opacity:1;pointer-events:auto}
.payment-loader{
    background:white;border-radius:var(--r-lg);padding:var(--s-8) var(--s-10);
    text-align:center;max-width:380px;width:90%;box-shadow:0 25px 60px rgba(0,0,0,.3);
}
.payment-loader-spinner{margin:0 auto var(--s-6);width:56px;height:56px;color:var(--forest-600)}
.payment-loader-spinner svg{width:100%;height:100%;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.payment-loader-steps{display:flex;flex-direction:column;gap:var(--s-3);text-align:left}
.payment-loader-step{
    font-size:.8125rem;color:var(--stone-300);display:flex;align-items:center;gap:var(--s-2);
    transition:color .3s var(--ease);
}
.payment-loader-step.active{color:var(--stone-700);font-weight:500}
.payment-loader-step i{width:16px;text-align:center}

/* Error modal */
.payment-modal-backdrop{
    position:fixed;inset:0;z-index:10000;
    background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.payment-modal-backdrop.active{opacity:1;pointer-events:auto}
.payment-modal{
    background:white;border-radius:var(--r-lg);padding:var(--s-8);
    max-width:440px;width:90%;text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.3);
    transform:scale(.92);transition:transform .3s var(--ease);
}
.payment-modal-backdrop.active .payment-modal{transform:scale(1)}
.payment-modal-icon{
    width:64px;height:64px;border-radius:var(--r-full);
    background:#FEE2E2;color:#DC2626;font-size:1.75rem;
    display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-4);
}
.payment-modal-title{font-size:1.125rem;font-weight:700;color:var(--stone-900);margin-bottom:var(--s-2)}
.payment-modal-text{font-size:.8125rem;color:var(--stone-500);margin-bottom:var(--s-3);line-height:1.6}
.payment-modal-reasons{
    list-style:none;padding:0;margin:0 0 var(--s-4);text-align:left;
    background:var(--stone-50);border-radius:var(--r);padding:var(--s-3);
}
.payment-modal-reasons li{
    font-size:.8125rem;color:var(--stone-600);padding:var(--s-2) 0;
    display:flex;align-items:center;gap:var(--s-2);
    border-bottom:1px solid var(--stone-100);
}
.payment-modal-reasons li:last-child{border-bottom:none}
.payment-modal-reasons li i{color:#DC2626;font-size:.75rem;flex-shrink:0}
.payment-modal-hint{font-size:.8125rem;color:var(--stone-500);margin-bottom:var(--s-3)}
.payment-modal-ref{
    font-size:.6875rem;color:var(--stone-400);font-family:monospace;
    margin-bottom:var(--s-4);
}
.payment-modal .btn-block{width:100%}
.payment-modal .btn-lg{padding:var(--s-3) var(--s-6);font-size:.9375rem}

/* Disabled card notice */
.payment-disabled-notice{
    display:flex;align-items:flex-start;gap:var(--s-3);
    padding:var(--s-4);background:#FEF3C7;border:1px solid #F59E0B;
    border-radius:var(--r);margin-top:var(--s-3);
}
.payment-disabled-notice i{color:#D97706;font-size:1.125rem;margin-top:2px;flex-shrink:0}
.payment-disabled-notice strong{display:block;font-size:.8125rem;color:#92400E;margin-bottom:2px}
.payment-disabled-notice span{font-size:.75rem;color:#A16207;line-height:1.5}

/* Confirmation */
.confirmation-page{text-align:center;padding:var(--s-12) 0;max-width:640px;margin:0 auto}
.confirmation-header{margin-bottom:var(--s-10)}
.confirmation-icon{
    width:72px;height:72px;border-radius:var(--r-full);background:var(--success-light);
    color:var(--success);font-size:2rem;display:flex;align-items:center;
    justify-content:center;margin:0 auto var(--s-6);
    animation:scaleIn var(--dur-slow) var(--ease) both;
}
.confirmation-icon::after{
    content:'';position:absolute;width:88px;height:88px;border-radius:var(--r-full);
    border:2px solid var(--success-light);animation:confirmPulse 2s var(--ease) both;
}
@keyframes confirmPulse{
    0%{transform:scale(.8);opacity:1}
    100%{transform:scale(1.3);opacity:0}
}
.confirmation-ref{font-size:.9375rem;color:var(--stone-500);margin-bottom:var(--s-4)}
.confirmation-ref strong{color:var(--forest-700);font-family:var(--ff-mono);font-size:.875rem}

.confirmation-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);text-align:left;margin-bottom:var(--s-8)}
.confirmation-details{text-align:left}
.confirmation-bank-info{
    background:var(--amber-50);padding:var(--s-5);border-radius:var(--r);margin-top:var(--s-6);
    border:1px solid var(--amber-200);
}
.confirmation-bank-info h4{font-family:var(--ff-body);font-weight:700;font-size:.875rem;margin-bottom:var(--s-2);color:var(--amber-700)}
.confirmation-next-steps{
    background:var(--stone-50);border-radius:var(--r-lg);padding:var(--s-6);text-align:left;margin-bottom:var(--s-8);
    border:1px solid var(--stone-100);
}
.confirmation-next-steps h3{font-family:var(--ff-body);font-weight:700;font-size:.9375rem;margin-bottom:var(--s-4)}
.confirmation-step{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-4)}
.confirmation-step:last-child{margin-bottom:0}
.confirmation-step-num{
    width:28px;height:28px;border-radius:var(--r-full);
    background:var(--forest-50);color:var(--forest-600);font-size:.7rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.confirmation-step p{font-size:.8125rem;color:var(--stone-600);line-height:1.6}
.confirmation-step strong{color:var(--stone-800);display:block;font-size:.8125rem;margin-bottom:2px}
.confirmation-actions{display:flex;gap:var(--s-4);justify-content:center;margin-top:var(--s-10)}

/* ==========================================================================
   25. AUTH PAGES — Split Layout
   ========================================================================== */
.auth-split{
    display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--header-h) - var(--nav-h));
    width:100vw;margin-left:calc(-50vw + 50%);
}
.auth-visual{
    position:relative;overflow:hidden;
    background:var(--forest-800) url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?auto=format&fit=crop&w=960&q=80') center/cover no-repeat;
    display:flex;align-items:flex-end;padding:var(--s-12);
}
.auth-visual::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,rgba(7,20,16,.85) 0%,rgba(7,20,16,.3) 50%,rgba(7,20,16,.15) 100%);
}
.auth-visual-content{position:relative;z-index:1;max-width:400px}
.auth-visual-content h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--s-4);line-height:1.2}
.auth-visual-content p{color:rgba(255,255,255,.6);font-size:.875rem;line-height:1.7;margin-bottom:var(--s-6)}
.auth-visual-features{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.auth-visual-features li{
    display:flex;align-items:center;gap:var(--s-3);color:rgba(255,255,255,.7);font-size:.8125rem;
}
.auth-visual-features li i{color:var(--amber-300);width:16px;text-align:center}

.auth-form-side{
    display:flex;align-items:center;justify-content:center;padding:var(--s-12) var(--s-8);
    background:var(--surface-page);
}
.auth-form-inner{width:100%;max-width:400px}
.auth-brand{
    display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-10);
    font-family:var(--ff-display);font-size:1.25rem;color:var(--stone-900);
}
.auth-brand{justify-content:flex-start}
.auth-title{font-size:1.75rem;margin-bottom:var(--s-2)}
.auth-subtitle{font-size:.875rem;color:var(--stone-500);margin-bottom:var(--s-8)}
.auth-divider{
    display:flex;align-items:center;gap:var(--s-4);margin:var(--s-6) 0;
    font-size:.75rem;color:var(--stone-400);text-transform:uppercase;letter-spacing:.08em;
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--stone-200)}
.auth-footer{font-size:.8125rem;text-align:center;margin-top:var(--s-8);color:var(--stone-500)}
.auth-footer a{font-weight:600}
.auth-trust{
    display:flex;gap:var(--s-6);justify-content:center;margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--stone-100);
}
.auth-trust-item{font-size:.7rem;color:var(--stone-400);display:flex;align-items:center;gap:var(--s-2)}
.auth-trust-item i{color:var(--forest-500)}

/* ==========================================================================
   26. CONTACT PAGE
   ========================================================================== */
.contact-wrapper{max-width:960px;margin:0 auto}
.contact-info-item{
    display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-5);
    padding:var(--s-4);border-radius:var(--r);transition:background var(--dur-fast);
}
.contact-info-item:hover{background:var(--stone-50)}
.contact-info-icon{
    width:36px;height:36px;border-radius:var(--r);
    background:var(--forest-50);color:var(--forest-600);font-size:.8rem;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-info-label{font-weight:600;font-size:.8125rem;color:var(--stone-700);margin-bottom:2px}
.contact-info-value{font-size:.875rem;color:var(--stone-500)}
.contact-info-value a{color:var(--stone-500)}
.contact-info-value a:hover{color:var(--forest-600)}
.contact-hours{margin-top:var(--s-4)}
.contact-hours-row{display:flex;justify-content:space-between;padding:var(--s-3) var(--s-4);font-size:.8125rem;border-bottom:1px solid var(--stone-100);border-radius:var(--r-xs)}
.contact-hours-row:last-child{border-bottom:none}
.contact-hours-row:hover{background:var(--stone-50)}
.contact-hours-row span{color:var(--stone-500)}
.contact-hours-row strong{color:var(--stone-800);font-weight:600}
.contact-map{
    border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;
    background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;
    color:var(--stone-300);font-size:2rem;border:1px solid var(--stone-100);margin-bottom:var(--s-6);
}
.contact-faq{margin-top:var(--s-10)}
.faq-item{border-bottom:1px solid var(--stone-100);padding:var(--s-4) 0}
.faq-item:first-child{border-top:1px solid var(--stone-100)}
.faq-question{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
    font-weight:600;font-size:.9375rem;color:var(--stone-800);cursor:pointer;
    background:none;border:none;width:100%;text-align:left;padding:var(--s-2) 0;
    font-family:var(--ff-body);transition:color var(--dur-fast);
}
.faq-question:hover{color:var(--forest-700)}
.faq-question i{font-size:.75rem;color:var(--stone-400);transition:transform var(--dur) var(--ease)}
.faq-item.open .faq-question i{transform:rotate(180deg)}
.faq-answer{display:none;padding:var(--s-2) 0 var(--s-4);font-size:.875rem;color:var(--stone-500);line-height:1.7}
.faq-item.open .faq-answer{display:block}

/* ==========================================================================
   27. ACCOUNT PAGES
   ========================================================================== */
.account-header{
    display:flex;align-items:center;gap:var(--s-6);padding-top:var(--s-10);margin-bottom:var(--s-8);
}
.account-avatar{
    width:56px;height:56px;border-radius:var(--r-full);
    background:var(--forest-700);color:#fff;font-size:1.25rem;font-weight:600;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-family:var(--ff-display);
}
.account-header-text{min-width:0}
.account-header-text h1{margin-bottom:var(--s-1);font-size:clamp(1.4rem,3vw,2rem)}
.account-header-text p{color:var(--stone-500);font-size:.875rem;margin-bottom:0}

.account-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-bottom:var(--s-8);
}
.account-stat{
    background:var(--surface-card);border:1px solid var(--stone-100);border-radius:var(--r-lg);
    padding:var(--s-5);text-align:center;transition:all var(--dur) var(--ease);
}
.account-stat:hover{box-shadow:var(--shadow-md);border-color:var(--stone-200)}
.account-stat-icon{
    width:36px;height:36px;border-radius:var(--r);margin:0 auto var(--s-3);
    display:flex;align-items:center;justify-content:center;font-size:.875rem;
}
.account-stat-icon--green{background:var(--forest-50);color:var(--forest-600)}
.account-stat-icon--amber{background:var(--amber-100);color:var(--amber-600)}
.account-stat-icon--info{background:var(--info-light);color:var(--info)}
.account-stat-icon--stone{background:var(--stone-50);color:var(--stone-600)}
.account-stat-value{font-family:var(--ff-display);font-size:1.5rem;color:var(--stone-900);display:block;line-height:1.2;margin-bottom:2px}
.account-stat-label{font-size:.7rem;color:var(--stone-400);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

.account-quick-links{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.account-quick-links li{margin-bottom:0}
.account-quick-links a{
    display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);
    border-radius:var(--r);color:var(--stone-600);font-size:.8125rem;
    font-weight:500;transition:all var(--dur-fast) var(--ease);
    border:1px solid var(--stone-100);background:var(--surface-card);
}
.account-quick-links a:hover{background:var(--forest-50);color:var(--forest-700);border-color:var(--forest-200)}
.account-quick-links a i{
    width:32px;height:32px;border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;
    background:var(--stone-50);font-size:.75rem;
    transition:all var(--dur-fast) var(--ease);
}
.account-quick-links a:hover i{background:var(--forest-100);color:var(--forest-700)}
.account-section-title{
    font-family:var(--ff-body);font-size:1rem;font-weight:700;
    margin-bottom:var(--s-5);color:var(--stone-800);
    display:flex;align-items:center;gap:var(--s-3);
}

/* Order cards (account list) */
.order-card{
    display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
    gap:var(--s-5);padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--stone-100);
    transition:background var(--dur-fast);
}
.order-card:last-child{border-bottom:none}
.order-card:hover{background:var(--stone-50)}
.order-card-ref{font-weight:600;font-size:.9375rem;color:var(--stone-800)}
.order-card-date{font-size:.8125rem;color:var(--stone-400)}

/* Order detail timeline */
.timeline-entry{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-4) 0;position:relative}
.timeline-entry:not(:last-child){border-bottom:none;padding-bottom:var(--s-4)}
.timeline-entry:not(:last-child)::before{
    content:'';position:absolute;left:11px;top:36px;bottom:0;width:2px;
    background:var(--stone-100);
}
.timeline-dot{
    width:24px;height:24px;border-radius:var(--r-full);
    border:2px solid var(--stone-200);background:var(--surface-card);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:.5rem;z-index:1;
}
.timeline-entry:first-child .timeline-dot{border-color:var(--forest-500);background:var(--forest-50);color:var(--forest-600)}
.timeline-date{font-size:.75rem;color:var(--stone-400);white-space:nowrap}
.timeline-comment{font-size:.8125rem;color:var(--stone-500);margin-top:var(--s-1)}

/* Order progress */
.order-progress{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-8);padding:var(--s-6);background:var(--surface-card);border:1px solid var(--stone-100);border-radius:var(--r-lg)}
.order-progress-step{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);flex:1;position:relative}
.order-progress-dot{
    width:32px;height:32px;border-radius:var(--r-full);
    border:2px solid var(--stone-200);background:var(--surface-card);
    display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--stone-400);
    z-index:1;transition:all var(--dur) var(--ease);
}
.order-progress-step.done .order-progress-dot{background:var(--success-light);border-color:var(--success);color:var(--success)}
.order-progress-step.active .order-progress-dot{background:var(--forest-700);border-color:var(--forest-700);color:#fff}
.order-progress-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--stone-400)}
.order-progress-step.done .order-progress-label{color:var(--success)}
.order-progress-step.active .order-progress-label{color:var(--forest-700)}
.order-progress-line{
    position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;
    background:var(--stone-200);
}
.order-progress-step.done .order-progress-line{background:var(--success)}

/* ==========================================================================
   28. WISHLIST & ERROR
   ========================================================================== */
.wishlist-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-4)}
.wishlist-count{font-size:.875rem;color:var(--stone-400);font-weight:500}
.wishlist-card-actions{
    display:flex;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--stone-100);
}
.wishlist-card-actions .btn{flex:1}
.wishlist-empty{text-align:center;padding:var(--s-16) 0}
.wishlist-empty-icon{
    display:flex;align-items:center;justify-content:center;
    width:80px;height:80px;border-radius:var(--r-full);
    background:var(--danger-light);color:var(--danger);font-size:2rem;
    margin:0 auto var(--s-6);opacity:.6;
}

.error-page{text-align:center;padding:var(--s-16) 0;max-width:480px;margin:0 auto}
.error-illustration{
    width:120px;height:120px;border-radius:var(--r-full);
    background:linear-gradient(135deg,var(--forest-50) 0%,var(--amber-50) 100%);
    display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-6);
    position:relative;
}
.error-code{
    font-family:var(--ff-display);font-size:5rem;font-weight:400;
    background:linear-gradient(135deg,var(--forest-700),var(--amber-500));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;line-height:1;margin-bottom:var(--s-4);letter-spacing:-.04em;
}
.error-actions{display:flex;gap:var(--s-4);justify-content:center;margin-top:var(--s-8);flex-wrap:wrap}

/* ==========================================================================
   28b. ABOUT / ÜBER UNS PAGE
   ========================================================================== */
.hero--small{min-height:320px;display:flex;align-items:center;justify-content:center}
.hero--small .hero-title{font-size:2.5rem}

.about-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center;
}
.about-grid--reverse{direction:rtl}
.about-grid--reverse > *{direction:ltr}

.about-content h2{
    font-family:var(--ff-display);font-size:1.75rem;color:var(--stone-900);margin-bottom:var(--s-6);
}
.about-content p{
    font-size:1rem;line-height:1.8;color:var(--stone-600);margin-bottom:var(--s-4);
}

.about-image{border-radius:var(--r-xl);overflow:hidden}
.about-image img{
    width:100%;height:400px;object-fit:cover;display:block;
    border-radius:var(--r-xl);
}

.about-products{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);
}
.about-product-card{
    background:var(--surface-card);border:1px solid var(--stone-100);
    border-radius:var(--r-xl);padding:var(--s-8);text-align:center;
    transition:all var(--dur) var(--ease);
}
.about-product-card:hover{
    border-color:var(--forest-200);box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}
.about-product-icon{
    width:56px;height:56px;border-radius:var(--r-lg);
    background:var(--forest-50);color:var(--forest-600);
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;margin:0 auto var(--s-5);
}
.about-product-card h3{
    font-family:var(--ff-display);font-size:1.25rem;color:var(--stone-900);margin-bottom:var(--s-3);
}
.about-product-card p{
    font-size:.875rem;line-height:1.6;color:var(--stone-500);margin-bottom:var(--s-6);
}

.about-contact-list{display:flex;flex-direction:column;gap:var(--s-5);margin-top:var(--s-6)}
.about-contact-item{
    display:flex;align-items:flex-start;gap:var(--s-4);
}
.about-contact-item > i{
    width:40px;height:40px;border-radius:var(--r);
    background:var(--forest-50);color:var(--forest-600);
    display:flex;align-items:center;justify-content:center;
    font-size:.875rem;flex-shrink:0;
}
.about-contact-item strong{display:block;font-size:.875rem;color:var(--stone-900);margin-bottom:2px}
.about-contact-item span{font-size:.875rem;color:var(--stone-500)}
.about-contact-item a{color:var(--forest-600);text-decoration:none}
.about-contact-item a:hover{color:var(--forest-400);text-decoration:underline}

/* ==========================================================================
   28c. BEWERTUNGEN / REVIEWS PAGE
   ========================================================================== */
.reviews-page{max-width:960px;margin:0 auto}

.reviews-header{
    text-align:center;padding:var(--s-10) 0 var(--s-8);
}
.reviews-header h1{
    font-family:var(--ff-display);font-size:2rem;color:var(--stone-900);margin-bottom:var(--s-2);
}
.reviews-header p{font-size:1rem;color:var(--stone-500)}

.reviews-summary{
    background:var(--surface-card);border:1px solid var(--stone-100);
    border-radius:var(--r-xl);padding:var(--s-8);
    display:flex;gap:var(--s-10);align-items:center;margin-bottom:var(--s-8);
}
.reviews-summary-score{
    text-align:center;flex-shrink:0;min-width:140px;
}
.reviews-summary-number{
    font-family:var(--ff-display);font-size:3.5rem;font-weight:700;
    color:var(--stone-900);line-height:1;
}
.reviews-summary-label{
    font-size:.875rem;color:var(--stone-500);margin-top:var(--s-2);
}
.reviews-summary-stars{
    display:flex;gap:2px;justify-content:center;margin-top:var(--s-3);
}
.reviews-summary-stars .star{color:var(--amber-400);font-size:1.25rem}
.reviews-summary-stars .star--empty{color:var(--stone-200)}

.reviews-summary-bars{flex:1}
.reviews-bar-row{
    display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2);
}
.reviews-bar-label{
    font-size:.8125rem;font-weight:600;color:var(--stone-600);
    width:60px;text-align:right;flex-shrink:0;
}
.reviews-bar-track{
    flex:1;height:8px;background:var(--stone-100);border-radius:var(--r-full);
    overflow:hidden;
}
.reviews-bar-fill{
    height:100%;background:var(--amber-400);border-radius:var(--r-full);
    transition:width var(--dur-slower) var(--ease);
}
.reviews-bar-count{
    font-size:.75rem;color:var(--stone-400);width:36px;flex-shrink:0;
}

.reviews-meta{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--s-4) 0;border-bottom:1px solid var(--stone-100);
    margin-bottom:var(--s-6);flex-wrap:wrap;gap:var(--s-3);
}
.reviews-meta-info{font-size:.875rem;color:var(--stone-500)}
.reviews-meta-info strong{color:var(--stone-700)}
.reviews-meta-badge{
    display:inline-flex;align-items:center;gap:var(--s-2);
    font-size:.75rem;font-weight:600;color:var(--success);
    background:var(--success-light);padding:var(--s-1) var(--s-3);
    border-radius:var(--r-full);
}

.reviews-list{display:flex;flex-direction:column;gap:var(--s-5)}

.review-card{
    background:var(--surface-card);border:1px solid var(--stone-100);
    border-radius:var(--r-lg);padding:var(--s-6);
    transition:border-color var(--dur) var(--ease);
}
.review-card:hover{border-color:var(--stone-200)}

.review-card-header{
    display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:var(--s-3);flex-wrap:wrap;gap:var(--s-2);
}
.review-card-author{
    display:flex;align-items:center;gap:var(--s-3);
}
.review-card-avatar{
    width:40px;height:40px;border-radius:var(--r-full);
    background:var(--forest-50);color:var(--forest-600);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.875rem;flex-shrink:0;
}
.review-card-name{font-size:.9375rem;font-weight:600;color:var(--stone-900)}
.review-card-date{font-size:.75rem;color:var(--stone-400);margin-top:2px}

.review-card-stars{display:flex;gap:1px}
.review-card-stars .star{color:var(--amber-400);font-size:.875rem}
.review-card-stars .star--empty{color:var(--stone-200)}

.review-card-text{
    font-size:.9375rem;line-height:1.7;color:var(--stone-600);
}
.review-card-product{
    display:inline-flex;align-items:center;gap:var(--s-2);
    font-size:.75rem;color:var(--stone-400);margin-top:var(--s-3);
    background:var(--surface-sunken);padding:var(--s-1) var(--s-3);
    border-radius:var(--r-sm);
}

.reviews-pagination{
    display:flex;gap:var(--s-2);justify-content:center;
    margin-top:var(--s-10);padding-bottom:var(--s-10);
}

@media(max-width:768px){
    .about-grid{grid-template-columns:1fr;gap:var(--s-8)}
    .about-grid--reverse{direction:ltr}
    .about-image img{height:280px}
    .about-products{grid-template-columns:1fr}
    .reviews-summary{flex-direction:column;text-align:center}
    .reviews-bar-row{gap:var(--s-2)}
    .hero--small .hero-title{font-size:1.75rem}
}

/* ==========================================================================
   29. PAGINATION
   ========================================================================== */
.pagination{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-10);flex-wrap:wrap}
.pagination a,.pagination span{
    display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;
    padding:0 var(--s-3);border:1px solid var(--stone-200);border-radius:var(--r-sm);
    font-size:.8125rem;font-weight:500;color:var(--stone-600);transition:all var(--dur-fast) var(--ease);
}
.pagination a:hover{border-color:var(--forest-600);color:var(--forest-700);background:var(--forest-50)}
.pagination .active{background:var(--forest-700);color:#fff;border-color:var(--forest-700)}

/* ==========================================================================
   30. BACK TO TOP
   ========================================================================== */
/* ── WhatsApp Floating Button ── */
.whatsapp-float{
    position:fixed;bottom:var(--s-8);right:var(--s-8);z-index:100;
    width:56px;height:56px;border-radius:var(--r-full);
    background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(37,211,102,.4);
    transition:all var(--dur) var(--ease);
    text-decoration:none;
}
.whatsapp-float:hover{
    background:#1DA851;transform:scale(1.08);
    box-shadow:0 6px 20px rgba(37,211,102,.55);
}
.whatsapp-float svg{display:block}

/* ── WhatsApp Product Button ── */
.btn-whatsapp{
    display:inline-flex;align-items:center;justify-content:center;
    background:#25D366;color:#fff;border:none;border-radius:var(--r-md);
    padding:var(--s-3) var(--s-6);font-size:.875rem;font-weight:600;
    cursor:pointer;transition:all var(--dur) var(--ease);
    text-decoration:none;margin-top:var(--s-3);
}
.btn-whatsapp:hover{background:#1DA851;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,211,102,.35)}

.back-to-top{
    position:fixed;bottom:calc(var(--s-8) + 68px);right:var(--s-8);z-index:90;
    width:44px;height:44px;border-radius:var(--r-full);
    background:var(--forest-700);color:#fff;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lg);font-size:1rem;
    opacity:0;transform:translateY(16px);pointer-events:none;
    transition:all var(--dur) var(--ease);
}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--forest-800);transform:translateY(-2px);box-shadow:var(--shadow-xl)}

/* ==========================================================================
   31. ANIMATIONS
   ========================================================================== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slower) var(--ease),transform var(--dur-slower) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.05s}
.reveal-delay-2{transition-delay:.1s}
.reveal-delay-3{transition-delay:.15s}
.reveal-delay-4{transition-delay:.2s}
.reveal-delay-5{transition-delay:.25s}
.reveal-delay-6{transition-delay:.3s}
.reveal-delay-7{transition-delay:.35s}
.reveal-delay-8{transition-delay:.4s}

.fade-in{animation:fadeInUp var(--dur-slower) var(--ease) both}

/* Lazy image reveal */
.img-lazy{opacity:0;transition:opacity var(--dur-slow) var(--ease)}
.img-lazy.loaded{opacity:1}

/* ==========================================================================
   32. UTILITIES
   ========================================================================== */
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--stone-400)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-primary{color:var(--forest-700)}

.mb-0{margin-bottom:0}
.mb-1{margin-bottom:var(--s-2)}
.mb-2{margin-bottom:var(--s-4)}
.mb-3{margin-bottom:var(--s-6)}
.mb-4{margin-bottom:var(--s-8)}
.mb-5{margin-bottom:var(--s-10)}
.mt-1{margin-top:var(--s-2)}
.mt-2{margin-top:var(--s-4)}
.mt-4{margin-top:var(--s-8)}

.d-flex{display:flex}
.gap-1{gap:var(--s-2)}
.gap-2{gap:var(--s-4)}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}

/* Flash messages (inline, non-toast) */
.flash{padding:var(--s-3) var(--s-4);border-radius:var(--r);font-size:.8125rem;font-weight:500;line-height:1.5}
.flash-danger{background:var(--danger-light);color:var(--danger);border:1px solid rgba(184,58,46,.15)}
.flash-success{background:var(--success-light);color:var(--success);border:1px solid rgba(45,122,74,.15)}
.flash-warning{background:var(--warning-light);color:var(--warning);border:1px solid rgba(196,135,10,.15)}
.flash-info{background:var(--info-light);color:var(--info);border:1px solid rgba(42,107,196,.15)}

/* Field-level validation errors */
.field-error{color:#DC2626;font-size:.8rem;font-weight:500;margin-top:4px;display:flex;align-items:center;gap:5px}
.field-error i{font-size:.7rem;flex-shrink:0}
.has-error label{color:#DC2626}

/* Alert banners */
.alert{padding:var(--s-3) var(--s-4);border-radius:var(--r);font-size:.875rem;font-weight:500;line-height:1.5;display:flex;align-items:center;gap:8px}
.alert-error{background:#FEF2F2;color:#DC2626;border:1px solid rgba(220,38,38,.15)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--forest-700);color:#fff;padding:var(--s-3) var(--s-5);border-radius:0 0 var(--radius-lg) var(--radius-lg);z-index:10000;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}
.divider{height:1px;background:var(--stone-100);margin:var(--s-6) 0}
.hide-mobile{display:inline-flex}

/* ==========================================================================
   34. LEGAL PAGES
   ========================================================================== */
.legal-page{max-width:860px;margin:0 auto var(--s-12)}
.legal-page .card-body--lg{padding:var(--s-8) var(--s-10)}
.legal-page h2{
    font-family:var(--ff-display);font-size:1.35rem;font-weight:700;
    color:var(--stone-900);margin:var(--s-8) 0 var(--s-4);
    padding-bottom:var(--s-3);border-bottom:1px solid var(--stone-100);
}
.legal-page h2:first-child{margin-top:0}
.legal-page h3{
    font-size:1.05rem;font-weight:600;color:var(--stone-800);
    margin:var(--s-6) 0 var(--s-3);
}
.legal-page p{
    font-size:.9375rem;line-height:1.8;color:var(--stone-600);
    margin-bottom:var(--s-4);
}
.legal-page ul{
    list-style:disc;padding-left:var(--s-6);margin-bottom:var(--s-4);
}
.legal-page ul li{
    font-size:.9375rem;line-height:1.7;color:var(--stone-600);
    margin-bottom:var(--s-2);
}
.legal-page a{color:var(--forest-600);text-decoration:underline}
.legal-page a:hover{color:var(--forest-400)}
.legal-page strong{color:var(--stone-700)}

/* Reviews page extras */
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);margin-bottom:var(--s-8)}
.reviews-stars{font-size:2rem;color:var(--amber-400);margin-bottom:var(--s-3)}
.reviews-average{font-family:var(--ff-display);font-size:1.5rem;font-weight:700;color:var(--stone-900);margin-bottom:var(--s-2)}
.reviews-count{font-size:.875rem;color:var(--stone-500)}
.review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-3)}
.review-stars{display:flex;gap:1px;color:var(--amber-400);font-size:.875rem}
.review-date{font-size:.75rem;color:var(--stone-400)}
.review-title{font-size:1rem;font-weight:600;color:var(--stone-900);margin-bottom:var(--s-2)}
.review-text{font-size:.9375rem;line-height:1.7;color:var(--stone-600);margin-bottom:var(--s-3)}
.review-author{font-size:.8125rem;color:var(--stone-500)}
.review-product{display:inline-block;font-size:.75rem;color:var(--stone-400);background:var(--surface-sunken);padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);margin-top:var(--s-2)}
.reviews-cta h2{font-family:var(--ff-display);font-size:1.25rem;color:var(--stone-900);margin-bottom:var(--s-3)}
.reviews-cta p{font-size:.9375rem;color:var(--stone-500);margin-bottom:var(--s-5)}

/* ==========================================================================
   33. RESPONSIVE
   ========================================================================== */
@media(max-width:1024px){
    .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:var(--s-8)}
    .category-showcase{gap:var(--s-4)}
}

@media(max-width:900px){
    .nav-bar a{padding:0 var(--s-3);font-size:.75rem}
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .product-detail{grid-template-columns:1fr;gap:var(--s-8)}
    .trust-section{grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
    .category-showcase{grid-template-columns:1fr;gap:var(--s-4)}
    .category-card{aspect-ratio:2/1}
    .usp-grid{grid-template-columns:1fr;gap:var(--s-4)}
    .hero-stats{gap:var(--s-6);flex-wrap:wrap}
    .stats-bar{grid-template-columns:repeat(2,1fr)}
    .account-stats{grid-template-columns:repeat(2,1fr)}
    .order-progress{flex-wrap:wrap;gap:var(--s-4)}
    .order-progress-line{display:none}
    .auth-split{grid-template-columns:1fr}
    .auth-visual{display:none}
    .cart-item{grid-template-columns:60px 1fr auto auto;gap:var(--s-3)}
    .cart-item-price{display:none}
}

@media(max-width:768px){
    :root{--header-h:60px}
    .container{padding:0 var(--s-4)}
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
    .header-nav .hide-mobile{display:none}
    .mobile-menu-toggle{display:flex}
    .nav-bar{display:none}
    .hero{min-height:420px;padding:var(--s-16) var(--s-4)}
    .trust-section{grid-template-columns:1fr 1fr;gap:var(--s-4);padding:var(--s-6) 0}
    .checkout-grid{grid-template-columns:1fr}
    .checkout-summary-sticky{position:static}
    .search-input{width:150px}
    .contact-wrapper{max-width:100%}
    .footer-grid{grid-template-columns:1fr;gap:var(--s-6)}
    .legal-page .card-body--lg{padding:var(--s-6) var(--s-4)}
    .reviews-grid{grid-template-columns:1fr}
    .footer-legal-links{display:flex;justify-content:center;margin-left:0;margin-top:var(--s-2)}
    .cta-banner-inner{flex-direction:column;text-align:center;padding:var(--s-10) var(--s-4)}
    .catalogue-toolbar{flex-direction:column;align-items:stretch}
    .filter-panel-grid{grid-template-columns:1fr 1fr}
    .toast-container{right:var(--s-4);left:var(--s-4);max-width:none}
    .account-quick-links{grid-template-columns:1fr}
    .confirmation-grid{grid-template-columns:1fr}
    .cart-trust{flex-wrap:wrap;gap:var(--s-4)}
    .steps{gap:var(--s-1)}
    .step span:not(.step-number){display:none}
    .step-connector{width:20px}
}

@media(max-width:480px){
    .grid-3,.grid-4{grid-template-columns:1fr}
    .trust-section{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;gap:var(--s-2)}
    .footer-legal-links{margin-left:0}
    .hero{min-height:auto;padding:var(--s-12) var(--s-4)}
    .hero-title{font-size:1.75rem}
    .hero-cta{flex-direction:column}
    .hero-cta .btn{width:100%}
    .hero-stats{flex-direction:column;gap:var(--s-6)}
    .cart-actions{flex-direction:column}
    .cart-item{grid-template-columns:1fr;gap:var(--s-3);text-align:center}
    .cart-item-img{margin:0 auto}
    .confirmation-actions{flex-direction:column}
    .error-actions{flex-direction:column}
    .tab-nav{overflow-x:auto}
    .tab-button{padding:var(--s-3) var(--s-4);font-size:.75rem;white-space:nowrap}
    .product-actions{flex-direction:column}
    .product-actions .btn{width:100%}
    .catalogue-filters-row{width:100%}
    .search-input{width:100%;flex:1}
    .form-row{flex-direction:column;gap:0}
    .filter-pills{gap:var(--s-1)}
    .filter-panel-grid{grid-template-columns:1fr}
    .active-filters{gap:var(--s-1)}
    .stats-bar{grid-template-columns:1fr 1fr}
    .logo-img{height:96px}
    .whatsapp-float{right:var(--s-4);bottom:var(--s-4);width:50px;height:50px}
    .whatsapp-float svg{width:24px;height:24px}
    .back-to-top{right:var(--s-4);bottom:calc(var(--s-4) + 60px)}
    .account-stats{grid-template-columns:1fr 1fr}
    .auth-trust{flex-direction:column;align-items:center;gap:var(--s-3)}
    .order-card{grid-template-columns:1fr;gap:var(--s-2);text-align:center}
}

/* ==========================================================================
   PROMO BAR — Sliding Top Banner
   ========================================================================== */
.promo-bar {
    position: relative;
    background: linear-gradient(135deg, var(--forest-800), var(--forest-700));
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    height: 40px;
    display: flex;
    align-items: center;
    z-index: 1100;
    border-bottom: 2px solid var(--amber-400);
}

.promo-bar-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    will-change: transform;
    height: 100%;
}

.promo-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0.03em;
    text-transform: none;
}

.promo-bar-item i {
    color: var(--amber-400);
    font-size: 0.75rem;
}

.promo-bar-separator {
    color: var(--amber-400);
    font-size: 0.65rem;
    padding: 0 0.75rem;
    opacity: 0.7;
}

.promo-bar-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: linear-gradient(90deg, transparent, var(--forest-800) 40%);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    transition: color 0.2s;
    z-index: 2;
}

.promo-bar-close:hover {
    color: var(--amber-400);
}

/* Push header down when promo bar is present */
body.has-promo-bar .header {
    /* Header keeps its normal position, promo bar is above it */
}

@media (max-width: 600px) {
    .promo-bar {
        height: 34px;
    }
    .promo-bar-item {
        font-size: 0.75rem;
        padding: 0 1.5rem;
    }
    .promo-bar-close {
        width: 34px;
    }
}