/* ==========================================================================
   FlowerShop - Premium Botanical Theme
   Generated: 2026-10-06 15:33:40
   ========================================================================== */

/* === theme.css === */
/* ==========================================================================
   Lâm Nhiên Thảo Theme - Design Tokens
   Color System, Spacing, Typography, Shadows
   ========================================================================== */

:root {
    /* === PRIMARY COLORS === */
    --color-primary: #C78E66;
    --color-primary-rgb: 199 142 102;
    --color-primary-dark: #3A2C24;
    --color-primary-light: #E2AE84;
    --color-primary-lighter: #E6D3C6;
    
    /* === SECONDARY & ACCENT === */
    --color-secondary: #A8714E;
    --color-secondary-dark: #8C6E5C;
    --color-secondary-light: #E2AE84;
    
    --color-accent: #C78E66;
    --color-accent-dark: #A8714E;
    --color-accent-light: #E2AE84;
    
    /* === BACKGROUNDS === */
    --color-cream: #F5EBE6;
    --color-cream-dark: #FCF8F5;
    --color-cream-darker: #E6D3C6;
    
    --color-sage: #E6D3C6;
    --color-botanical: #FCF8F5;
    --color-botanical-pale: #F0E1D8;
    
    --color-white: #FFFFFF;
    --color-black: #241B16;
    
    /* === TEXT COLORS === */
    --color-text: #5E4636;
    --color-text-light: #8C6E5C;
    --color-text-lighter: #A88A77;
    --color-text-placeholder: #9A7B68;
    
    /* === BORDERS === */
    --color-border: #E6D3C6;
    --color-border-light: #EADBD1;
    --color-border-lighter: #F0E1D8;
    
    /* === STATUS COLORS === */
    --color-success: #587A5C;
    --color-warning: #B58A4B;
    --color-error: #A6534E;
    --color-info: #6B8B9E;
    
    /* === SPACING SCALE === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --space-11: 160px;
    
    /* === CONTAINER === */
    --container-width: 1280px;
    --container-padding: 24px;
    --container-padding-desktop: 48px;
    
    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 999px;
    
    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(120, 80, 55, .08);
    --shadow-sm: 0 2px 10px rgba(120, 80, 55, .12);
    --shadow-md: 0 8px 30px rgba(120, 80, 55, .2);
    --shadow-lg: 0 16px 48px rgba(120, 80, 55, .24);
    --shadow-botanical: 0 4px 16px rgba(120, 80, 55, .16);

    /* === SEMANTIC ALIASES === */
    --color-background: var(--color-cream);
    --color-surface: #FCF8F5;
    --color-surface-rgb: 252 248 245;
    --color-surface-elevated: #F0E1D8;
    --color-on-primary: var(--color-black);
    --color-on-dark: #F4E8DC;
    --color-chrome-background: var(--color-surface);
    --color-chrome-text: var(--color-text);
    --color-chrome-accent: var(--color-primary);

    /* === ADMIN COMPATIBILITY ALIASES === */
    --admin-bg-content: var(--color-surface);
    --admin-bg-secondary: var(--color-surface-elevated);
    --admin-bg-hover: var(--color-botanical);
    --admin-text-primary: var(--color-text);
    --admin-text-secondary: var(--color-text-light);
    --admin-text-tertiary: var(--color-text-lighter);
    --admin-text-muted: var(--color-text-light);
    --admin-primary: var(--color-primary);
    --admin-accent: var(--color-accent);
    --admin-error: var(--color-error);

    /* === TYPOGRAPHY === */
    --font-sans: "Josefin Sans", "Avenir Next", "Segoe UI", sans-serif;
    --font-serif: Lora, Georgia, serif;
    
    /* === TRANSITIONS === */
    --transition-fast: .2s ease;
    --transition-normal: .35s ease;
    --transition-slow: .5s ease;
    
    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* === BREAKPOINTS (for reference in media queries) === */
    --breakpoint-mobile: 767px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;
}

:root[data-theme="dark"] {
    --color-primary: #D9A47E;
    --color-primary-rgb: 217 164 126;
    --color-primary-dark: #16100D;
    --color-primary-light: #E2B28E;
    --color-primary-lighter: #CDB5A2;
    --color-secondary: #E2B28E;
    --color-secondary-dark: #A8714E;
    --color-secondary-light: #D9A47E;
    --color-accent: #D9A47E;
    --color-accent-dark: #A8714E;
    --color-accent-light: #E2AE84;
    --color-cream: #211915;
    --color-cream-dark: #2C231F;
    --color-cream-darker: #433630;
    --color-sage: #433630;
    --color-botanical: #2C231F;
    --color-botanical-pale: #342822;
    --color-black: #0E0A08;
    --color-text: #EEDFD4;
    --color-text-light: #BFA493;
    --color-text-lighter: #CDB5A2;
    --color-text-placeholder: #8C7566;
    --color-border: #433630;
    --color-border-light: #4E3E36;
    --color-border-lighter: #342822;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .12);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .18);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, .24);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .32);
    --shadow-botanical: 0 4px 16px rgba(0, 0, 0, .2);
    --color-surface: #2C231F;
    --color-surface-rgb: 44 35 31;
    --color-surface-elevated: #342822;
}

html {
    color-scheme: light;
    background: var(--color-background);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
}

button, input, select, textarea {
    color: var(--color-text);
    font: inherit;
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: var(--font-sans);
    text-wrap: balance;
}

.font-serif,
blockquote {
    font-family: var(--font-serif);
}

p, li {
    text-wrap: pretty;
}

.main-content {
    min-height: calc(100dvh - 80px);
    background: var(--color-background);
    color: var(--color-text);
}

.navbar,
.navbar.scrolled {
    background: rgb(var(--color-surface-rgb) / .97);
    border-bottom-color: var(--color-border);
    color: var(--color-chrome-text);
}

.navbar-nav-link,
.navbar-action-btn,
.navbar-user-toggle,
.navbar-mobile-nav a,
.navbar-mobile-accordion-toggle {
    color: var(--color-chrome-text);
}

.navbar-nav-link:hover,
.navbar-nav-link.active,
.navbar-action-btn:hover,
.navbar-user-toggle:hover {
    color: var(--color-chrome-accent);
}

.theme-toggle .theme-icon-dark,
.theme-toggle[data-theme-current="dark"] .theme-icon-light {
    display: none;
}

.theme-toggle[data-theme-current="dark"] .theme-icon-dark {
    display: block;
}

.site-footer {
    background: var(--color-chrome-background);
    color: var(--color-chrome-text);
    border-top: 1px solid var(--color-border);
}

.footer-column-heading,
.footer-contact-phone,
.footer-link:hover,
.footer-bottom-link:hover {
    color: var(--color-chrome-accent);
}

.footer-contact-value,
.footer-link {
    color: var(--color-chrome-text);
}

.footer-contact-label,
.footer-newsletter-description,
.footer-newsletter-consent,
.footer-copyright,
.footer-bottom-link {
    color: var(--color-text-light);
}

:where(.btn-primary, .btn.primary, .search-submit-btn, .footer-newsletter-button) {
    color: var(--color-on-primary);
}

:where(input, select, textarea) {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

:where(input, select, textarea)::placeholder {
    color: var(--color-text-placeholder);
}

code, pre, kbd, samp, .font-mono, [class*="mono"] {
    font-family: Consolas, Monaco, monospace !important;
}

/* === ADMIN DARK THEME === */
/* Modern botanical interface tokens for admin panel */
:root {
    /* Admin Card Backgrounds */
    --color-bg-primary: var(--color-botanical-pale);
    --color-bg-secondary: var(--color-botanical);
    --color-surface-primary: var(--color-surface);
    --color-surface-secondary: var(--color-sage);
    
    /* Admin Text (inherits from main theme) */
    --color-text-primary: var(--color-text);
    --color-text-secondary: var(--color-text-light);
    --color-text-tertiary: var(--color-text-lighter);
    
    /* Admin Borders */
    --admin-border: var(--color-border);
    --admin-radius-md: 8px;
    --admin-font-mono: 'Consolas', 'Monaco', monospace;
    --color-border-subtle: var(--color-border-light);
    --color-border-strong: var(--color-border);
    
    /* Admin Accents */
    --color-accent-primary: var(--color-primary);
    --color-accent-secondary: var(--color-secondary);
    --color-accent-success: var(--color-success);
    --color-accent-warning: var(--color-warning);
    --color-accent-error: var(--color-error);
    --color-accent-info: var(--color-info);
}


/* === reset.css === */
/* ==========================================================================
   CSS Reset - Minimal Modern Reset
   ========================================================================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
}


/* === base.css === */
/* ==========================================================================
   Base Styles - Body, Links, Selection
   ========================================================================== */

body {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--color-primary-lighter);
    color: var(--color-white);
}

::-moz-selection {
    background-color: var(--color-primary-lighter);
    color: var(--color-white);
}

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

a:hover {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

img {
    height: auto;
}

strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

small {
    font-size: 0.875em;
}

code, pre {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

hr {
    margin: var(--space-7) 0;
    border-color: var(--color-border-light);
}


/* === typography.css === */
/* ==========================================================================
   Typography - Headings, Body Text, Editorial Style
   ========================================================================== */

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

h1 {
    font-size: 3.5rem;           /* 56px */
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;           /* 40px */
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.75rem;          /* 28px */
}

h4 {
    font-size: 1.25rem;          /* 20px */
    font-weight: 500;
}

h5 {
    font-size: 1.125rem;         /* 18px */
    font-weight: 500;
}

h6 {
    font-size: 1rem;             /* 16px */
    font-weight: 600;
}

/* === BODY TEXT === */
p {
    font-family: var(--font-sans);
    font-size: 1rem;             /* 16px */
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.text-sm {
    font-size: 0.875rem;         /* 14px */
    line-height: 1.5;
}

.text-xs {
    font-size: 0.75rem;          /* 12px */
    line-height: 1.4;
}

.text-lg {
    font-size: 1.125rem;         /* 18px */
    line-height: 1.7;
}

.text-xl {
    font-size: 1.25rem;          /* 20px */
    line-height: 1.6;
}

/* === LABELS & SMALL TEXT === */
label, .label {
    font-family: var(--font-sans);
    font-size: 0.875rem;         /* 14px */
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: inline-block;
}

.label-sm {
    font-size: 0.75rem;          /* 12px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* === PRICE TYPOGRAPHY === */
.price {
    font-family: var(--font-sans);
    font-size: 1.25rem;          /* 20px */
    font-weight: 600;
    color: var(--color-primary);
}

.price-lg {
    font-size: 1.75rem;          /* 28px */
}

.price-sm {
    font-size: 1rem;             /* 16px */
}

.price-old {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-lighter);
    text-decoration: line-through;
}

/* === TEXT UTILITIES === */
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

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

.text-light {
    color: var(--color-text-light);
}

.text-lighter {
    color: var(--color-text-lighter);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

/* === EDITORIAL STYLE === */
.editorial-heading {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.editorial-subheading {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 600px;
}

.editorial-caption {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

/* === RESPONSIVE TYPOGRAPHY === */
@media (max-width: 1024px) {
    h1 {
        font-size: 2.5rem;       /* 40px */
    }
    
    h2 {
        font-size: 2rem;         /* 32px */
    }
    
    h3 {
        font-size: 1.5rem;       /* 24px */
    }
    
    .editorial-heading {
        font-size: 2.25rem;      /* 36px */
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 2rem;         /* 32px */
    }
    
    h2 {
        font-size: 1.75rem;      /* 28px */
    }
    
    h3 {
        font-size: 1.375rem;     /* 22px */
    }
    
    .editorial-heading {
        font-size: 1.875rem;     /* 30px */
    }
    
    .editorial-subheading {
        font-size: 1rem;
    }
}


/* === layout.css === */
/* ==========================================================================
   Layout System - Container, Grid, Spacing
   ========================================================================== */

/* === CONTAINER === */
.container {
    width: min(100% - 48px, var(--container-width));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container-fluid {
    width: 100%;
    padding-inline: var(--container-padding);
}

.container-narrow {
    width: min(100% - 48px, 960px);
    margin-inline: auto;
}

/* === SECTION SPACING === */
.section {
    padding-block: var(--space-10);
}

.section-sm {
    padding-block: var(--space-8);
}

.section-lg {
    padding-block: var(--space-11);
}

/* === GRID SYSTEM === */
.grid {
    display: grid;
    gap: var(--space-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);
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* === FLEX UTILITIES === */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }

/* === SPACING UTILITIES === */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .container {
        width: calc(100% - 32px);
        padding-inline: 16px;
    }
    
    .section {
        padding-block: var(--space-8);
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .container {
        width: calc(100% - 24px);
        padding-inline: 12px;
    }
    
    .section {
        padding-block: var(--space-7);
    }
    
    .section-lg {
        padding-block: var(--space-8);
    }
    
    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .grid {
        gap: var(--space-4);
    }
}


/* === buttons.css === */
/* ==========================================================================
   Button System - Premium Botanical Style
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* === PRIMARY BUTTON === */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-botanical);
}

.btn-primary:active {
    transform: translateY(0);
}

/* === SECONDARY BUTTON === */
.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-botanical);
}

/* === OUTLINE BUTTON === */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

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

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

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

/* === GHOST BUTTON === */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text);
    border: none;
}

.btn-ghost:hover {
    background-color: var(--color-botanical-pale);
}

/* === TEXT BUTTON === */
.btn-text {
    background-color: transparent;
    color: var(--color-primary);
    border: none;
    padding: var(--space-2) var(--space-3);
    font-weight: 500;
}

.btn-text:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* === ICON BUTTON === */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background-color: var(--color-cream);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-icon-danger:hover {
    background-color: rgba(166, 83, 78, 0.1);
    border-color: rgba(166, 83, 78, 0.3);
    color: var(--color-error);
}

.inline-form {
    display: inline-block;
    margin: 0;
}

.btn-icon-sm {
    width: 36px;
    height: 36px;
}

.btn-icon-lg {
    width: 52px;
    height: 52px;
}

/* === BUTTON SIZES === */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
}

.btn-lg {
    padding: var(--space-5) var(--space-8);
    font-size: 1.125rem;
}

.btn-xl {
    padding: var(--space-6) var(--space-9);
    font-size: 1.25rem;
}

/* === FULL WIDTH === */
.btn-block {
    width: 100%;
    display: flex;
}

/* === BUTTON GROUP === */
.btn-group {
    display: inline-flex;
    gap: var(--space-2);
}

.btn-group .btn {
    margin: 0;
}

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

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-spin 0.6s linear infinite;
}

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

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: 0.9375rem;
    }
    
    .btn-lg {
        padding: var(--space-4) var(--space-6);
        font-size: 1rem;
    }
}


/* === forms.css === */
/* ==========================================================================
   Form System - Botanical Input Styling
   ========================================================================== */

/* === FORM GROUP === */
.form-group {
    margin-bottom: var(--space-5);
}

.form-group:last-child {
    margin-bottom: 0;
}

/* === LABELS === */
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.form-label-required::after {
    content: '*';
    color: var(--color-error);
    margin-left: var(--space-1);
}

/* === TEXT INPUTS === */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    outline: none;
}

.form-input {
    height: 48px;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-placeholder);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
    border-color: var(--color-primary-light);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background-color: var(--color-cream-darker);
    cursor: not-allowed;
    opacity: 0.6;
}

/* === TEXTAREA === */
.form-textarea {
    min-height: 120px;
    resize: vertical;
    padding-block: var(--space-3);
}

/* === SELECT === */
.form-select {
    height: 48px;
    padding-right: var(--space-7);
    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='%23343832' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    appearance: none;
    cursor: pointer;
}

/* === CHECKBOX & RADIO === */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.form-check-input {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:hover {
    border-color: var(--color-primary);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E");
}

.form-check-label {
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

/* === INPUT SIZES === */
.input-sm,
.form-input-sm {
    height: 40px;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.input-sm:hover,
.form-input-sm:hover {
    border-color: var(--color-primary-light);
}

.input-sm:focus,
.form-input-sm:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

.form-input-lg {
    height: 56px;
    padding: var(--space-4) var(--space-5);
    font-size: 1.0625rem;
}

/* === INPUT STATES === */
.form-input-error,
.form-textarea-error,
.form-select-error {
    border-color: var(--color-error);
}

.form-input-error:focus,
.form-textarea-error:focus,
.form-select-error:focus {
    box-shadow: 0 0 0 3px rgba(166, 83, 78, 0.1);
}

.form-input-success {
    border-color: var(--color-success);
}

.form-input-success:focus {
    box-shadow: 0 0 0 3px rgba(88, 122, 92, 0.1);
}

/* === HELP TEXT === */
.form-help {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.form-error {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-error);
}

/* === INPUT GROUP === */
.input-group {
    position: relative;
    display: flex;
    width: 100%;
}

.input-group .form-input {
    flex: 1;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    background-color: var(--color-botanical-pale);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-size: 0.875rem;
    white-space: nowrap;
}

.input-group-prepend {
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group-append {
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-input:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* === SEARCH INPUT === */
.input-search {
    padding-left: var(--space-7);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 12C9.76142 12 12 9.76142 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z' stroke='%2373786F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 14L10.5 10.5' stroke='%2373786F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left var(--space-4) center;
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .form-input,
    .form-select {
        height: 44px;
    }

    .form-input-lg {
        height: 52px;
    }
}

/* Auth forms: enforce explicit colors so text stays readable on cream/white surfaces */
.auth-form-panel .form-label,
.auth-card .form-label {
    color: var(--color-text);
    font-weight: 500;
}

.auth-form-panel .form-input,
.auth-form-panel .form-textarea,
.auth-form-panel .form-select,
.auth-card .form-input,
.auth-card .form-textarea,
.auth-card .form-select {
    color: var(--color-text);
    background-color: var(--color-surface);
}

.auth-form-panel .form-input::placeholder,
.auth-form-panel .form-textarea::placeholder,
.auth-card .form-input::placeholder,
.auth-card .form-textarea::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.auth-form-panel .form-checkbox-label,
.auth-card .form-checkbox-label {
    color: var(--color-text);
}

.auth-form-panel .auth-subtitle,
.auth-card .auth-subtitle {
    color: var(--color-text-light);
}

/* Mobile fixes: tighten form spacing + ensure label/input colors stay readable */
@media (max-width: 767px) {
    .auth-form-panel .form-group,
    .auth-card .form-group {
        margin-bottom: var(--space-3);
    }

    .auth-form-panel .form-label,
    .auth-card .form-label {
        color: var(--color-text);
        font-weight: 500;
    }

    .auth-form-panel .form-input,
    .auth-form-panel .form-textarea,
    .auth-form-panel .form-select,
    .auth-card .form-input,
    .auth-card .form-textarea,
    .auth-card .form-select {
        color: var(--color-text);
        background-color: var(--color-surface);
    }
}


/* === cards.css === */
/* ==========================================================================
   Card Components - Premium Botanical Style
   ========================================================================== */

/* === BASE CARD === */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* === CARD PARTS === */
.card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-botanical-pale);
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card:hover .card-image img {
    transform: scale(1.04);
}

.card-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.card-body {
    padding: var(--space-5);
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.card-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--space-2);
}

.card-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-botanical-pale);
}

/* === CARD VARIANTS === */
.card-botanical {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

.card-botanical:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-botanical);
}

.card-flat {
    border: none;
    box-shadow: none;
}

.card-elevated {
    border: none;
    box-shadow: var(--shadow-sm);
}

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

/* === CARD OVERLAY === */
.card-overlay {
    position: relative;
}

.card-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(32, 36, 31, 0.7) 0%,
        rgba(32, 36, 31, 0.3) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.card-overlay:hover::after {
    opacity: 1;
}

.card-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5);
    color: var(--color-white);
    z-index: 1;
    transform: translateY(10px);
    opacity: 0;
    transition: all var(--transition-normal);
}

.card-overlay:hover .card-overlay-content {
    transform: translateY(0);
    opacity: 1;
}

/* === HORIZONTAL CARD === */
.card-horizontal {
    display: flex;
    flex-direction: row;
}

.card-horizontal .card-image {
    width: 40%;
    flex-shrink: 0;
}

.card-horizontal .card-body {
    flex: 1;
}

/* === CARD BADGE === */
.card-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
}

/* === CARD ACTIONS === */
.card-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-4);
}

.card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.card-action:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.card-action.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .card-body {
        padding: var(--space-4);
    }
    
    .card-title {
        font-size: 1.125rem;
    }
    
    .card-horizontal {
        flex-direction: column;
    }
    
    .card-horizontal .card-image {
        width: 100%;
    }
}


/* === badges.css === */
/* ==========================================================================
   Badge System - Minimal Botanical Style
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* === PRIMARY BADGES === */
.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.badge-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.badge-accent {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* === STATUS BADGES === */
.badge-success {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.badge-error {
    background-color: var(--color-error);
    color: var(--color-white);
}

.badge-info {
    background-color: var(--color-info);
    color: var(--color-white);
}

/* === LIGHT VARIANTS === */
.badge-primary-light {
    background-color: rgb(var(--color-primary-rgb) / 0.1);
    color: var(--color-primary-dark);
}

.badge-secondary-light {
    background-color: rgba(181, 140, 103, 0.1);
    color: var(--color-secondary-dark);
}

.badge-accent-light {
    background-color: rgba(168, 92, 85, 0.1);
    color: var(--color-accent-dark);
}

.badge-success-light {
    background-color: rgba(88, 122, 92, 0.1);
    color: var(--color-success);
}

.badge-warning-light {
    background-color: rgba(181, 138, 75, 0.1);
    color: var(--color-warning);
}

.badge-error-light {
    background-color: rgba(166, 83, 78, 0.1);
    color: var(--color-error);
}

/* === OUTLINED BADGES === */
.badge-outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.badge-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.badge-outline-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* === BADGE SIZES === */
.badge-sm {
    padding: 2px var(--space-2);
    font-size: 0.625rem;
}

.badge-lg {
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
}

/* === SPECIAL BADGES === */
.badge-featured {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.badge-sale {
    background-color: var(--color-error);
    color: var(--color-white);
}

.badge-new {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.badge-bestseller {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.badge-stock-low {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.badge-stock-out {
    background-color: var(--color-text-lighter);
    color: var(--color-white);
}

/* === BADGE WITH DOT === */
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

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

/* === BADGE WITH ICON === */
.badge-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.badge-icon svg {
    width: 12px;
    height: 12px;
}

/* === PILL BADGE === */
.badge-pill {
    border-radius: var(--radius-full);
    padding-inline: var(--space-4);
}

/* === BADGE GROUP === */
.badge-group {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* === DISCOUNT BADGE === */
.badge-discount {
    background: linear-gradient(135deg, var(--color-error) 0%, var(--color-accent) 100%);
    color: var(--color-white);
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
}

/* === NOTIFICATION BADGE === */
.badge-notification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    background-color: var(--color-error);
    color: var(--color-white);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-notification-sm {
    min-width: 6px;
    height: 6px;
    padding: 0;
    font-size: 0;
}


/* === product-card.css === */
/* ==========================================================================
   Product Card - Premium Botanical Style
   ========================================================================== */

/* === CARD BASE === */
.product-card {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.product-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-botanical);
    transform: translateY(-4px);
}

.product-card__full-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-card__full-link:focus-visible,
.product-card__wishlist:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}

/* === IMAGE WRAPPER === */
.product-card__image-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--color-botanical-pale);
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), opacity var(--transition-normal);
}

.product-card__image--primary {
    position: relative;
    z-index: 1;
}

.product-card__image--secondary {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
}

.product-card:hover .product-card__image--primary {
    transform: scale(1.06);
}

.product-card:hover .product-card__image--secondary {
    opacity: 1;
    transform: scale(1.02);
}

/* === BADGES === */
.product-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 10;
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.product-card__badge--featured {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.product-card__badge--sale {
    background-color: var(--color-error);
    color: var(--color-white);
}

.product-card__badge--new {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.product-card__badge--sold-out {
    background-color: var(--color-error);
    color: var(--color-white);
}

.product-card__badge--bestseller {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.product-card__badge--new { top: calc(var(--space-3) + 36px); }
.product-card__badge--bestseller { top: calc(var(--space-3) + 72px); }
.product-card__badge--featured { top: calc(var(--space-3) + 108px); }
.product-card--sold-out .product-card__image { filter: grayscale(.35); opacity: .72; }

/* === WISHLIST BUTTON === */
.product-card__wishlist {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: none;
    border-radius: 50%;
    color: var(--color-text);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    opacity: 0;
    transform: translateY(-8px);
}

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

.product-card__wishlist:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: scale(1.1);
}

.product-card__wishlist.active {
    opacity: 1;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

.product-card__wishlist svg {
    width: 20px;
    height: 20px;
}

/* === HOVER OVERLAY === */
.product-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(32, 36, 31, 0.6), transparent 60%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-5);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.product-card:hover .product-card__overlay {
    opacity: 1;
}

.product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    transform: translateY(10px);
    transition: all var(--transition-normal);
}

.product-card:hover .product-card__cta {
    transform: translateY(0);
    background-color: var(--color-primary-dark);
}

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

/* === PRODUCT INFO === */
.product-card__info {
    box-sizing: border-box;
    padding: var(--space-4) var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-surface);
}

.product-card__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    margin-bottom: var(--space-2);
}

.product-card__name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
}

.product-card:hover .product-card__name {
    color: var(--color-primary);
}

.product-card__price-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.product-card__price {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.product-card__price-old {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-lighter);
    text-decoration: line-through;
}

.product-card__discount {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-error);
    padding: 2px var(--space-2);
    background-color: rgba(166, 83, 78, 0.1);
    border-radius: var(--radius-sm);
}

/* === RATING === */
.product-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.product-card__stars {
    display: flex;
    gap: 2px;
}

.product-card__stars svg {
    width: 14px;
    height: 14px;
    fill: var(--color-secondary);
    stroke: var(--color-secondary);
}

.product-card__rating-count {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* === STOCK STATUS === */
.product-card__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 500;
}

.product-card__stock--in-stock {
    color: var(--color-success);
}

.product-card__stock--low-stock {
    color: var(--color-warning);
}

.product-card__stock--out-of-stock {
    color: var(--color-error);
}

.product-card__stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .product-card__info {
        padding: var(--space-3);
    }

    .product-card__name {
        font-size: 0.9375rem;
    }

    .product-card__price {
        font-size: 0.9375rem;
    }
}

/* Mobile (≤ 640px) — compact product card */
@media (max-width: 640px) {
    .product-card {
        border-radius: var(--radius-md);
    }

    .product-card__image-wrap {
        aspect-ratio: 1 / 1;
    }

    .product-card__info {
        padding: var(--space-3);
    }

    .product-card__category {
        font-size: 0.6875rem;
        margin-bottom: var(--space-1);
        letter-spacing: 0.05em;
    }

    .product-card__name {
        font-size: 0.8125rem;
        margin-bottom: var(--space-2);
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }

    .product-card__price-row {
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .product-card__price {
        font-size: 0.875rem;
    }

    .product-card__price-old {
        font-size: 0.75rem;
    }

    .product-card__discount {
        font-size: 0.6875rem;
        padding: 1px var(--space-1);
    }

    .product-card__rating {
        gap: var(--space-1);
        margin-top: var(--space-1);
    }

    .product-card__stars svg {
        width: 12px;
        height: 12px;
    }

    .product-card__rating-count {
        font-size: 0.75rem;
    }

    .product-card__stock {
        font-size: 0.75rem;
        margin-top: var(--space-1);
    }

    .product-card__wishlist {
        opacity: 1;
        transform: translateY(0);
        width: 32px;
        height: 32px;
        top: var(--space-2);
        right: var(--space-2);
    }

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

    .product-card__badge {
        top: var(--space-2);
        left: var(--space-2);
        padding: var(--space-1) var(--space-2);
        font-size: 0.6875rem;
    }

    .product-card__overlay {
        display: none;
    }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
    .product-card__name {
        font-size: 0.75rem;
    }

    .product-card__price {
        font-size: 0.8125rem;
    }
}


/* === navbar.css === */
/* ========================================================================== 
   Navbar - Premium Botanical Navigation
   ========================================================================== */

/* === SEARCH OVERLAY === */
.search-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: transparent;
    z-index: calc(var(--z-modal, 9999) + 10);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay-container {
    position: relative;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin-top: 72px;
    padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.search-form {
    width: auto;
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    width: 320px;
    flex: none;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 10px 12px;
    padding-right: 40px;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    outline: none;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(74, 111, 79, 0.1);
}

.search-input::placeholder { color: var(--color-text-light); }

.search-clear-btn {
    position: absolute;
    right: var(--space-3);
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--color-text-light);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    color: var(--color-text);
    background-color: var(--color-botanical-pale);
}

.search-clear-btn svg { width: 18px; height: 18px; }

.search-submit-btn {
    padding: 10px 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.search-submit-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .search-overlay-container { width: calc(100% - 24px); padding: 8px; margin-top: 64px; }
    .search-form { flex-direction: column; gap: var(--space-3); }
    .search-input-wrapper { width: 100%; }
    .search-input { font-size: 1rem; padding: 10px 12px 10px 12px; padding-right: 40px; }
    .search-submit-btn { width: 100%; padding: var(--space-3) var(--space-4); }
}

/* === NAVBAR BASE === */
.navbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: rgb(var(--color-surface-rgb) / 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: all var(--transition-normal);
}

.navbar.scrolled {
    background-color: rgb(var(--color-surface-rgb) / 0.98);
    border-bottom-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.navbar-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

/* === LOGO === */
.navbar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-chrome-text);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.navbar-logo:hover {
    color: var(--color-primary);
}

.navbar-logo-icon {
    width: 32px;
    height: 32px;
}

.navbar-logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.navbar-logo-text {
    white-space: nowrap;
}

/* === DESKTOP NAVIGATION === */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-nav-item {
    position: relative;
}

.navbar-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
}

.navbar-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.navbar-nav-link:hover,
.navbar-nav-link.active {
    color: var(--color-primary);
}

.navbar-nav-link.active::after {
    transform: scaleX(1);
}

.navbar-nav-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.navbar-nav-item.dropdown-active .navbar-nav-link svg {
    transform: rotate(180deg);
}

/* === MEGA MENU === */
.navbar-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 1000px;
    margin-top: var(--space-4);
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all var(--transition-normal);
}

.navbar-mega-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Simple grid layout - 4 columns */
.mega-menu-grid-simple {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    align-items: start;
}

/* Individual menu items */
.mega-menu-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-menu-item:hover {
    color: var(--color-primary);
    background-color: var(--color-botanical-pale);
}

/* "Tất cả sản phẩm" - special styling in last column */
.mega-menu-item-all {
    grid-column: 4 / 5;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    white-space: normal;
}

.mega-menu-item-all:hover {
    color: var(--color-primary-dark);
    text-decoration-thickness: 3px;
    background-color: transparent;
}

.mega-menu-item-all svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.mega-menu-item-all:hover svg {
    transform: translateX(4px);
}

/* === MEGA MENU FEATURED === */
.mega-menu-featured {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.mega-menu-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-menu-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(32, 36, 31, 0.8), transparent 60%);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
}

.mega-menu-featured-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-white);
}

.mega-menu-featured-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: gap var(--transition-fast);
}

.mega-menu-featured-link:hover {
    gap: var(--space-3);
}

.mega-menu-featured-link svg {
    width: 18px;
    height: 18px;
}

/* === STANDARD DROPDOWN === */
.navbar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
}

.navbar-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-dropdown-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.navbar-dropdown-item:hover {
    background-color: var(--color-botanical-pale);
    color: var(--color-primary);
}

.navbar-dropdown-divider {
    height: 1px;
    background-color: var(--color-border-light);
    margin: var(--space-2) 0;
}

.navbar-dropdown-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

/* === NAVBAR DROPDOWN BADGE === */
.navbar-dropdown-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background-color: #e53935;
    border-radius: 10px;
    margin-left: auto;
}

/* === NAVBAR ACTIONS === */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.navbar-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-text);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.navbar-action-btn:hover {
    background-color: var(--color-botanical-pale);
    color: var(--color-primary);
}

.navbar-action-btn svg {
    width: 22px;
    height: 22px;
}

.cart-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: 999px;
}

/* === USER MENU === */
.navbar-user-menu {
    position: relative;
}

.navbar-user-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.navbar-user-toggle:hover {
    background-color: var(--color-botanical-pale);
    border-color: var(--color-primary);
}

.navbar-user-toggle svg {
    width: 20px;
    height: 20px;
}

.navbar-user-menu .navbar-dropdown {
    right: 0;
    left: auto;
}

/* === MOBILE TOGGLE === */
.navbar-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* CSS-based hamburger icon (crisp at any size, easy to animate to X) */
.hamburger-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 18px;
    pointer-events: none;
}

.hamburger-icon span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast), top var(--transition-fast);
}

.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 8px; }
.hamburger-icon span:nth-child(3) { top: 16px; }

/* Animate hamburger → X when menu is open */
.navbar-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
}

.navbar-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.navbar-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
}

/* === MOBILE MENU === */
.navbar-mobile-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-cream);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    z-index: var(--z-fixed);
}

.navbar-mobile-menu.active {
    transform: translateX(0);
}

.navbar-mobile-nav {
    padding: var(--space-6) var(--space-5);
    list-style: none;
}

.navbar-mobile-nav > li {
    border-bottom: 1px solid var(--color-border-light);
}

.navbar-mobile-nav > li > a {
    display: block;
    padding: var(--space-4) 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}

/* === MOBILE ACCORDION === */
.navbar-mobile-accordion-item {
    border-bottom: 1px solid var(--color-border-light);
}

.navbar-mobile-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-text);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.navbar-mobile-accordion-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.navbar-mobile-accordion-toggle.active svg {
    transform: rotate(180deg);
}

.navbar-mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.navbar-mobile-accordion-content.active {
    max-height: 500px;
}

.navbar-mobile-accordion-links {
    padding-left: var(--space-4);
    padding-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.navbar-mobile-accordion-link {
    padding: var(--space-2) 0;
    font-size: 0.9375rem;
    color: var(--color-text-light);
    text-decoration: none;
}

.mobile-menu-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-4) 0;
}

.mobile-menu-logout-btn {
    width: 100%;
    text-align: left;
    padding: var(--space-4) 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-error);
    background: none;
    border: none;
    cursor: pointer;
}

.navbar-logout-form {
    margin: 0;
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet & below (≤ 1024px): switch to mobile layout */
@media (max-width: 1024px) {
    .navbar-nav {
        display: none;
    }

    .navbar-mobile-toggle {
        display: flex;
    }

    .navbar-container {
        padding: 0 var(--space-5);
    }
}

/* Mobile (≤ 640px) — primary mobile breakpoint */
@media (max-width: 640px) {
    .navbar {
        background-color: rgb(var(--color-surface-rgb) / .98);
    }

    .navbar-container {
        height: 56px;
        padding: 0 var(--space-4);
        gap: var(--space-3);
    }

    .navbar-logo {
        font-size: 1.0625rem;
        gap: var(--space-2);
    }

    .navbar-logo-icon {
        width: 24px;
        height: 24px;
    }

    .navbar-actions {
        gap: var(--space-2);
    }

    .navbar-action-btn {
        width: 38px;
        height: 38px;
    }

    .navbar-action-btn svg {
        width: 20px;
        height: 20px;
    }

    .navbar-mobile-toggle {
        width: 38px;
        height: 38px;
    }

    .hamburger-icon {
        width: 22px;
        height: 16px;
    }

    .hamburger-icon span:nth-child(2) { top: 7px; }
    .hamburger-icon span:nth-child(3) { top: 14px; }

    .navbar-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1),
    .navbar-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
        top: 7px;
    }

    .navbar-mobile-menu {
        top: 56px;
    }

    .navbar-mobile-nav {
        padding: var(--space-5) var(--space-4);
    }

    .navbar-mobile-nav > li > a,
    .navbar-mobile-accordion-toggle {
        padding: var(--space-3) 0;
        font-size: 1rem;
    }

    .navbar-mobile-accordion-content.active {
        max-height: 600px;
    }

    .navbar-user-toggle {
        padding: var(--space-2);
        border: none;
    }

    .navbar-user-toggle span {
        display: none;
    }

    .cart-badge {
        top: 4px;
        right: 4px;
    }

    /* === MOBILE ACTIONS - Hide cart/user/favorites from navbar-actions === */
    .navbar-actions .navbar-cart-btn,
    .navbar-actions .navbar-auth-btn,
    .navbar-actions .navbar-user-menu,
    .navbar-actions .navbar-favorites-btn {
        display: none;
    }

    /* Always show search button on mobile */
    .navbar-actions .navbar-search-btn {
        display: flex;
    }

    /* === MOBILE MENU ACTIONS === */
    .mobile-menu-actions {
        display: none;
    }

}

/* Desktop: hide mobile menu actions */
@media (min-width: 641px) {
    .mobile-menu-actions {
        display: none !important;
    }
}

/* Mobile (≤ 640px): show mobile menu actions */
@media (max-width: 640px) {
    .mobile-menu-actions {
        padding: var(--space-5) var(--space-4);
        list-style: none;
        margin: 0;
    }

    .mobile-menu-actions > li {
        border-bottom: 1px solid var(--color-border-light);
    }

    .mobile-menu-actions > li:last-child {
        border-bottom: none;
    }

    .mobile-menu-action-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) 0;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-text);
        text-decoration: none;
        background: none;
        border: none;
        border-radius: 0;
        transition: color var(--transition-fast);
        position: relative;
    }

    .mobile-menu-action-item:hover,
    .mobile-menu-action-item:focus {
        color: var(--color-primary);
    }

    .mobile-menu-action-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .mobile-menu-badge {
        margin-left: auto;
        min-width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-white);
        background-color: var(--color-accent);
        border-radius: 999px;
    }
}

/* Small phones (≤ 480px) */
@media (max-width: 480px) {
    .navbar-container {
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }

    .navbar-logo {
        font-size: 1rem;
    }

    .navbar-logo-text {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-actions {
        gap: var(--space-1);
    }

    .navbar-action-btn {
        width: 36px;
        height: 36px;
    }
}


/* === footer.css === */
/* ==========================================================================
   Footer - Premium Botanical Style
   ========================================================================== */

/* === FOOTER BASE === */
.site-footer {
    background-color: var(--color-chrome-background);
    color: var(--color-chrome-text);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-7);
    padding-bottom: var(--space-5);
}

.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* === FOOTER MAIN GRID === */
.footer-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

.footer-column {
    min-width: 0;
}

.footer-column-heading {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-chrome-accent);
    margin-bottom: var(--space-4);
    line-height: 1.3;
}

/* === CONTACT ITEMS === */
.footer-contact-item {
    margin-bottom: var(--space-3);
}

.footer-contact-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--space-1);
}

.footer-contact-value {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-chrome-text);
    text-decoration: none;
    line-height: 1.6;
    transition: color var(--transition-fast);
}

.footer-contact-value:hover {
    color: var(--color-white);
}

.footer-contact-phone {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-secondary-light);
}

.footer-contact-phone:hover {
    color: var(--color-secondary);
}

/* === SOCIAL ICONS === */
.footer-social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgb(var(--color-primary-rgb) / .10);
    border: 1px solid rgb(var(--color-primary-rgb) / .20);
    border-radius: var(--radius-md);
    color: var(--color-chrome-text);
    transition: all var(--transition-normal);
}

.footer-social-link:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* === FOOTER LINKS === */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.footer-link {
    display: inline-block;
    padding: var(--space-1) 0;
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

.footer-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--space-1);
    width: 0;
    height: 1px;
    background-color: var(--color-secondary-light);
    transition: width var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-white);
    padding-left: var(--space-3);
}

.footer-link:hover::before {
    width: 20px;
}

/* === NEWSLETTER === */
.footer-newsletter-description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: var(--space-4);
}

.footer-newsletter-form {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.footer-newsletter-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--color-chrome-text);
    background-color: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.footer-newsletter-input::placeholder {
    color: var(--color-text-placeholder);
}

.footer-newsletter-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(181, 140, 103, 0.15);
}

.footer-newsletter-button {
    padding: 0 var(--space-6);
    height: 48px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-secondary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.footer-newsletter-button:hover {
    background-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(181, 140, 103, 0.3);
}

.footer-newsletter-consent {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.footer-newsletter-consent a {
    color: var(--color-secondary-light);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.footer-newsletter-consent a:hover {
    color: var(--color-secondary);
}

/* === FOOTER DIVIDER === */
.footer-divider {
    height: 1px;
    background-color: rgb(var(--color-primary-rgb) / .15);
    margin: var(--space-5) 0;
}

/* === FOOTER BOTTOM === */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.footer-copyright {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.footer-bottom-links {
    display: flex;
    gap: var(--space-6);
}

.footer-bottom-link {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-bottom-link:hover {
    color: var(--color-white);
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-7);
    }

    .footer-container {
        padding: 0 var(--space-5);
    }
}

/* Mobile (≤ 640px) — dedicated mobile layout */
@media (max-width: 640px) {
    .site-footer {
        padding-top: var(--space-5);
        padding-bottom: var(--space-3);
    }

    .footer-container {
        padding: 0 var(--space-4);
    }

    /* Grid 2 cột thay vì 1 cột để giảm chiều cao đáng kể */
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
        margin-bottom: var(--space-3);
    }

    /* Ẩn 2 columns để footer mobile gọn hơn: Danh mục (2) + Bản tin (4) */
    .footer-column:nth-child(2),
    .footer-column:nth-child(4) {
        display: none;
    }

    .footer-column {
        text-align: left;
    }

    .footer-column-heading {
        font-size: 0.875rem;
        margin-bottom: var(--space-2);
        font-weight: 600;
    }

    .footer-contact-item {
        margin-bottom: var(--space-2);
    }

    .footer-contact-label {
        font-size: 0.6875rem;
        margin-bottom: 2px;
    }

    .footer-contact-value {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .footer-contact-phone {
        font-size: 0.9375rem;
    }

    /* Social icons compact */
    .footer-social {
        justify-content: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-2);
    }

    .footer-social-link {
        width: 32px;
        height: 32px;
    }

    .footer-social-link svg {
        width: 16px;
        height: 16px;
    }

    /* Links gọn hơn */
    .footer-links {
        align-items: flex-start;
        gap: 0;
    }

    .footer-link {
        padding: 3px 0;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .footer-link:hover {
        padding-left: 0;
    }

    .footer-link:hover::before {
        display: none;
    }

    /* Ẩn description dài để tiết kiệm chiều cao */
    .footer-newsletter-description {
        display: none;
    }

    /* Form giữ horizontal để tiết kiệm chiều cao */
    .footer-newsletter-form {
        flex-direction: row;
        gap: var(--space-2);
        margin-bottom: 0;
    }

    .footer-newsletter-input {
        height: 40px;
        font-size: 0.8125rem;
        padding: 0 var(--space-3);
    }

    .footer-newsletter-button {
        height: 40px;
        font-size: 0.8125rem;
        padding: 0 var(--space-4);
    }

    /* Ẩn consent text để giảm chiều cao */
    .footer-newsletter-consent {
        display: none;
    }

    .footer-divider {
        margin: var(--space-3) 0;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }

    .footer-copyright {
        font-size: 0.75rem;
    }

    .footer-bottom-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    .footer-bottom-link {
        font-size: 0.75rem;
    }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
    .footer-social-link {
        width: 30px;
        height: 30px;
    }

    .footer-bottom-links {
        gap: var(--space-2);
    }

    /* Form xếp dọc ở màn rất nhỏ */
    .footer-newsletter-form {
        flex-direction: column;
    }

    .footer-newsletter-button {
        width: 100%;
    }
}


/* === page-hero.css === */
/* ==========================================================================
   Page Hero - Unified Sub-page Hero Component
   ========================================================================== */

/* === PAGE HERO BASE === */
.page-hero {
    position: relative;
    padding: var(--space-10) 0 var(--space-9);
    background-color: var(--color-botanical-pale);
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-botanical-pale) 100%);
    opacity: 0.5;
    z-index: 0;
}

.page-hero-container {
    position: relative;
    z-index: 1;
}

.page-hero-container--hidden {
    visibility: hidden;
}

/* === BREADCRUMB === */
.page-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.page-hero-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-hero-breadcrumb-link {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.page-hero-breadcrumb-link:hover {
    color: var(--color-primary);
}

.page-hero-breadcrumb-separator {
    color: var(--color-text-lighter);
}

.page-hero-breadcrumb-current {
    color: var(--color-text);
    font-weight: 500;
}

/* === PAGE HERO CONTENT === */
.page-hero-content {
    max-width: 800px;
}

.page-hero-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.page-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.page-hero-description {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 640px;
}

/* === PAGE HERO WITH IMAGE === */
.page-hero--with-image {
    padding: var(--space-11) 0;
    background-color: var(--color-black);
}

.page-hero--with-image::before {
    display: none;
}

.page-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-hero-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(32, 36, 31, 0.8) 0%,
        rgba(32, 36, 31, 0.5) 50%,
        rgba(32, 36, 31, 0.3) 100%
    );
}

.page-hero--no-overlay .page-hero-background::after {
    content: none;
}

.page-hero--with-image .page-hero-breadcrumb-link,
.page-hero--with-image .page-hero-breadcrumb-separator,
.page-hero--with-image .page-hero-breadcrumb-current {
    color: rgba(247, 244, 237, 0.8);
}

.page-hero--with-image .page-hero-breadcrumb-link:hover {
    color: var(--color-white);
}

.page-hero--with-image .page-hero-label {
    color: var(--color-secondary-light);
}

.page-hero--with-image .page-hero-title {
    color: var(--color-white);
}

.page-hero--with-image .page-hero-description {
    color: rgba(247, 244, 237, 0.9);
}

/* === DECORATIVE ELEMENT === */
.page-hero-decoration {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 200px;
    height: 200px;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

.page-hero-decoration svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-primary);
    fill: none;
}

/* === PAGE HERO VARIANTS === */
.page-hero--compact {
    padding: var(--space-8) 0 var(--space-7);
}

.page-hero--compact .page-hero-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: var(--space-3);
}

.page-hero--compact .page-hero-description {
    font-size: 1rem;
}

/* === PAGE HERO ACTIONS === */
.page-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .page-hero {
        padding: var(--space-8) 0 var(--space-7);
    }
    
    .page-hero-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
    
    .page-hero-description {
        font-size: 1rem;
    }
    
    .page-hero--with-image {
        padding: var(--space-9) 0;
    }
}

@media (max-width: 767px) {
    .page-hero {
        padding: var(--space-7) 0 var(--space-6);
    }
    
    .page-hero::before {
        width: 100%;
        opacity: 0.3;
    }
    
    .page-hero-breadcrumb {
        font-size: 0.8125rem;
        margin-bottom: var(--space-4);
    }
    
    .page-hero-title {
        font-size: clamp(1.75rem, 5vw, 2rem);
        margin-bottom: var(--space-3);
    }
    
    .page-hero-description {
        font-size: 0.9375rem;
    }
    
    .page-hero--with-image {
        padding: var(--space-8) 0;
    }
    
    .page-hero--compact {
        padding: var(--space-6) 0 var(--space-5);
    }
    
    .page-hero-decoration {
        width: 120px;
        height: 120px;
        right: 5%;
    }
    
    .page-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-top: var(--space-5);
    }
    
    .page-hero-actions .btn {
        width: 100%;
    }
}


/* === hero.css === */
/* ==========================================================================
   Hero Section - Editorial Slider with Premium Botanical Style
   ========================================================================== */

/* === HERO BASE === */
.hero {
    position: relative;
    height: 85vh;
    min-height: 600px;
    max-height: 900px;
    overflow: hidden;
    background-color: var(--color-black);
}

/* === HERO SLIDER === */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* === HERO BACKGROUND === */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.hero-slide.active .hero-background,
.hero-background.active {
    opacity: 1;
}

.hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(32, 36, 31, 0.75) 0%,
        rgba(32, 36, 31, 0.4) 50%,
        rgba(32, 36, 31, 0.2) 100%
    );
}

.hero-background.no-overlay::after {
    content: none !important;
}

/* === HERO CONTAINER === */
.hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
}

.hero-content-wrapper {
    position: relative;
    max-width: 640px;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    width: 100%;
    min-height: 280px;
}

/* === HERO SLIDES === */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

/* === HERO TEXT === */
.hero-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-secondary-light);
    margin-bottom: var(--space-4);
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-slide.active .hero-label {
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-white);
    margin-bottom: var(--space-5);
}

.hero-slide.active .hero-title {
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-description {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(247, 244, 237, 0.9);
    margin-bottom: var(--space-7);
    max-width: 560px;
}

.hero-slide.active .hero-description {
    animation: fadeInUp 0.8s ease 0.6s both;
}

/* === HERO CTA === */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.hero-slide.active .hero-cta {
    animation: fadeInUp 0.8s ease 0.8s both;
}

.hero-cta:hover {
    background-color: transparent;
    border-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(var(--color-primary-rgb) / 0.4);
}

.hero-cta-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.hero-cta:hover .hero-cta-icon {
    transform: translateX(4px);
}

/* === HERO CONTROLS === */
.hero-controls {
    position: absolute;
    left: 0;
    bottom: var(--space-5);
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

/* === HERO INDICATORS === */
.hero-indicators {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hero-indicator {
    position: relative;
    width: 60px;
    height: 3px;
    background-color: rgb(var(--color-primary-rgb) / .30);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.hero-indicator:hover {
    background-color: rgb(var(--color-primary-rgb) / .50);
}

.hero-indicator-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--color-secondary-light);
    transition: width 5s linear;
}

.hero-indicator.active .hero-indicator-progress {
    width: 100%;
}

/* === HERO COUNTER === */
.hero-counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-sans);
    color: var(--color-white);
}

.hero-counter-current {
    font-size: 1.5rem;
    font-weight: 600;
}

.hero-counter-separator {
    font-size: 1rem;
    opacity: 0.6;
}

.hero-counter-total {
    font-size: 1rem;
    opacity: 0.8;
}

/* === SCROLL DOWN BUTTON === */
.hero-scroll-btn {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.hero-scroll-btn:hover {
    transform: translateX(-50%) translateY(4px);
}

.hero-scroll-arrow {
    width: 24px;
    height: 24px;
    color: var(--color-white);
    animation: bounceDown 2s ease-in-out infinite;
}

.hero-scroll-btn:hover .hero-scroll-arrow {
    animation-play-state: paused;
}

@keyframes bounceDown {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

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

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .hero {
        height: 75vh;
        min-height: 500px;
        max-height: none;
    }

    .hero-container {
        padding: 0 var(--space-5);
    }

    .hero-content {
        max-width: 560px;
    }

    .hero-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-content-wrapper {
        max-width: 560px;
    }

    .hero-scroll-btn {
        bottom: 24px;
        width: 44px;
        height: 44px;
    }

    .hero-scroll-arrow {
        width: 22px;
        height: 22px;
    }
}

/* Mobile (≤ 640px) — compact hero */
@media (max-width: 640px) {
    .hero {
        height: 60vh;
        min-height: 360px;
        max-height: 480px;
    }

    .hero-background::after {
        background: linear-gradient(
            to top,
            rgba(32, 36, 31, 0.88) 0%,
            rgba(32, 36, 31, 0.65) 50%,
            rgba(32, 36, 31, 0.4) 100%
        );
    }

    .hero-container {
        padding: 0 var(--space-4);
        align-items: flex-end;
        padding-bottom: var(--space-8);
    }

    .hero-content {
        max-width: 100%;
        padding-bottom: 60px;
    }

    .hero-label {
        font-size: 0.6875rem;
        margin-bottom: var(--space-3);
        letter-spacing: 0.1em;
    }

    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: var(--space-3);
        line-height: 1.15;
    }

    .hero-description {
        font-size: 0.875rem;
        margin-bottom: var(--space-4);
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-cta {
        padding: 10px var(--space-4);
        font-size: 0.8125rem;
    }

    .hero-cta-icon {
        width: 16px;
        height: 16px;
    }

    .hero-content-wrapper {
        max-width: 100%;
    }

    .hero-indicator {
        width: 36px;
        height: 2px;
    }

    .hero-counter-current {
        font-size: 1.25rem;
    }

    .hero-counter-total,
    .hero-counter-separator {
        font-size: 0.875rem;
    }

    .hero-scroll-btn {
        display: none;
    }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
    .hero {
        height: 55vh;
        min-height: 320px;
        max-height: 420px;
    }

    .hero-title {
        font-size: 1.375rem;
    }

    .hero-container {
        padding-bottom: var(--space-6);
    }
}

/* === SCRIPT SUPPORT === */
.hero-slide:not(.active) {
    pointer-events: none;
}


/* === products-section.css === */
/* ==========================================================================
   Products Section - Best Selling Products
   ========================================================================== */

.products-section {
    padding: var(--space-8) 0;
    background-color: var(--color-cream);
}

.products-section-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.products-section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
}

.products-section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.products-section-description {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

.products-section-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.products-section-footer {
    text-align: center;
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .products-section {
        padding: var(--space-8) 0;
    }

    .products-section-title {
        font-size: 2rem;
    }

    .products-section-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

/* Mobile (≤ 640px) — 2-column compact */
@media (max-width: 640px) {
    .products-section {
        padding: var(--space-6) 0;
    }

    .products-section-header {
        margin-bottom: var(--space-5);
    }

    .products-section-label {
        font-size: 0.6875rem;
        margin-bottom: var(--space-2);
    }

    .products-section-title {
        font-size: 1.5rem;
        margin-bottom: var(--space-3);
    }

    .products-section-description {
        font-size: 0.875rem;
        line-height: 1.55;
        padding: 0 var(--space-3);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .products-section-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        margin-bottom: var(--space-5);
    }

    .products-section-footer {
        margin-top: var(--space-4);
    }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
    .products-section-grid {
        gap: var(--space-2);
    }
}


/* === categories-section.css === */
/* ==========================================================================
   Categories Section - Editorial Discovery Grid
   ========================================================================== */

.categories-section {
    padding: var(--space-8) 0;
    background-color: var(--color-botanical-pale);
}

.categories-section-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.categories-section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.categories-section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

/* === MOSAIC GRID === */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: var(--space-4);
}

.category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-sage);
    cursor: pointer;
}

/* Image hover effect */
.category-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), opacity var(--transition-normal);
}

.category-card-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.category-card:hover .category-card-image-default {
    transform: scale(1.04);
}

.category-card:hover .category-card-image-hover {
    opacity: 1;
    transform: scale(1.04);
}
/* Grid positioning for featured items */
.category-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.category-card:nth-child(4) {
    grid-column: span 2;
}

.category-card:nth-child(7) {
    grid-column: span 2;
}

.category-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.category-card:hover .category-card-image {
    transform: scale(1.04);
}

.category-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(32, 36, 31, 0.7) 0%,
        rgba(32, 36, 31, 0.2) 50%,
        transparent 100%
    );
    transition: background var(--transition-normal);
}

.category-card:hover .category-card-overlay {
    background: linear-gradient(
        to top,
        rgba(32, 36, 31, 0.8) 0%,
        rgba(32, 36, 31, 0.4) 60%,
        rgba(32, 36, 31, 0.1) 100%
    );
}

.category-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    z-index: 1;
}

.category-card:nth-child(1) .category-card-content {
    padding: var(--space-7);
}

.category-card-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.category-card:nth-child(1) .category-card-title {
    font-size: 2rem;
}

.category-card-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(247, 244, 237, 0.8);
}

.category-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-normal);
}

.category-card:hover .category-card-link {
    opacity: 1;
    transform: translateY(0);
}

.category-card-link svg {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .categories-section {
        padding: var(--space-8) 0;
    }

    .categories-section-title {
        font-size: 2rem;
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 220px;
    }

    .category-card:nth-child(1) {
        grid-column: span 3;
        grid-row: span 1;
    }

    .category-card:nth-child(4) {
        grid-column: span 1;
    }

    .category-card:nth-child(7) {
        grid-column: span 3;
    }
}

/* Mobile (≤ 640px) — 2-column compact layout */
@media (max-width: 640px) {
    .categories-section {
        padding: var(--space-6) 0;
    }

    .categories-section-header {
        margin-bottom: var(--space-5);
    }

    .categories-section-label {
        font-size: 0.6875rem;
        margin-bottom: var(--space-2);
    }

    .categories-section-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
        gap: var(--space-3);
    }

    .category-card:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .category-card:nth-child(4) {
        grid-column: span 1;
    }

    .category-card:nth-child(7) {
        grid-column: span 2;
    }

    .category-card-content {
        padding: var(--space-3);
    }

    .category-card:nth-child(1) .category-card-content {
        padding: var(--space-4);
    }

    .category-card-title {
        font-size: 1rem;
        margin-bottom: var(--space-1);
        line-height: 1.2;
    }

    .category-card:nth-child(1) .category-card-title {
        font-size: 1.25rem;
    }

    .category-card-count {
        font-size: 0.75rem;
    }

    .category-card-link {
        display: none;
    }
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
    .categories-grid {
        grid-auto-rows: 140px;
        gap: var(--space-2);
    }

    .category-card-title {
        font-size: 0.875rem;
    }

    .category-card:nth-child(1) .category-card-title {
        font-size: 1.0625rem;
    }
}


/* === brand-values-section.css === */
/* ==========================================================================
   Brand Values Section - Minimalist Numbered Values
   ========================================================================== */

.brand-values-section {
    padding: var(--space-8) 0;
    background-color: var(--color-surface);
}

.brand-values-section-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.brand-values-section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
}

.brand-values-section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

/* === VALUES GRID === */
.brand-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
}

.brand-value-item {
    text-align: center;
}

.brand-value-number {
    display: none;
}

.brand-value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-value-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-primary);
    stroke-width: 1.5;
}

.brand-value-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.brand-value-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 340px;
    margin: 0 auto;
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .brand-values-section {
        padding: var(--space-9) 0;
    }

    .brand-values-section-header {
        margin-bottom: var(--space-7);
    }

    .brand-values-section-title {
        font-size: 2rem;
    }

    .brand-values-grid {
        gap: var(--space-7);
    }

    .brand-value-number {
        font-size: 3rem;
    }
}

/* Mobile (≤ 640px) — hide entirely */
@media (max-width: 640px) {
    .brand-values-section {
        display: none !important;
    }
}


/* === inspiration-section.css === */
/* ==========================================================================
   Inspiration Section - Editorial Magazine Layout
   ========================================================================== */

.inspiration-section {
    padding: var(--space-8) 0;
    background-color: var(--color-cream);
}

.inspiration-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-7);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.inspiration-section-heading {
    flex: 1;
}

.inspiration-section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.inspiration-section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.inspiration-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: gap var(--transition-fast);
}

.inspiration-section-link:hover {
    gap: var(--space-3);
    color: var(--color-primary);
}

.inspiration-section-link svg {
    width: 18px;
    height: 18px;
}

.inspiration-section-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: var(--space-2);
}

/* === GRID === */
.inspiration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.inspiration-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.inspiration-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.inspiration-card-image-link {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--color-botanical-pale);
    aspect-ratio: 4 / 3;
}

.inspiration-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

.inspiration-card-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
}

.inspiration-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
}

.inspiration-card-date {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--space-3);
}

.inspiration-card-title {
    margin-bottom: var(--space-3);
}

.inspiration-card-title a {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.inspiration-card-title a:hover {
    color: var(--color-primary);
}

.inspiration-card-excerpt {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.inspiration-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    transition: gap var(--transition-fast);
}

.inspiration-card-link:hover {
    gap: var(--space-3);
}

.inspiration-card-link svg {
    width: 16px;
    height: 16px;
}

.inspiration-section-footer {
    margin-top: var(--space-6);
    text-align: center;
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .inspiration-section {
        padding: var(--space-8) 0;
    }

    .inspiration-section-title {
        font-size: 2rem;
    }

    .inspiration-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

/* Mobile (≤ 640px) — compact layout */
@media (max-width: 640px) {
    .inspiration-section {
        padding: var(--space-6) 0;
    }

    .inspiration-section-header {
        margin-bottom: var(--space-5);
    }

    .inspiration-section-label {
        font-size: 0.6875rem;
        margin-bottom: var(--space-2);
    }

    .inspiration-section-title {
        font-size: 1.5rem;
        margin-bottom: var(--space-2);
    }

    .inspiration-section-description {
        font-size: 0.875rem;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .inspiration-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .inspiration-card-image-link {
        aspect-ratio: 16 / 10;
    }

    .inspiration-card-badge {
        top: var(--space-3);
        left: var(--space-3);
        padding: var(--space-1) var(--space-2);
        font-size: 0.6875rem;
    }

    .inspiration-card-content {
        padding: var(--space-4);
    }

    .inspiration-card-date {
        font-size: 0.6875rem;
        margin-bottom: var(--space-2);
    }

    .inspiration-card-title {
        margin-bottom: var(--space-2);
    }

    .inspiration-card-title a {
        font-size: 1rem;
        line-height: 1.3;
    }

    .inspiration-card-excerpt {
        font-size: 0.8125rem;
        line-height: 1.55;
        -webkit-line-clamp: 2;
        margin-bottom: var(--space-3);
    }

    .inspiration-card-link {
        font-size: 0.8125rem;
    }

    .inspiration-section-footer {
        margin-top: var(--space-5);
    }
}


/* === instagram-section.css === */
/* ==========================================================================
   Instagram Section - Mosaic Gallery
   ========================================================================== */

.instagram-section {
    padding: var(--space-8) 0;
    background-color: var(--color-surface);
}

.instagram-section-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.instagram-section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.instagram-section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.instagram-section-subtitle {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

.instagram-section-handle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.instagram-section-handle:hover {
    color: var(--color-primary-dark);
}

/* === MOSAIC GRID === */
.instagram-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.instagram-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-botanical-pale);
    cursor: pointer;
}

.instagram-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.instagram-item:hover .instagram-item-image {
    transform: scale(1.08);
}

.instagram-item-overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-primary-rgb) / 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.instagram-item:hover .instagram-item-overlay {
    opacity: 1;
}

.instagram-item-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    transition: all var(--transition-normal);
}

.instagram-item:hover .instagram-item-icon-wrap {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.instagram-item-icon {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

/* === FOOTER === */
.instagram-section-footer {
    text-align: center;
    margin-top: var(--space-6);
}

/* === RESPONSIVE — MOBILE FIRST === */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .instagram-section {
        padding: var(--space-8) 0;
    }

    .instagram-section-title {
        font-size: 2rem;
    }

    .instagram-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile (≤ 640px) — compact gallery */
@media (max-width: 640px) {
    .instagram-section {
        padding: var(--space-6) 0;
    }

    .instagram-section-header {
        margin-bottom: var(--space-5);
    }

    .instagram-section-label {
        font-size: 0.6875rem;
        margin-bottom: var(--space-2);
    }

    .instagram-section-title {
        font-size: 1.5rem;
        margin-bottom: var(--space-2);
    }

    .instagram-section-subtitle {
        font-size: 0.875rem;
        line-height: 1.55;
    }

    .instagram-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
        margin-bottom: var(--space-5);
    }

    .instagram-item {
        border-radius: var(--radius-sm);
    }

    .instagram-item-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .instagram-item-icon {
        width: 20px;
        height: 20px;
    }

    .instagram-section-footer {
        margin-top: var(--space-4);
    }
}


/* === partners-section.css === */
/* ==========================================================================
   Partners Section - Logo Grid
   ========================================================================== */

.partners-section {
    padding: var(--space-9) 0;
    background-color: var(--color-botanical-pale);
}

.partners-section-header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.partners-section-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
    margin-bottom: var(--space-2);
}

.partners-section-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

/* === PARTNERS GRID === */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6);
    align-items: center;
}

.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    min-height: 100px;
}

.partner-item:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.partner-logo {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: filter var(--transition-normal);
}

.partner-item:hover .partner-logo {
    filter: grayscale(0%) opacity(1);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .partners-section {
        padding: var(--space-7) 0;
    }
    
    .partners-section-title {
        font-size: 1.75rem;
    }
    
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
    }
}

@media (max-width: 767px) {
    .partners-section {
        padding: var(--space-6) 0;
    }
    
    .partners-section-header {
        margin-bottom: var(--space-5);
    }
    
    .partners-section-title {
        font-size: 1.5rem;
    }
    
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .partner-item {
        padding: var(--space-4);
        min-height: 80px;
    }
    
    .partner-logo {
        max-height: 48px;
    }
}


/* === products/hero.css === */
/* ==========================================================================
   Products Hero Banner - Aligned with Page Hero Style
   ========================================================================== */

.products-hero {
    position: relative;
    padding: var(--space-10) 0 var(--space-9);
    background-color: var(--color-botanical-pale);
    overflow: hidden;
}

.products-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-botanical-pale) 100%);
    opacity: 0.5;
    z-index: 0;
}

.products-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
}

/* Image-only category banners still use the configured fixed frame. */
.products-hero--image-only {
    padding: 0;
}

.products-hero--image-only::before {
    display: none;
}

.products-hero--image-only .products-hero-image {
    position: absolute;
    display: block;
    height: 100%;
}

.products-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.products-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    text-align: left; /* Align left like page-hero */
}

.products-hero-content--hidden {
    visibility: hidden;
}

.products-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.9);
}

.products-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.products-breadcrumb a:hover {
    color: #ffffff;
}

.products-breadcrumb span {
    color: rgba(255, 255, 255, 0.7);
}

.products-hero-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.products-hero-description {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    max-width: 640px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* === Subcategories Bar === */
.subcategories-bar {
    background-color: var(--color-botanical-pale);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) 0;
}

.subcategories-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.subcategories-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.subcategories-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.subcategory-link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.subcategory-link:hover {
    background-color: var(--color-sage);
    border-color: var(--color-sage);
    color: var(--color-white);
    transform: translateY(-1px);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .products-hero {
        padding: var(--space-8) 0 var(--space-7);
    }
    
    .products-hero-content {
        padding: 0 var(--space-5);
    }
    
    .products-hero-heading {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
    
    .products-hero-description {
        font-size: 1rem;
    }
    
    .subcategories-inner {
        padding: 0 var(--space-5);
    }
}

@media (max-width: 767px) {
    .products-hero {
        padding: var(--space-7) 0 var(--space-6);
    }
    
    .products-hero::before {
        width: 100%;
        opacity: 0.3;
    }
    
    .products-hero-content {
        padding: 0 var(--space-4);
    }
    
    .products-breadcrumb {
        font-size: 0.8125rem;
        margin-bottom: var(--space-4);
    }
    
    .products-hero-heading {
        font-size: clamp(1.75rem, 5vw, 2rem);
        margin-bottom: var(--space-3);
    }
    
    .products-hero-description {
        font-size: 0.9375rem;
    }
    
    .subcategories-bar {
        padding: var(--space-4) 0;
    }
    
    .subcategories-inner {
        padding: 0 var(--space-4);
    }
    
    .subcategories-title {
        font-size: 0.8125rem;
    }
    
    .subcategory-link {
        font-size: 0.875rem;
        padding: var(--space-2) var(--space-3);
    }
}


/* === products/filter-chips.css === */
/* ==========================================================================
   Filter Chips Section
   ========================================================================== */

.filter-chips-section {
    padding: var(--space-5) 0;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.filter-chips-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.filter-chips {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-chips-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.filter-chip-text {
    line-height: 1;
}

.filter-chip-remove {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.filter-chip-clear {
    color: var(--color-error);
    border-color: var(--color-error);
    background-color: rgba(166, 83, 78, 0.05);
}

.filter-chip-clear:hover {
    background-color: rgba(166, 83, 78, 0.1);
    border-color: var(--color-error);
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .filter-chips-container {
        padding: 0 var(--space-4);
    }
    
    .filter-chips {
        gap: var(--space-2);
    }
    
    .filter-chip {
        padding: var(--space-1) var(--space-2);
        font-size: 0.8125rem;
    }
}


/* === products/index.css === */
/* ==========================================================================
   Products Page - Main Layout
   ========================================================================== */

.products-page {
    padding: var(--space-8) 0 var(--space-11);
    background-color: var(--color-cream);
}

.products-page-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .products-page {
        padding: var(--space-6) 0 var(--space-9);
    }
    
    .products-page-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .products-page {
        padding: var(--space-5) 0 var(--space-8);
    }
    
    .products-page-container {
        gap: var(--space-5);
    }
}


/* === products/filter.css === */
/* ==========================================================================
   Product Filter Sidebar - Botanical Style
   ========================================================================== */

/* === FILTER FORM === */
.products-filter-form {
    position: relative;
}

/* === FILTER OVERLAY (Mobile) === */
.products-filter-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(32, 36, 31, 0.5);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.products-filter-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* === FILTER SIDEBAR === */
.products-filter,
.products-filter-sidebar {
    position: sticky;
    top: 96px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* Mobile filter sidebar - slide-in from left */
@media (max-width: 1023px) {
    .products-filter-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        z-index: var(--z-modal);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
        border-radius: 0;
        border: none;
        box-shadow: var(--shadow-lg);
    }
    
    .products-filter-sidebar.active {
        transform: translateX(0);
    }
}

.products-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.products-filter-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
}

/* === FILTER CLOSE BUTTON === */
.products-filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-filter-close:hover {
    background-color: var(--color-cream);
    color: var(--color-text);
}

.products-filter-close svg {
    width: 20px;
    height: 20px;
}

/* === FILTER RESET (legacy) === */
.products-filter-reset {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.products-filter-reset:hover {
    color: var(--color-primary-dark);
}

/* === FILTER BODY === */
.products-filter-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
}

/* === FILTER GROUP === */
.products-filter-group {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.products-filter-group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.products-filter-group-title {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group {
    margin-bottom: var(--space-6);
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group-title {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.filter-group-toggle {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.filter-group.collapsed .filter-group-toggle {
    transform: rotate(180deg);
}

.filter-group-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.filter-group.collapsed .filter-group-content {
    display: none;
}

/* === FILTER OPTIONS === */
.products-filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.products-filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-option input[type="radio"] {
    border-radius: 50%;
}

.filter-option input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.filter-option-label {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-option-count {
    font-size: 0.8125rem;
    color: var(--color-text-lighter);
}

/* === FILTER CHECKBOX === */
.products-filter-checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.products-filter-checkbox:hover {
    border-color: var(--color-primary);
}

.products-filter-checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.products-filter-checkbox[type="radio"] {
    border-radius: 50%;
}

/* === FILTER LABEL & COUNT === */
.products-filter-label {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
}

.products-filter-count {
    font-size: 0.8125rem;
    color: var(--color-text-lighter);
    margin-left: auto;
}

/* === SEARCH IN FILTER === */
.filter-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.products-filter-search-input {
    width: 100%;
    height: 42px;
    padding: 0 var(--space-4);
    padding-right: 40px;
    font-size: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    transition: all var(--transition-fast);
}

.products-filter-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

.products-filter-search-input::placeholder {
    color: var(--color-text-placeholder);
}

.filter-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    transition: all var(--transition-fast);
}

.filter-search-clear:hover {
    background-color: var(--color-cream);
    color: var(--color-text);
}

.filter-search-clear svg {
    width: 16px;
    height: 16px;
}

/* === PRICE RANGE === */
.filter-price-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.filter-price-input {
    flex: 1;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.filter-price-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

.filter-price-separator {
    color: var(--color-text-lighter);
}

/* === CUSTOM PRICE RANGE === */
.filter-custom-price {
    margin-top: var(--space-4);
}

.filter-price-divider {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
}

.filter-price-divider::before,
.filter-price-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border-light);
}

.filter-price-divider span {
    padding: 0 var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-lighter);
    text-transform: uppercase;
}

/* === FILTER FOOTER === */
.products-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
    margin-top: auto;
}

.products-filter-clear {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-filter-clear:hover {
    background-color: var(--color-cream-dark);
    border-color: var(--color-border);
    color: var(--color-text);
}

.products-filter-apply {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-filter-apply:hover {
    background-color: var(--color-primary-dark);
}

/* === COLOR SWATCHES === */
.filter-colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}

.filter-color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.filter-color:hover {
    transform: scale(1.1);
    border-color: var(--color-primary);
}

.filter-color.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* === MOBILE FILTER === */
.products-filter-mobile-toggle {
    display: none;
    width: 100%;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    margin-bottom: var(--space-5);
}

.products-filter-drawer {
    display: none;
}

/* === RESPONSIVE === */
/* All screens: slide-in sidebar */
.products-filter,
.products-filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    z-index: var(--z-modal);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    border-radius: 0;
    border: none;
    box-shadow: var(--shadow-lg);
    display: block;
}

.products-filter-sidebar.active {
    transform: translateX(0);
}

/* Mobile specific adjustments */
@media (max-width: 1023px) {
    .products-filter,
    .products-filter-sidebar {
        width: 300px;
    }
    
    .products-filter-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }
    
    .products-filter-drawer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        background-color: var(--color-surface);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        z-index: var(--z-modal);
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
    }
    
    .products-filter-drawer.active {
        transform: translateX(0);
    }
    
    .products-filter-drawer-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(32, 36, 31, 0.5);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }
    
    .products-filter-drawer-backdrop.active {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
}


/* === products/toolbar.css === */
/* ==========================================================================
   Products Toolbar - Sort & View Controls
   ========================================================================== */

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-6);
}

.products-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.products-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.products-filter-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-filter-button:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.products-filter-button svg {
    width: 18px;
    height: 18px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
}

.products-toolbar-info {
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.products-count {
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.products-toolbar-info strong {
    font-weight: 600;
    color: var(--color-text);
}

.products-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* === SORT SELECT === */
.products-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.products-sort-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
}

.products-sort-select {
    min-width: 200px;
    height: 40px;
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.products-sort-select:hover {
    border-color: var(--color-primary);
}

.products-sort-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

/* === SORT DROPDOWN (New Modern Style) === */
.products-sort-dropdown {
    position: relative;
}

.products-sort-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    min-width: 180px;
    font-size: 0.9375rem;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-sort-button:hover {
    border-color: var(--color-primary);
}

.products-sort-button svg {
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.products-sort-button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.products-sort-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.products-sort-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.products-sort-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.products-sort-item:hover {
    background-color: var(--color-cream);
}

.products-sort-item.active {
    color: var(--color-primary);
    font-weight: 600;
    background-color: var(--color-botanical-pale);
}

/* === VIEW TOGGLE === */
.products-view-toggle {
    display: flex;
    gap: var(--space-1);
}

.products-view-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-view-btn:hover {
    background-color: var(--color-botanical-pale);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.products-view-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.products-view-btn svg {
    width: 20px;
    height: 20px;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .products-toolbar {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    
    .products-toolbar-info {
        width: 100%;
        text-align: center;
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-border-light);
    }
    
    .products-toolbar-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .products-sort {
        flex: 1;
    }
    
    .products-sort-select {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .products-toolbar {
        padding: var(--space-4);
    }
    
    .products-toolbar-actions {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .products-sort {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .products-sort-select {
        width: 100%;
    }
    
    .products-view-toggle {
        display: none;
    }
}


/* === products/grid-section.css === */
/* ==========================================================================
   Products Grid Section Container
   ========================================================================== */

.products-grid-section {
    padding: 0 var(--space-6) var(--space-6);
}

.products-grid-container {
    max-width: var(--container-width);
    margin: 0 auto;
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .products-grid-section {
        padding: 0 var(--space-4) var(--space-5);
    }
}


/* === products/grid.css === */
/* ==========================================================================
   Products Grid - Product Card Layout
   ========================================================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.products-grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.products-grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.products-grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
}

/* === LIST VIEW === */
.products-grid--list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.products-grid--list .product-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-5);
}

.products-grid--list .product-card__image-wrap {
    aspect-ratio: 4 / 5;
}

.products-grid--list .product-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) 0;
}

/* === EMPTY STATE === */
.products-empty {
    grid-column: 1 / -1;
    padding: var(--space-11) var(--space-6);
    text-align: center;
}

.products-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-5);
    color: var(--color-text-lighter);
}

.products-empty-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.products-empty-description {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* === LOADING STATE === */
.products-loading {
    grid-column: 1 / -1;
    padding: var(--space-11) var(--space-6);
    text-align: center;
}

.products-loading-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 4px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
    
    .products-grid--3-cols,
    .products-grid--4-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .products-grid--list .product-card {
        grid-template-columns: 200px 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 767px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .products-grid--2-cols,
    .products-grid--3-cols,
    .products-grid--4-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products-grid--list {
        grid-template-columns: 1fr;
    }
    
    .products-grid--list .product-card {
        grid-template-columns: 1fr;
    }
    
    .products-empty {
        padding: var(--space-8) var(--space-4);
    }
    
    .products-empty-icon {
        width: 64px;
        height: 64px;
    }
    
    .products-empty-title {
        font-size: 1.5rem;
    }
}


/* === products/pagination.css === */
/* ==========================================================================
   Pagination - Botanical Style
   ========================================================================== */

.pagination,
.products-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-9);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-light);
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.pagination-item:hover:not(.active):not(.disabled) {
    background-color: var(--color-botanical-pale);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.pagination-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    pointer-events: none;
}

.pagination-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-item svg {
    width: 20px;
    height: 20px;
}

.pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    color: var(--color-text-lighter);
}

/* === PAGINATION INFO === */
.pagination-info {
    text-align: center;
    margin-top: var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .pagination,
    .products-pagination {
        gap: var(--space-1);
        margin-top: var(--space-7);
        padding-top: var(--space-6);
    }
    
    .pagination-item {
        min-width: 40px;
        height: 40px;
        font-size: 0.875rem;
    }
    
    .pagination-dots {
        min-width: 40px;
        height: 40px;
    }
}


/* === products/detail.css === */
/* ==========================================================================
   Product Detail Page - 50/50 Layout with Gallery
   ========================================================================== */

.product-detail {
    padding: 32px 0 28px;
    background-color: var(--color-cream);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
    font-family: var(--font-sans);
}

.breadcrumb a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb .separator {
    color: var(--color-text-lighter);
}

.breadcrumb .current {
    color: var(--color-text);
    font-weight: 500;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    margin-bottom: var(--space-10);
}

/* === GALLERY === */
.product-gallery {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gallery-item--main {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.gallery-item--main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbnails {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: var(--color-border);
    border-radius: 2px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 2px;
}

.gallery-item--thumb {
    position: relative;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gallery-item--thumb:hover,
.gallery-item--thumb.active {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.gallery-item--thumb.active {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item--thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item .discount-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-error);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-sm);
    z-index: 2;
}

.gallery-item--placeholder {
    opacity: 0.3;
}

/* === PRODUCT INFO === */
.product-info {
    padding-top: var(--space-2);
}

.info-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

.product-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.product-image-disclaimer {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-light);
    background: var(--color-sage);
    border-left: 3px solid var(--color-secondary);
}

/* Price Section */
.price-section {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.price-sale {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.price-original {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-text-lighter);
    text-decoration: line-through;
}

.price-saved {
    font-size: var(--text-sm);
    color: var(--color-error);
    font-weight: 600;
}

/* Product Options */
.product-options {
    margin-bottom: var(--space-6);
}

.options-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-3);
    display: block;
}

.options-buttons {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.option-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.option-btn:hover {
    border-color: var(--color-primary);
    background-color: var(--color-botanical-pale);
}

.option-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Product Description */
.product-description {
    padding: var(--space-4) 0;
    margin-bottom: var(--space-5);
}

.product-description p {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

/* Stock */
.product-stock {
    font-size: var(--text-sm);
    color: var(--color-success);
    font-weight: 500;
    margin-bottom: var(--space-5);
}

/* Cart Form */
.cart-form {
    margin-bottom: var(--space-4);
}

.cart-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.qty-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.qty-btn:hover {
    background-color: var(--color-botanical-pale);
    color: var(--color-primary);
}

.qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.quantity-selector input[type="number"] {
    width: 60px;
    height: 44px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    background: none;
    -moz-appearance: textfield;
}

.quantity-selector input[type="number"]::-webkit-inner-spin-button,
.quantity-selector input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-selector input:focus {
    outline: none;
}

.btn-add-cart {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-cart:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-add-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-buy-now {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    background-color: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-6);
}

.btn-buy-now:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-buy-now:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Benefits */
.product-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-botanical-pale);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.benefit-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary);
}

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

.benefit-text {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

/* Accordion */
.product-accordion {
    border-top: 1px solid var(--color-border);
}

.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) 0;
    background: none;
    border: none;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.accordion-header:hover {
    color: var(--color-primary);
}

.accordion-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform var(--transition-fast);
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    padding-bottom: var(--space-5);
}

.product-spec-list {
    list-style: none;
    padding-left: 0 !important;
}

.accordion-content p {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: var(--space-3);
}

.accordion-content ul,
.accordion-content ol {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-light);
    padding-left: var(--space-5);
}

.accordion-content li {
    margin-bottom: var(--space-2);
}

.accordion-content strong {
    color: var(--color-text);
    font-weight: 600;
}

.accordion-content em {
    font-style: italic;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }
    
    .product-gallery {
        position: static;
    }
    
    .product-title {
        font-size: 2rem;
    }
    
    .price-sale {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .product-detail {
        padding: var(--space-6) 0 var(--space-9);
    }
    
    .product-detail-grid {
        gap: var(--space-6);
    }
    
    .product-gallery {
        grid-template-columns: 1fr;
    }
    
    .gallery-thumbnails {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    
    .product-title {
        font-size: 1.75rem;
    }
    
    .price-sale {
        font-size: 1.5rem;
    }
    
    .cart-actions {
        flex-direction: column;
    }
    
    .quantity-selector {
        width: 100%;
    }
}


/* === products/detail-responsive.css === */
/* ==========================================================================
   Product Detail - Accordion Sections
   ========================================================================== */

.product-accordion {
    margin-top: var(--space-9);
}

.product-accordion-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.product-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.product-accordion-header:hover {
    background-color: var(--color-botanical-pale);
}

.product-accordion-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
}

.product-accordion-icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.product-accordion-item.active .product-accordion-icon {
    transform: rotate(180deg);
}

.product-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.product-accordion-item.active .product-accordion-content {
    max-height: 1000px;
}

.product-accordion-body {
    padding: 0 var(--space-6) var(--space-6);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

.product-accordion-body ul {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
}

.product-accordion-body li {
    padding: var(--space-2) 0;
    padding-left: var(--space-5);
    position: relative;
}

.product-accordion-body li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .product-accordion {
        margin-top: var(--space-7);
    }
    
    .product-accordion-header {
        padding: var(--space-4) var(--space-5);
    }
    
    .product-accordion-title {
        font-size: 1.125rem;
    }
    
    .product-accordion-body {
        padding: 0 var(--space-5) var(--space-5);
        font-size: 0.9375rem;
    }
}


/* === products/recommended.css === */
/* ==========================================================================
   Recommended Products Section
   ========================================================================== */

.product-recommended {
    padding: var(--space-10) 0;
    background-color: var(--color-surface);
    margin-top: var(--space-11);
}

.product-recommended-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.product-recommended-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
}

.product-recommended-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

.product-recommended-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .product-recommended {
        padding: var(--space-8) 0;
        margin-top: var(--space-9);
    }
    
    .product-recommended-title {
        font-size: 2rem;
    }
    
    .product-recommended-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

@media (max-width: 767px) {
    .product-recommended {
        padding: var(--space-7) 0;
        margin-top: var(--space-8);
    }
    
    .product-recommended-header {
        margin-bottom: var(--space-6);
    }
    
    .product-recommended-title {
        font-size: 1.75rem;
    }
    
    .product-recommended-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}


/* === products/editorial.css === */
/* ==========================================================================
   Products Editorial Section
   ========================================================================== */

.products-editorial {
    padding: var(--space-8) 0;
    background-color: var(--color-botanical-pale);
}

.products-editorial-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.products-editorial-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.products-editorial-content {
    padding: var(--space-6);
}

.products-editorial-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.products-editorial-heading {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.products-editorial-description {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
}

.products-editorial-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.products-editorial-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.products-editorial-button svg {
    width: 20px;
    height: 20px;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .products-editorial {
        padding: var(--space-7) 0;
    }
    
    .products-editorial-container {
        gap: var(--space-8);
    }
    
    .products-editorial-image {
        height: 400px;
    }
    
    .products-editorial-heading {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .products-editorial {
        padding: var(--space-6) 0;
    }
    
    .products-editorial-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: 0 var(--space-4);
    }
    
    .products-editorial-image {
        height: 300px;
    }
    
    .products-editorial-content {
        padding: 0;
    }
    
    .products-editorial-heading {
        font-size: 1.75rem;
    }
    
    .products-editorial-description {
        font-size: 1rem;
    }
}


/* === reference-pages.css === */
/* Presentation layer for supplied page references; backend flows stay untouched. */
.reference-seasonal-page,.reference-tree-page,.reference-partner-page{--reference-ink:#2a1f19;--reference-soft:#8f7667;--reference-copper:#b97752;--reference-line:#e8d5c3}
.seasonal-catalog,.tree-product-detail,.partner-waybill-page{background:#f6ece2;color:var(--reference-ink)}
.seasonal-catalog .products-hero{min-height:clamp(360px,48vw,620px);background:#3a2c24}
.seasonal-catalog .products-hero::before{background:linear-gradient(90deg,rgba(42,31,25,.9),rgba(42,31,25,.24))}
.seasonal-catalog .products-hero-content{max-width:760px;padding-block:clamp(4rem,9vw,8rem)}
.seasonal-catalog .products-hero-heading{color:#e2ae84;font-family:var(--font-serif);font-size:clamp(2.8rem,7vw,6.8rem);letter-spacing:-.04em;text-transform:uppercase}
.seasonal-catalog .products-hero-description{color:#f4e8dc;max-width:38rem;font-family:var(--font-serif);font-size:1.1rem}
.seasonal-catalog .products-breadcrumb a,.seasonal-catalog .products-breadcrumb span{color:#dfc0a8}
.seasonal-catalog .products-toolbar,.seasonal-catalog .products-grid-section{max-width:1240px;margin-inline:auto}
.seasonal-catalog .products-toolbar{border-bottom:1px solid var(--reference-line);padding-block:1.4rem}
.seasonal-catalog .products-grid{gap:clamp(1rem,2.2vw,1.8rem)}
.seasonal-catalog .product-card{box-sizing:border-box;padding:0;border:1px solid var(--reference-line);border-radius:22px;background:#fcf7f1;box-shadow:0 26px 50px -42px rgba(42,31,25,.7);overflow:hidden}
.seasonal-catalog .product-card__image-wrap{border-radius:0}.seasonal-catalog .product-card__info{box-sizing:border-box;padding:1rem 1.1rem 1.25rem;border-top:1px solid var(--reference-line)}.seasonal-catalog .product-card__name{color:var(--reference-ink);font-family:var(--font-serif)}.seasonal-catalog .product-card__price{color:var(--reference-copper)}.seasonal-catalog .products-editorial{background:#3a2c24;color:#f4e8dc}
.tree-product-detail{padding-bottom:4rem}.tree-product-detail>.container{max-width:1240px}.tree-product-detail .breadcrumb{color:var(--reference-soft);padding-top:2rem}.tree-product-detail .product-detail-grid{align-items:start;gap:clamp(2rem,5vw,5rem)}.tree-product-detail .product-gallery{position:sticky;top:6rem}.tree-product-detail .gallery-item--main{border-radius:28px;background:#e3eae3;box-shadow:0 36px 70px -44px rgba(42,31,25,.7)}.tree-product-detail .gallery-item--main img{border-radius:28px}.tree-product-detail .product-info{background:#fcf7f1;border:1px solid var(--reference-line);border-radius:28px;padding:clamp(1.4rem,4vw,2.6rem)}.tree-product-detail .product-title{color:var(--reference-copper);font-family:var(--font-serif);letter-spacing:-.025em}.tree-product-detail .product-description,.tree-product-detail .product-meta{color:var(--reference-soft);font-family:var(--font-serif)}.tree-product-detail .product-price{color:var(--reference-copper)}.tree-product-detail .variant-option,.tree-product-detail .quantity-control{border-color:var(--reference-line);background:#f6ece2}.tree-product-detail .btn-primary{background:#8e3f22;border-color:#8e3f22}.tree-product-detail .btn-primary:hover{background:#6e2f1b;border-color:#6e2f1b}
.partner-waybill-page{padding-bottom:3rem}.partner-waybill-page .b2c-section{background:transparent}.partner-waybill-page .b2c-layout{grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:2rem}.partner-waybill-page .b2c-sidebar,.partner-waybill-page .b2c-form-panel{border:1px solid var(--reference-line);border-radius:24px;box-shadow:0 30px 60px -48px rgba(42,31,25,.8)}.partner-waybill-page .b2c-sidebar{background:#3a2c24;color:#f4e8dc}.partner-waybill-page .b2c-sidebar-label,.partner-waybill-page .b2c-sidebar-title{color:#e2ae84}.partner-waybill-page .b2c-sidebar-text,.partner-waybill-page .b2c-benefits li span{color:#d8bca7}.partner-waybill-page .b2c-form-panel{background:#fcf7f1}.partner-waybill-page .b2c-stepper{border-bottom:1px dashed var(--reference-line)}.partner-waybill-page .b2c-step-number{background:#8e3f22;color:#fff}.partner-waybill-page .b2c-step-label,.partner-waybill-page .form-label{color:var(--reference-ink)}.partner-waybill-page .form-input{background:#f6ece2;border-color:var(--reference-line);color:var(--reference-ink)}.partner-waybill-page .form-input:focus{border-color:var(--reference-copper);box-shadow:0 0 0 3px rgba(185,119,82,.16)}.partner-waybill-page .b2c-radio-card{background:#f6ece2;border-color:var(--reference-line)}.partner-waybill-page .b2c-radio-card:has(input:checked){border-color:var(--reference-copper);background:#f3e2d2}.partner-waybill-page .btn-primary{background:#8e3f22;border-color:#8e3f22}
@media (max-width:800px){.tree-product-detail .product-gallery{position:static}.partner-waybill-page .b2c-layout{grid-template-columns:1fr}}
html[data-theme="dark"] .seasonal-catalog,html[data-theme="dark"] .tree-product-detail,html[data-theme="dark"] .partner-waybill-page{background:#211915;color:#eedfd4}
html[data-theme="dark"] .seasonal-catalog .product-card,html[data-theme="dark"] .tree-product-detail .product-info,html[data-theme="dark"] .partner-waybill-page .b2c-form-panel{background:#2c231f;border-color:#433630}
html[data-theme="dark"] .seasonal-catalog .product-card__name,html[data-theme="dark"] .tree-product-detail .product-title,html[data-theme="dark"] .tree-product-detail .product-description,html[data-theme="dark"] .tree-product-detail .product-meta,html[data-theme="dark"] .partner-waybill-page .b2c-step-label,html[data-theme="dark"] .partner-waybill-page .form-label{color:#eedfd4}
html[data-theme="dark"] .tree-product-detail .variant-option,html[data-theme="dark"] .tree-product-detail .quantity-control,html[data-theme="dark"] .partner-waybill-page .form-input,html[data-theme="dark"] .partner-waybill-page .b2c-radio-card{background:#211915;border-color:#433630;color:#eedfd4}
html[data-theme="dark"] .partner-waybill-page .b2c-radio-card:has(input:checked){background:#433630;border-color:#d9a47e}
html[data-theme="dark"] .seasonal-catalog .products-editorial{background:#16100d}


/* === cart.css === */
/* ==========================================================================
   Cart Page - 2-Column Layout
   ========================================================================== */

.cart-page {
    padding: var(--space-8) 0 var(--space-11);
    background-color: var(--color-cream);
}

.cart-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    align-items: start;
}

/* === CART ITEMS === */
.cart-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.cart-items-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-text);
}

.cart-items-count {
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.cart-items-body {
    display: flex;
    flex-direction: column;
}

.cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto auto auto;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border-light);
    align-items: center;
}

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

.cart-item-image {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-botanical-pale);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-name {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    text-decoration: none;
    display: inline-block;
    transition: color var(--transition-fast);
}

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

.cart-item-meta {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-3);
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.cart-item-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cart-item-quantity-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
}

.cart-item-quantity-btn:hover {
    background-color: var(--color-botanical-pale);
    color: var(--color-primary);
    border-color: var(--color-primary-light);
}

.cart-item-quantity-input {
    width: 40px;
    height: 32px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.cart-item-remove {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-error);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
}

.cart-item-remove:hover {
    color: var(--color-text);
}

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

.cart-item-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.cart-item-price-unit {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-2);
}

.cart-item-price-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: right;
}

/* === CART ACTIONS (Continue Shopping / Clear) === */
.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-5) 0;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cart-actions-left,
.cart-actions-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* === ORDER SUMMARY === */
.cart-summary {
    position: sticky;
    top: 96px;
    background-color: var(--color-botanical-pale);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.cart-summary-card {
    display: flex;
    flex-direction: column;
}

.cart-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.cart-summary-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.cart-summary-icon svg {
    width: 20px;
    height: 20px;
}

.cart-summary-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.cart-summary-body {
    display: flex;
    flex-direction: column;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    font-size: 0.9375rem;
}

.cart-summary-label {
    color: var(--color-text);
}

.cart-summary-value {
    font-weight: 600;
    color: var(--color-text);
}

.cart-summary-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-4) 0;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.cart-summary-total-label {
    color: var(--color-text);
}

.cart-summary-total-value {
    font-size: 1.75rem;
    color: var(--color-primary);
}

.cart-summary-actions {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cart-summary-note {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background-color: rgb(var(--color-primary-rgb) / 0.05);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-light);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.cart-summary-note svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* === EMPTY CART === */
.cart-empty {
    padding: var(--space-11) var(--space-6);
    text-align: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.cart-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-5);
    color: var(--color-text-lighter);
}

.cart-empty-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.cart-empty-visual {
    margin-bottom: var(--space-5);
}

.cart-empty-illustration {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-empty-illustration {
        animation: none;
    }
}

.cart-empty-description {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
}

/* === CART ITEM BADGES === */
.cart-item .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
}

.cart-item .badge-error {
    background-color: rgba(166, 83, 78, 0.1);
    color: var(--color-error);
}

.cart-item .badge-warning {
    background-color: rgba(181, 138, 75, 0.1);
    color: var(--color-warning);
}

.cart-item-variant {
    font-size: 0.8125rem;
    color: var(--color-accent);
    margin-top: var(--space-1);
    font-weight: 500;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .cart-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .cart-summary {
        position: static;
    }
}

@media (max-width: 767px) {
    .cart-page {
        padding: var(--space-6) 0 var(--space-9);
    }
    
    .cart-container {
        gap: var(--space-5);
    }
    
    .cart-items,
    .cart-summary {
        padding: var(--space-5);
    }
    
    .cart-items-title {
        font-size: 1.5rem;
    }
    
    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: var(--space-4);
    }
    
    .cart-item-image {
        grid-row: span 2;
    }
    
    .cart-item-price,
    .cart-item-quantity,
    .cart-item-price-total,
    .cart-item-controls {
        grid-column: 2;
    }
    
    .cart-item-controls {
        flex-wrap: wrap;
    }
    
    .cart-summary-title {
        font-size: 1.25rem;
    }
    
    .cart-summary-total-value {
        font-size: 1.5rem;
    }
}


/* === checkout.css === */
/* ==========================================================================
   Checkout Page - Multi-step Form
   ========================================================================== */

.checkout-page {
    padding: var(--space-8) 0 var(--space-11);
    background-color: var(--color-cream);
}

.checkout-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    align-items: start;
}

/* === CHECKOUT FORM === */
.checkout-form {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.checkout-section {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.checkout-section:first-child {
    padding-top: 0;
}

.checkout-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.checkout-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.checkout-section-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.checkout-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.checkout-card-icon svg {
    width: 20px;
    height: 20px;
}

.checkout-section-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.checkout-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* === ORDER SUMMARY (STICKY) === */
.checkout-summary {
    position: sticky;
    top: 96px;
    background-color: var(--color-botanical-pale);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.summary-card {
    display: flex;
    flex-direction: column;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.summary-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.summary-card-icon svg {
    width: 20px;
    height: 20px;
}

.summary-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.summary-card-body {
    display: flex;
    flex-direction: column;
}

/* === SUMMARY ITEMS === */
.summary-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.summary-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.summary-item-image {
    position: relative;
    width: 60px;
    height: 75px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-botanical-pale);
    flex-shrink: 0;
}

.summary-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-quantity-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.summary-item-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.summary-item-name {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.summary-item-qty {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin: 0;
}

.summary-item-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

/* === SUMMARY ROWS === */
.summary-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-4) 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: 0.9375rem;
}

.summary-label {
    color: var(--color-text);
}

.summary-value {
    font-weight: 600;
    color: var(--color-text);
}

.summary-shipping {
    color: var(--color-text-light);
}

.summary-total {
    padding: var(--space-4) 0;
    font-size: 1.125rem;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
}

.summary-total .summary-value {
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* === CHECKOUT INFO === */
.checkout-info {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: rgb(var(--color-primary-rgb) / 0.05);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.info-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-item strong {
    display: block;
    color: var(--color-text);
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.info-item p {
    margin: 0;
    line-height: 1.5;
}

.info-item .zalo-qr {
    text-align: center;
    width: 100%;
}

.info-item .zalo-qr img {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.info-item .zalo-qr p {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .checkout-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .checkout-summary {
        position: static;
    }
}

@media (max-width: 767px) {
    .checkout-page {
        padding: var(--space-6) 0 var(--space-9);
    }

    .checkout-form {
        padding: var(--space-5);
    }

    .checkout-section {
        padding: var(--space-5) 0;
    }

    .checkout-section-title {
        font-size: 1.25rem;
    }

    .summary-item {
        grid-template-columns: 50px 1fr auto;
        gap: var(--space-2);
    }

    .summary-item-image {
        width: 50px;
        height: 60px;
    }

    .checkout-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .checkout-actions > * {
        width: 100%;
    }
}

/* ==========================================================================
   Checkout Success Page
   ========================================================================== */

.checkout-page.success-page {
    padding: var(--space-8) 0 var(--space-11);
    background-color: var(--color-cream);
    min-height: 60vh;
}

.success-container {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.success-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: 50%;
    animation: success-pop 0.5s ease-out;
    box-shadow: 0 8px 30px rgb(var(--color-primary-rgb) / 0.3);
}

@keyframes success-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon svg {
    width: 48px;
    height: 48px;
}

.success-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
}

.success-message {
    font-size: 1.125rem;
    color: var(--color-text-light);
    margin: 0 0 var(--space-8);
    line-height: 1.6;
}

.success-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    text-align: left;
}

.detail-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.detail-card:hover {
    border-color: var(--color-primary-lighter);
    box-shadow: 0 4px 12px rgb(var(--color-primary-rgb) / 0.08);
}

.detail-card svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-card div {
    flex: 1;
}

.detail-card h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.detail-card p {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.detail-card .text-sm {
    font-size: 0.8125rem;
    margin-top: var(--space-2);
}

.detail-card strong {
    color: var(--color-primary);
    font-weight: 600;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

.success-actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
}

.success-actions .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    padding: var(--space-5) var(--space-8);
    font-size: 1.0625rem;
}

.success-actions .btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-botanical);
}

.success-actions .btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: var(--space-4) var(--space-6);
}

.success-actions .btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.success-actions .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: 1px solid var(--color-secondary);
    padding: var(--space-4) var(--space-6);
}

.success-actions .btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(181, 140, 103, 0.3);
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .checkout-page.success-page {
        padding: var(--space-6) 0 var(--space-8);
    }

    .success-title {
        font-size: 1.75rem;
    }

    .success-message {
        font-size: 1rem;
    }

    .success-icon {
        width: 80px;
        height: 80px;
    }

    .success-icon svg {
        width: 40px;
        height: 40px;
    }

    .detail-card {
        padding: var(--space-4);
    }

    .detail-card h3 {
        font-size: 1rem;
    }

    .detail-card p {
        font-size: 0.875rem;
    }

    .success-actions .btn {
        max-width: 100%;
    }
}


/* === contact.css === */
/* ==========================================================================
   Contact Page - Premium Botanical Style
   ========================================================================== */

/* === CONTACT LAYOUT === */
.contact-layout {
    display: block;
    max-width: 800px;
    margin: var(--space-8) auto var(--space-10);
}

/* === CONTACT INFO === */
.contact-info-wrapper .card {
    background-color: var(--color-surface);
}

.contact-info-wrapper .card-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.contact-info-wrapper .card-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.contact-info-wrapper .card-body {
    background-color: var(--color-surface);
}

.contact-intro {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
}

/* === CONTACT METHODS === */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contact-method {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.contact-method:hover {
    background-color: var(--color-surface);
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-md);
}

.contact-icon svg {
    width: 24px;
    height: 24px;
}

.contact-method h3 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

.contact-method p {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    margin: 0;
}

/* === ZALO SECTION === */
.zalo-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.zalo-section h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.zalo-qr {
    text-align: center;
    padding: var(--space-4);
    background-color: var(--color-cream);
    border-radius: var(--radius-md);
}

.zalo-qr img {
    max-width: 200px;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.zalo-qr p {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin: 0;
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
    .contact-layout {
        margin: var(--space-6) auto var(--space-8);
    }
    
    /* Card styling fixes for mobile */
    .contact-info-wrapper .card {
        background-color: var(--color-surface) !important;
        border: 1px solid var(--color-border-light) !important;
    }
    
    .contact-info-wrapper .card-header {
        padding: var(--space-4);
        background-color: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-border-light) !important;
    }
    
    .contact-info-wrapper .card-title {
        font-size: 1.25rem;
        color: var(--color-text) !important;
    }
    
    .contact-info-wrapper .card-body {
        padding: var(--space-4);
        background-color: var(--color-surface) !important;
    }
    
    /* Contact methods spacing */
    .contact-methods {
        gap: var(--space-4);
    }
    
    .contact-method {
        padding: var(--space-3);
        background-color: var(--color-cream) !important;
        border: 1px solid var(--color-border-light) !important;
    }
    
    .contact-icon {
        width: 40px;
        height: 40px;
    }
    
    .contact-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .contact-method h3 {
        font-size: 0.9375rem;
        color: var(--color-text) !important;
    }
    
    .contact-method p {
        font-size: 0.875rem;
        color: var(--color-text-light) !important;
    }
    
    /* Zalo section */
    .zalo-section {
        margin-top: var(--space-5);
        padding-top: var(--space-5);
    }
    
    .zalo-section h3 {
        font-size: 1rem;
        color: var(--color-text) !important;
    }
    
    .zalo-qr {
        padding: var(--space-3);
        background-color: var(--color-cream) !important;
    }
}


/* === account.css === */
/* ==========================================================================
   Account Page - Sidebar + Main Layout
   ========================================================================== */

.account-page {
    padding: var(--space-8) 0 var(--space-11);
    background-color: var(--color-cream);
}

.account-layout {
    display: block;
}

/* === ACCOUNT SIDEBAR === */
.account-sidebar {
    position: sticky;
    top: 96px;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.account-user {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.account-avatar {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    flex-shrink: 0;
}

.account-user-info {
    flex: 1;
    min-width: 0;
}

.account-user-info h3 {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-user-info p {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.account-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    width: 100%;
    font-family: inherit;
}

.account-nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.account-nav-item:hover {
    background-color: var(--color-botanical-pale);
    color: var(--color-primary);
}

.account-nav-item.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.account-nav-item.active:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.account-nav form {
    display: contents;
}

/* === ACCOUNT MAIN === */
.account-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.account-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.account-card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.account-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.account-card-body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* === INQUIRY LIST === */
.inquiry-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.inquiry-item {
    padding: var(--space-5);
    background-color: var(--color-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.inquiry-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-botanical);
}

.inquiry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.inquiry-id {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
}

.inquiry-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-3);
}

.inquiry-message {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 var(--space-4) 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
}

.inquiry-products {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.inquiry-product {
    width: 56px;
    height: 70px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--color-botanical-pale);
    transition: transform var(--transition-fast);
}

.inquiry-product:hover {
    transform: scale(1.05);
}

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

/* === EMPTY STATE (small) === */
.empty-state-sm {
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--color-text-light);
}

.empty-state-sm svg {
    color: var(--color-text-lighter);
    margin-bottom: var(--space-4);
}

.empty-state-sm p {
    margin: 0 0 var(--space-5) 0;
    font-size: 0.9375rem;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    
    .account-sidebar {
        position: static;
    }
}

@media (max-width: 767px) {
    .account-page {
        padding: var(--space-6) 0 var(--space-9);
    }
    
    /* Explicit colors for sidebar */
    .account-sidebar {
        padding: var(--space-5);
    }
    
    .account-user-info h3 {
        color: var(--color-text);
    }
    
    .account-user-info p {
        color: var(--color-text-light);
    }
    
    .account-nav-item {
        color: var(--color-text);
    }
    
    .account-nav-item.active {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
    
    /* Explicit colors for cards */
    .account-card {
        background-color: var(--color-surface) !important;
        border: 1px solid var(--color-border-light) !important;
    }
    
    .account-card-header {
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border-light) !important;
        background-color: var(--color-surface) !important;
    }
    
    .account-card-title {
        font-size: 1.125rem;
        color: var(--color-text) !important;
    }
    
    .account-card-body {
        padding: var(--space-5);
        background-color: var(--color-surface) !important;
    }
    
    /* Explicit colors for form elements */
    .account-card-body .form-label {
        color: var(--color-text);
        font-weight: 500;
    }
    
    .account-card-body .form-input,
    .account-card-body .form-textarea,
    .account-card-body .form-select {
        color: var(--color-text);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
    }
    
    .account-card-body .form-input::placeholder,
    .account-card-body .form-textarea::placeholder {
        color: var(--color-text-placeholder);
        opacity: 1;
    }
    
    /* Explicit colors for inquiry items */
    .inquiry-item {
        padding: var(--space-4);
        background-color: var(--color-cream);
        border: 1px solid var(--color-border-light);
    }
    
    .inquiry-id {
        color: var(--color-primary);
    }
    
    .inquiry-meta {
        color: var(--color-text-light);
    }
    
    .inquiry-message {
        color: var(--color-text);
        background-color: var(--color-surface);
        border-left: 3px solid var(--color-primary);
    }
    
    /* Empty state */
    .empty-state-sm {
        color: var(--color-text-light) !important;
        background-color: transparent !important;
    }
    
    .empty-state-sm p {
        color: var(--color-text-light) !important;
    }
    
    .empty-state-sm svg {
        color: var(--color-text-lighter) !important;
    }
}


/* === profile.css === */
/* ============================================
   Profile Page - User Information & Orders
   ============================================ */

/* Page Layout */
.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    margin-bottom: 80px;
}

@media (max-width: 1024px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Account Sidebar */
.account-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.account-user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--color-botanical-50);
    border-radius: 12px;
    border: 1px solid var(--color-botanical-100);
}

.account-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-botanical-600), var(--color-botanical-500));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.account-user-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.account-user-info p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Account Navigation */
.account-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--color-surface);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
}

.account-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.account-nav-item:hover {
    background: var(--color-botanical-50);
    color: var(--color-botanical-700);
}

.account-nav-item.active {
    background: var(--color-botanical-600);
    color: white;
}

.account-nav-item svg {
    flex-shrink: 0;
}

/* Account Cards */
.account-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.account-card {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}

.account-card-header {
    padding: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

.account-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.account-card-body {
    padding: 24px;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.form-grid .form-group:last-child {
    grid-column: 1 / -1;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.form-input {
    padding: 12px 16px;
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-botanical-600);
    box-shadow: 0 0 0 3px var(--color-botanical-100);
}

.form-input.error {
    border-color: var(--color-error);
}

.form-input:disabled {
    background: var(--color-bg-secondary);
    cursor: not-allowed;
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

.form-error {
    font-size: 0.8125rem;
    color: var(--color-error);
    margin-top: -4px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

/* Alert Messages */
.alert {
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 0.9375rem;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-success {
    background: var(--color-botanical-50);
    color: var(--color-botanical-800);
    border: 1px solid var(--color-botanical-200);
}

.alert-error {
    background: #FEE;
    color: #C00;
    border: 1px solid #FCC;
}

/* Inquiry List */
.inquiry-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inquiry-item {
    padding: 20px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.inquiry-item:hover {
    border-color: var(--color-botanical-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.inquiry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.inquiry-id {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
}

.inquiry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.inquiry-message {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.inquiry-products {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inquiry-product {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: all 0.2s ease;
}

.inquiry-product:hover {
    border-color: var(--color-botanical-400);
    transform: translateY(-2px);
}

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

/* Empty State */
.empty-state-sm {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-sm svg {
    color: var(--color-text-tertiary);
    margin: 0 auto 16px;
}

.empty-state-sm p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 24px 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .account-sidebar {
        order: -1;
    }
    
    .account-user {
        flex-direction: row;
    }
    
    .account-nav {
        flex-direction: row;
        overflow-x: auto;
    }
    
    .account-nav-item {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .account-card-header,
    .account-card-body {
        padding: 20px;
    }
    
    .inquiry-item {
        padding: 16px;
    }
}


/* === favorites.css === */
/* ==========================================================================
   Favorites Page
   ========================================================================== */

.favorites-section {
    padding: var(--space-10) 0;
    background-color: var(--color-cream);
    min-height: 60vh;
}

/* Empty State */
.favorites-empty {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    max-width: 500px;
    margin: 0 auto;
}

.favorites-empty__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    color: var(--color-text-light);
    opacity: 0.5;
}

.favorites-empty__title {
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-3);
    font-family: var(--font-serif);
}

.favorites-empty__text {
    font-size: var(--text-base);
    color: var(--color-text-light);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.favorites-empty .btn {
    margin-top: var(--space-4);
}

/* Favorites Header */
.favorites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.favorites-count {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

/* Pagination */
.pagination-wrap {
    margin-top: var(--space-10);
}

/* Product Grid - reuse from products page */
.favorites-section .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

@media (max-width: 640px) {
    .favorites-section .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .favorites-empty {
        padding: var(--space-10) var(--space-4);
    }
    
    .favorites-empty__icon {
        width: 60px;
        height: 60px;
    }
    
    .favorites-empty__title {
        font-size: var(--text-xl);
    }
}


/* === blog.css === */
/* LNT Journal — editorial inspiration index */

.inspiration-page {
    --journal-bg: var(--color-background);
    --journal-paper: var(--color-surface);
    --journal-ink: var(--color-text);
    --journal-soft: var(--color-text-light);
    --journal-accent: var(--color-accent);
    --journal-deep: var(--color-secondary);
    --journal-line: var(--color-border);
    background: var(--journal-bg);
    color: var(--journal-ink);
    min-height: calc(100dvh - 80px);
}

.inspiration-shell {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.journal-header {
    padding: clamp(2.5rem, 6vw, 5.5rem) 0 2rem;
}

.journal-breadcrumb {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 2.5rem;
    color: var(--journal-soft);
    font-size: .78rem;
    letter-spacing: .04em;
}

.journal-breadcrumb a {
    color: var(--journal-deep);
    text-decoration: none;
}

.journal-breadcrumb a:hover {
    color: var(--journal-accent);
}

.journal-eyebrow,
.journal-kicker,
.journal-mark,
.journal-issue {
    letter-spacing: .2em;
    text-transform: uppercase;
}

.journal-eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 .8rem;
    color: var(--journal-deep);
    font-size: .72rem;
    font-weight: 600;
}

.journal-eyebrow::after {
    width: 54px;
    height: 1px;
    background: currentColor;
    content: '';
}

.journal-header h1 {
    margin: 0;
    color: var(--journal-accent);
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 6.7rem);
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: .95;
}

.journal-intro {
    max-width: 600px;
    margin: 1.2rem 0 2.2rem;
    color: var(--journal-soft);
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-style: italic;
    line-height: 1.7;
}

.journal-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    border-top: 1px solid var(--journal-line);
    padding-top: 1rem;
}

.journal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
}

.journal-tab {
    padding: .45rem .7rem;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--journal-soft);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.journal-tab:hover,
.journal-tab[aria-pressed="true"] {
    border-bottom-color: var(--journal-accent);
    color: var(--journal-accent);
}

.journal-search {
    display: flex;
    flex: 0 1 240px;
    align-items: center;
    border-bottom: 1px solid var(--journal-line);
}

.journal-search input {
    width: 100%;
    min-width: 0;
    padding: .55rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--journal-ink);
    font: inherit;
    font-size: .82rem;
}

.journal-search input::placeholder {
    color: var(--journal-soft);
}

.journal-search button {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--journal-accent);
}

.journal-search svg {
    width: 17px;
    height: 17px;
}

.journal-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: stretch;
    margin: 1.5rem 0 2.5rem;
    overflow: hidden;
    border: 1px solid var(--journal-line);
    border-radius: 4px;
    background: var(--journal-paper);
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.journal-cover {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    background: var(--color-botanical-pale);
}

.journal-cover--feature {
    min-height: 380px;
}

.journal-cover::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 12, 8, .08), transparent 45%, rgba(20, 12, 8, .42));
    content: '';
    pointer-events: none;
}

.journal-cover img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: transform .7s ease;
}

.journal-card:hover .journal-cover img,
.journal-feature:hover .journal-cover img {
    transform: scale(1.045);
}

.journal-mark,
.journal-issue {
    position: absolute;
    z-index: 1;
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.journal-mark {
    top: 1rem;
    left: 1rem;
}

.journal-issue {
    right: 1rem;
    bottom: 1rem;
}

.journal-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}

.journal-kicker {
    margin-bottom: 1rem;
    color: var(--journal-deep);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.5;
}

.journal-feature h2 {
    margin: 0 0 1rem;
    color: var(--journal-ink);
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.3vw, 3.2rem);
    font-weight: 400;
    line-height: 1.08;
}

.journal-feature-copy p,
.journal-card p {
    color: var(--journal-soft);
    line-height: 1.7;
}

.journal-feature-copy p {
    margin: 0 0 1.5rem;
    font-family: var(--font-serif);
    font-size: 1rem;
}

.journal-meta {
    margin-top: auto;
    color: var(--journal-soft);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-bottom: 3rem;
}

.journal-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.journal-card .journal-cover {
    margin-bottom: 1rem;
    border-radius: 4px;
}

.journal-card h3 {
    margin: 0 0 .45rem;
    color: var(--journal-ink);
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.2;
    transition: color var(--transition-fast);
}

.journal-card:hover h3 {
    color: var(--journal-accent);
}

.journal-card p {
    margin: 0 0 .8rem;
    font-size: .88rem;
}

.journal-card .journal-meta {
    margin-top: 0;
    color: var(--journal-deep);
}

.journal-empty {
    margin: 0 auto 4rem;
    color: var(--journal-soft);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
    text-align: center;
}

.journal-pagination {
    display: flex;
    justify-content: center;
    padding: 1rem 0 4rem;
}

.journal-pagination nav {
    display: flex;
    gap: .35rem;
}

.journal-pagination a,
.journal-pagination span {
    display: grid;
    min-width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0 .5rem;
    border: 1px solid var(--journal-line);
    color: var(--journal-soft);
    font-size: .8rem;
}

.journal-pagination a:hover,
.journal-pagination span[aria-current="page"] {
    border-color: var(--journal-accent);
    color: var(--journal-accent);
}

.journal-feature[hidden],
.journal-card[hidden] {
    display: none;
}

@media (max-width: 800px) {
    .inspiration-shell {
        width: min(100% - 32px, 640px);
    }

    .journal-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .journal-search {
        flex-basis: auto;
        width: 100%;
    }

    .journal-feature {
        grid-template-columns: 1fr;
    }

    .journal-cover--feature {
        min-height: 280px;
    }

    .journal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .journal-header {
        padding-top: 2rem;
    }

    .journal-header h1 {
        font-size: clamp(3rem, 17vw, 5rem);
    }

    .journal-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-tab {
        padding-left: 0;
        text-align: left;
    }

    .journal-grid {
        grid-template-columns: 1fr;
    }

    .journal-cover {
        min-height: 240px;
    }
}


/* === auth.css === */
/* ==========================================================================
   Auth Pages - Login & Register
   ========================================================================== */

/* === AUTH PAGE WRAPPER (for password reset pages) === */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-4);
    background-color: var(--color-cream);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-md);
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--space-5);
}

.auth-logo h1 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0;
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.auth-header h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.auth-header p {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    margin: 0;
}

.auth-form {
    margin-bottom: var(--space-4);
}

.auth-links {
    text-align: center;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.auth-links a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-links a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.auth-split {
    display: grid;
    grid-template-columns: 45% 1fr;
    min-height: 100vh;
    height: auto;
}

/* === LEFT PANEL - BOTANICAL === */
.auth-panel {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 100vh;
}

.auth-panel__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(181, 140, 103, 0.15), transparent 60%);
    pointer-events: none;
}

.auth-panel__botanical {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    pointer-events: none;
}

.auth-panel__flower,
.auth-panel__leaf1,
.auth-panel__leaf2,
.auth-panel__leaf3,
.auth-panel__leaf4 {
    position: absolute;
    filter: blur(1px);
}

.auth-panel__flower {
    width: 320px;
    height: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.auth-panel__leaf1 {
    width: 120px;
    top: 15%;
    left: 10%;
    transform: rotate(-15deg);
}

.auth-panel__leaf2 {
    width: 100px;
    top: 20%;
    right: 15%;
    transform: rotate(25deg);
}

.auth-panel__leaf3 {
    width: 90px;
    bottom: 20%;
    left: 15%;
    transform: rotate(10deg);
}

.auth-panel__leaf4 {
    width: 110px;
    bottom: 15%;
    right: 10%;
    transform: rotate(-20deg);
}

.auth-panel__dot1,
.auth-panel__dot2,
.auth-panel__dot3,
.auth-panel__dot4,
.auth-panel__dot5 {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.auth-panel__dot1 { top: 25%; left: 20%; }
.auth-panel__dot2 { top: 35%; right: 25%; }
.auth-panel__dot3 { bottom: 30%; left: 30%; }
.auth-panel__dot4 { bottom: 25%; right: 20%; }
.auth-panel__dot5 { top: 50%; left: 15%; }

.auth-panel__content {
    position: relative;
    z-index: 1;
    max-width: 480px;
    color: var(--color-white);
}

.auth-panel__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}

.auth-panel__brand-icon {
    width: 40px;
    height: 40px;
}

.auth-panel__brand-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
}

.auth-panel__quote {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: var(--space-5);
}

.auth-panel__quote em {
    font-style: italic;
    color: var(--color-secondary-light);
}

.auth-panel__subtext {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(247, 244, 237, 0.85);
    margin-bottom: var(--space-7);
}

.auth-panel__badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.auth-panel__badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: rgba(247, 244, 237, 0.9);
}

.auth-panel__badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* === RIGHT PANEL - FORM === */
.auth-form-panel {
    background-color: var(--color-cream);
    padding: var(--space-7) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    height: auto;
}

.auth-form-wrap {
    width: 100%;
    max-width: 520px;
    margin: auto;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: var(--space-6);
    transition: color var(--transition-fast);
}

.auth-back:hover {
    color: var(--color-primary);
}

.auth-back svg {
    width: 18px;
    height: 18px;
}

.auth-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.auth-tab {
    flex: 1;
    padding: var(--space-4) 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: center;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.auth-tab:hover {
    color: var(--color-text);
}

.auth-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.auth-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.auth-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: 0.875rem;
}

.auth-alert svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.auth-alert--success {
    background-color: rgba(88, 122, 92, 0.1);
    color: var(--color-success);
}

.auth-alert--error {
    background-color: rgba(166, 83, 78, 0.1);
    color: var(--color-error);
}

.auth-submit {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.auth-submit:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-botanical);
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-footer {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

.auth-footer-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-footer-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* === FORM ELEMENTS === */
.form-password-wrap {
    position: relative;
}

.form-password-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.form-password-toggle:hover {
    color: var(--color-primary);
}

.form-password-toggle svg {
    width: 20px;
    height: 20px;
}

.form-checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.form-checkbox {
    width: 18px;
    height: 18px;
}

.form-checkbox-label {
    font-size: 0.9375rem;
    color: var(--color-text);
    cursor: pointer;
}

.form-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-error);
}

.form-error svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .auth-split {
        grid-template-columns: 1fr;
        min-height: auto;
        height: auto;
    }

    .auth-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100vh;
        height: auto;
        padding: var(--space-5) var(--space-4);
    }
}

@media (max-width: 767px) {
    .auth-form-panel {
        padding: var(--space-4) var(--space-3) var(--space-6);
        align-items: flex-start;
        min-height: 100vh;
    }

    .auth-form-wrap {
        padding-top: var(--space-2);
    }

    .auth-card {
        padding: var(--space-5) var(--space-4);
        border-radius: var(--radius-md);
    }

    .auth-tabs {
        margin-bottom: var(--space-4);
    }

    .auth-tab {
        padding: var(--space-3) 0;
        font-size: 0.875rem;
    }

    .auth-header {
        margin-bottom: var(--space-4);
    }

    .auth-title {
        font-size: 1.5rem;
        margin-bottom: var(--space-2);
    }

    .auth-subtitle {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .auth-form {
        margin-bottom: var(--space-3);
    }

    .auth-alert {
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        font-size: 0.8125rem;
    }

    .auth-checkbox-group,
    .form-checkbox-group {
        margin-bottom: var(--space-3);
    }

    .auth-submit {
        padding: var(--space-3) var(--space-4);
        font-size: 0.9375rem;
    }

    .auth-back {
        margin-bottom: var(--space-4);
        font-size: 0.8125rem;
    }

    .auth-footer {
        padding-top: var(--space-3);
        font-size: 0.875rem;
    }

    .auth-links {
        padding-top: var(--space-3);
        font-size: 0.875rem;
    }

    /* Tighten form spacing */
    .auth-form .form-group {
        margin-bottom: var(--space-3);
    }

    .auth-form .form-label {
        margin-bottom: var(--space-2);
        font-size: 0.8125rem;
    }
}

/* Extra small screens (≤ 390px iPhone 12/13/14) */
@media (max-width: 390px) {
    .auth-form-panel {
        padding: var(--space-3) var(--space-2) var(--space-5);
    }

    .auth-card {
        padding: var(--space-4) var(--space-3);
    }

    .auth-title {
        font-size: 1.375rem;
    }
}


/* === chat.css === */
/* =============================================================================
   Customer Chat - Botanical Theme
   Used in: resources/views/chat/index.blade.php
   ============================================================================= */

/* === Page wrapper === */
.chat-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: var(--space-5) var(--container-padding);
    background: var(--color-botanical-pale);
}

@media (min-width: 1024px) {
    .chat-page {
        padding: var(--space-7) var(--container-padding-desktop);
    }
}

/* === Container === */
.chat-container {
    width: 100%;
    max-width: 800px;
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-botanical);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 600px;
}

/* === Header === */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-bottom: 1px solid var(--color-primary-dark);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.chat-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}

.chat-header-text {
    min-width: 0;
}

.chat-header-title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--color-white);
    line-height: 1.2;
}

.chat-header-subtitle {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-weight: 400;
}

/* === Connection status === */
.chat-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-white);
    white-space: nowrap;
}

.chat-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
    animation: chat-pulse 1.5s infinite;
}

.chat-status.connected .status-dot {
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: chat-pulse-green 2s infinite;
}

.chat-status.disconnected .status-dot {
    background: #f87171;
    animation: none;
}

@keyframes chat-pulse {
    0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

@keyframes chat-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* === Messages list === */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background:
        radial-gradient(circle at 20% 20%, rgb(var(--color-primary-rgb) / 0.025) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(181, 140, 103, 0.025) 0%, transparent 40%),
        var(--color-cream);
    min-height: 360px;
    max-height: calc(100vh - 320px);
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-strong, var(--color-text-lighter));
}

/* === Single message === */
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    max-width: 80%;
    animation: chat-fade-in 0.3s ease-out;
}

.chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message.admin {
    align-self: flex-start;
}

@keyframes chat-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-xs);
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}

/* === Message bubble === */
.message-bubble {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--color-border-light);
    max-width: 100%;
    word-wrap: break-word;
    position: relative;
}

.chat-message.user .message-bubble {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-color: var(--color-primary-dark);
    border-bottom-right-radius: 4px;
}

.chat-message.admin .message-bubble {
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}

.message-text {
    font-size: var(--text-base);
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-time {
    font-size: var(--text-xs);
    margin-top: 4px;
    opacity: 0.7;
    line-height: 1;
}

.chat-message.user .message-time {
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
}

.chat-message.admin .message-time {
    color: var(--color-text-light);
}

/* === Empty state === */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-light);
    flex: 1;
}

.chat-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-botanical);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.chat-empty-title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.chat-empty-text {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

/* === Input form === */
.chat-input-form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    position: relative;
}

.chat-input-form::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-primary-light) 50%,
        transparent 100%
    );
}

.chat-input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-cream);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    color: var(--color-text);
    transition: all var(--transition-fast);
    outline: none;
}

.chat-input::placeholder {
    color: var(--color-text-placeholder);
}

.chat-input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.1);
}

.chat-send-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.chat-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.chat-send-btn:active:not(:disabled) {
    transform: translateY(0);
}

.chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-send-btn svg.spinner {
    animation: chat-spin 1s linear infinite;
}

@keyframes chat-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === Mobile responsive === */
@media (max-width: 768px) {
    .chat-page {
        padding: 0;
        min-height: calc(100vh - 60px);
        align-items: stretch;
    }

    .chat-container {
        max-width: 100%;
        min-height: calc(100vh - 60px);
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .chat-header {
        padding: var(--space-4);
    }

    .chat-header-title {
        font-size: var(--text-lg);
    }

    .chat-header-subtitle {
        display: none;
    }

    .chat-status {
        padding: 4px 10px;
        font-size: 11px;
    }

    .chat-status .status-text {
        display: none;
    }

    .chat-messages {
        padding: var(--space-4);
        max-height: none;
        flex: 1;
    }

    .chat-message {
        max-width: 88%;
    }

    .chat-message-avatar {
        width: 28px;
        height: 28px;
    }

    .message-bubble {
        padding: 8px 12px;
    }

    .message-text {
        font-size: var(--text-sm);
    }

    .chat-input-form {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
    }

    .chat-input {
        padding: 10px 14px;
        font-size: var(--text-sm);
    }

    .chat-send-btn {
        width: 40px;
        height: 40px;
    }
}

/* === chat-button.css === */
/* ============================================================
   Floating Chat Widget - Mini chat window (Botanical Theme)
   ============================================================ */

/* Container */
.floating-chat-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.floating-contact-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.floating-contact-btn {
    position: relative; display: flex; width: 48px; height: 48px; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; text-decoration: none; box-shadow: 0 3px 12px rgba(35, 48, 37, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.floating-contact-btn:hover, .floating-contact-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(35, 48, 37, .3); }
.floating-contact-btn::before {
    content: attr(data-label); position: absolute; right: 58px; padding: 7px 10px; border-radius: 7px;
    background: var(--color-surface); color: var(--color-text, #333); font-size: 13px; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(35, 48, 37, .16); opacity: 0; pointer-events: none;
    transform: translateX(4px); transition: opacity .2s ease, transform .2s ease;
}
.floating-contact-btn:hover::before, .floating-contact-btn:focus-visible::before { opacity: 1; transform: translateX(0); }
.floating-contact-btn svg { width: 24px; height: 24px; }
.floating-contact-btn--zalo { background: #0878e8; font-size: 13px; font-weight: 700; }
.floating-contact-btn--facebook { background: #1877f2; }
.floating-contact-btn--phone { background: var(--color-primary, #47734f); }

/* Toggle button */
.floating-chat-btn {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgb(var(--color-primary-rgb) / 0.4),
                0 8px 24px rgb(var(--color-primary-rgb) / 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.2s ease;
    position: relative;
}

.floating-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(var(--color-primary-rgb) / 0.5),
                0 12px 32px rgb(var(--color-primary-rgb) / 0.3);
}

.floating-chat-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* Unread badge */
.floating-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: var(--color-error);
    color: #FFFFFF;
    border-radius: 10px;
    border: 2px solid #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 2px 8px rgba(166, 83, 78, 0.4);
}

/* Pulse animation */
.floating-chat-btn.has-unread::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    opacity: 0;
    animation: chat-pulse 2s ease-out infinite;
}

@keyframes chat-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.3; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* Chat window */
.floating-chat-window {
    position: absolute;
    bottom: 260px;
    right: 0;
    width: 360px;
    height: min(520px, calc(100vh - 290px));
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: chat-open 0.2s ease-out;
}

.floating-chat-window.open {
    display: flex;
}

@keyframes chat-open {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header */
.floating-chat-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #FFFFFF;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.floating-chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.floating-chat-header-info {
    flex: 1;
    min-width: 0;
}

.floating-chat-header-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--color-white);
}

.floating-chat-header-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.floating-chat-header-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: inline-block;
}

/* Messages container */
.floating-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--color-cream);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.floating-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.floating-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.floating-chat-messages::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

/* Message bubble */
.floating-chat-message {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.floating-chat-message.user {
    flex-direction: row-reverse;
}

.floating-chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-botanical);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    flex-shrink: 0;
}

.floating-chat-message.user .floating-chat-message-avatar {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #FFFFFF;
}

.floating-chat-message-bubble {
    max-width: 240px;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.floating-chat-message.admin .floating-chat-message-bubble {
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border-light);
}

.floating-chat-message.user .floating-chat-message-bubble {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
}

.floating-chat-message-time {
    font-size: 11px;
    color: var(--color-text-light);
    margin-top: 4px;
}

.floating-chat-message.user .floating-chat-message-time {
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
}

/* Input form */
.floating-chat-input {
    padding: 16px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.floating-chat-input textarea {
    flex: 1;
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    max-height: 80px;
    min-height: 40px;
    outline: none;
    transition: border-color 0.2s;
}

.floating-chat-input textarea:focus {
    border-color: var(--color-primary);
}

.floating-chat-input button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.floating-chat-input button:hover {
    transform: scale(1.05);
}

.floating-chat-input button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.floating-chat-input button svg {
    width: 20px;
    height: 20px;
}

/* Empty state */
.floating-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-light);
    text-align: center;
    padding: 32px;
}

.floating-chat-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.floating-chat-empty p {
    margin: 0;
    font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .floating-chat-container {
        bottom: 16px;
        right: 16px;
        z-index: 9999;
    }
    
    .floating-chat-btn {
        width: 52px;
        height: 52px;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .floating-chat-btn svg {
        width: 22px;
        height: 22px;
    }
    
    .floating-chat-window {
        width: calc(100vw - 32px);
        height: calc(100vh - 290px);
        max-height: 520px;
        min-height: 260px;
        bottom: 260px;
        z-index: 9998;
    }
}


/* === admin.css === */
/* =============================================================================
   Admin Layout - Core Structure (Responsive)
   ============================================================================= */

.admin-layout {
    display: flex;
    min-height: 100vh;
    background: var(--color-cream);
}

.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 260px;
    transition: margin-left 0.3s ease;
    min-width: 0;
    width: calc(100% - 260px);
}

.admin-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1600px;
    width: 100%;
}

/* Page Header */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-8);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.admin-page-header-left {
    flex: 1;
    min-width: 0;
}

.admin-page-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
}

.admin-page-subtitle {
    font-size: var(--text-base);
    font-family: var(--font-sans);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.admin-page-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
}

.stat-icon-success {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: white;
}

.stat-icon-warning {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: white;
}

.stat-icon-info {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: white;
}

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-label {
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text-light);
    margin-bottom: var(--space-1);
}

.stat-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.2;
}

.stat-badge {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--color-accent-warning);
    margin-top: var(--space-2);
}

/* Admin Grid */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: var(--space-6);
}

/* Admin Card */
.admin-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-cream-dark);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.admin-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.admin-card-title-icon {
    color: var(--color-text-light);
    flex-shrink: 0;
}

.admin-card-body {
    padding: var(--space-6);
}

/* Empty State */
.empty-state-sm {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-light);
}

.empty-state-sm svg {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    opacity: 0.4;
}

.empty-state-sm p {
    margin: 0;
    font-size: var(--text-sm);
}

/* Stock List */
.stock-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.stock-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-botanical-pale);
    border-radius: var(--radius-md);
    gap: var(--space-3);
}

.stock-product {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.stock-product img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.stock-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-category {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-top: 2px;
}

/* Alerts */
.admin-alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    word-wrap: break-word;
}

.admin-alert.success {
    background: rgba(88, 122, 92, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(88, 122, 92, 0.3);
}

.admin-alert.error {
    background: rgba(166, 83, 78, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(166, 83, 78, 0.3);
}

.admin-alert ul {
    margin: 0;
    padding-left: var(--space-5);
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Tablet (< 1024px): collapse sidebar, stack page header */
@media (max-width: 1023px) {
    .admin-main {
        margin-left: 0;
        width: 100%;
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-content {
        padding: var(--space-4);
    }
}

/* Mobile (< 640px): single column, smaller padding */
@media (max-width: 639px) {
    .admin-content {
        padding: var(--space-3);
    }

    .admin-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        margin-bottom: var(--space-5);
    }

    .admin-page-actions {
        width: 100%;
    }

    .admin-page-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        margin-bottom: var(--space-5);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .admin-card-header {
        padding: var(--space-4);
    }

    .admin-card-body {
        padding: var(--space-4);
    }

    .admin-page-title {
        font-size: var(--text-2xl);
    }
}

/* Small Mobile (< 400px) */
@media (max-width: 399px) {
    .admin-content {
        padding: var(--space-2);
    }

    .admin-page-title {
        font-size: var(--text-xl);
    }

    .admin-page-subtitle {
        font-size: var(--text-sm);
    }

    .stat-card {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* === admin/sidebar.css === */
/* =============================================================================
   Admin Sidebar Navigation - Responsive
   ============================================================================= */

/* Sidebar Overlay (mobile only) */
.admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(32, 36, 31, 0.5);
    backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.admin-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s ease;
    overflow: hidden;
}

/* Sidebar Header */
.admin-sidebar-header {
    padding: var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.admin-sidebar-close {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-sidebar-close:hover {
    background: var(--color-cream-dark);
    color: var(--color-text);
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}

.admin-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.admin-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.admin-logo-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-logo-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    white-space: nowrap;
}

/* Sidebar Navigation */
.admin-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
    -webkit-overflow-scrolling: touch;
}

.admin-nav-section {
    margin-bottom: var(--space-6);
}

.admin-nav-section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    padding: 0 var(--space-5);
    margin-bottom: var(--space-2);
}

.admin-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav-item {
    margin: 0;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    color: var(--color-text-light);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
}

.admin-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease;
}

.admin-nav-link:hover {
    background: var(--color-cream-dark);
    color: var(--color-text);
}

.admin-nav-link.active {
    background: var(--color-cream-dark);
    color: var(--color-primary);
    font-weight: 600;
}

.admin-nav-link.active::before {
    height: 24px;
}

.admin-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.admin-nav-text {
    flex: 1;
}

.admin-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-error);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1;
}

/* Sidebar Footer */
.admin-sidebar-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.admin-sidebar-footer .admin-nav-link {
    padding: var(--space-3);
}

.admin-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.admin-user:hover {
    background: var(--color-cream-dark);
}

.admin-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.admin-user-info {
    flex: 1;
    min-width: 0;
}

.admin-user-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-role {
    font-size: var(--text-xs);
    color: var(--color-text-lighter);
    margin: 0;
}

.admin-user-logout {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-user-logout:hover {
    background: var(--color-cream-dark);
    color: var(--color-error);
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first: styles are desktop by default, mobile overrides below
   ============================================================================= */

/* Tablet & Mobile (< 1024px): sidebar hidden off-canvas */
@media (max-width: 1023px) {
    .admin-sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 24px rgba(32, 36, 31, 0.15);
        width: 280px;
        z-index: 100;
    }

    .admin-sidebar.active {
        transform: translateX(0);
    }

    .admin-sidebar-close {
        display: flex;
    }
}

/* Small Mobile (< 480px): full-width sidebar */
@media (max-width: 479px) {
    .admin-sidebar {
        width: 100%;
        max-width: 320px;
    }

    .admin-sidebar-header {
        padding: var(--space-4) var(--space-4);
    }

    .admin-nav-link {
        padding: var(--space-3) var(--space-4);
    }

    .admin-nav-section-title {
        padding: 0 var(--space-4);
    }
}


/* === admin/dashboard.css === */
/* =============================================================================
   Admin Dashboard Components
   ============================================================================= */

/* Topbar */
.admin-topbar {
    height: 64px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.admin-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.admin-menu-toggle:hover {
    background: var(--color-cream-dark);
}

.admin-topbar-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-topbar-search {
    position: relative;
}

.admin-topbar-search input {
    width: 280px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    background: var(--color-surface);
    transition: all 0.15s ease;
}

.admin-topbar-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    width: 320px;
}

.admin-topbar-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    width: 18px;
    height: 18px;
}

.admin-topbar-notifications {
    position: relative;
}

/* Breadcrumb */
.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.admin-breadcrumb-item {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.15s ease;
}

.admin-breadcrumb-item:hover {
    color: var(--color-text);
}

.admin-breadcrumb-separator {
    color: var(--color-text-light);
}

.admin-breadcrumb-current {
    color: var(--color-text);
    font-weight: 600;
}

/* Topbar Actions */
.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-topbar-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}

.admin-topbar-btn:hover {
    background: var(--color-cream-dark);
    color: var(--color-primary);
}

.admin-topbar-btn .badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--color-error);
    border-radius: 50%;
    border: 2px solid var(--color-white);
    font-size: 0;
    min-width: 8px;
}

/* User Menu in Topbar */
.admin-user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all 0.15s ease;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
}

.admin-user-menu:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.admin-user-menu .admin-user-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.admin-user-menu .admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.admin-user-menu .admin-user-name {
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-menu .admin-user-role {
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--color-text-light);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick Stats (Dashboard specific) */
.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.quick-action-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.quick-action-icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-3);
    opacity: 0.9;
}

.quick-action-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
}

.quick-action-description {
    font-size: var(--text-sm);
    margin: 0;
    opacity: 0.9;
}

/* Chart Container */
.chart-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.chart-title {
    font-size: var(--text-xl);
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text);
    margin: 0;
}

.chart-filters {
    display: flex;
    gap: var(--space-2);
}

.chart-filter-button {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    background: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chart-filter-button:hover,
.chart-filter-button.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Activity Feed */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-botanical-pale);
    border-radius: var(--radius-md);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.activity-description {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
}

.activity-time {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    white-space: nowrap;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Tablet & Mobile (< 1024px): show menu toggle, hide sidebar */
@media (max-width: 1023px) {
    .admin-menu-toggle {
        display: flex;
    }

    .admin-topbar-search input {
        width: 200px;
    }

    .admin-topbar-search input:focus {
        width: 240px;
    }
}

/* Mobile (< 640px): hide search, compact topbar */
@media (max-width: 639px) {
    .admin-topbar {
        padding: 0 var(--space-3);
        height: 56px;
    }

    .admin-topbar-search {
        display: none;
    }

    .admin-topbar-left {
        gap: var(--space-2);
    }

    .admin-breadcrumb {
        font-size: var(--text-xs);
    }

    .admin-breadcrumb-item:first-child {
        display: none;
    }

    .admin-breadcrumb-separator:first-of-type {
        display: none;
    }

    .admin-topbar-btn {
        width: 36px;
        height: 36px;
    }

    .admin-topbar-right {
        gap: var(--space-1);
    }

    .dashboard-quick-actions {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .quick-action-card {
        padding: var(--space-4);
    }
}

/* Small Mobile (< 400px) */
@media (max-width: 399px) {
    .admin-topbar {
        padding: 0 var(--space-2);
    }

    .admin-breadcrumb {
        font-size: 11px;
    }

    .admin-topbar-btn {
        width: 32px;
        height: 32px;
    }

    .admin-topbar-btn svg {
        width: 16px;
        height: 16px;
    }
}


/* === admin/tables.css === */
/* =============================================================================
   Admin Tables - Responsive
   ============================================================================= */

.admin-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--color-surface);
}

.admin-table thead {
    background: var(--color-cream-dark);
    border-bottom: 1px solid var(--color-border);
}

.admin-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.admin-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
}

.admin-table tbody tr:last-child {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--color-cream);
}

.admin-table td {
    padding: var(--space-4);
    color: var(--color-text);
    vertical-align: middle;
}

.admin-table .text-mono {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: var(--text-xs);
    color: var(--color-text);
}

.admin-table .text-muted {
    color: var(--color-text-light);
}

/* Table Actions */
.table-actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.admin-table-actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.admin-table-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.admin-table-action:hover {
    background: var(--color-cream);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.admin-table-action.danger:hover {
    background: rgba(166, 83, 78, 0.1);
    color: var(--color-error);
    border-color: rgba(166, 83, 78, 0.3);
}

/* Table Image Cell */
.table-image {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.admin-table-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* Table Product Cell */
.table-product-name {
    font-weight: 600;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-table-product {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-table-product-image {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-table-product-info {
    flex: 1;
    min-width: 0;
}

.admin-table-product-name {
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table-product-meta {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
}

/* Table Pagination */
.admin-table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.admin-table-pagination-info {
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text);
}

.admin-table-pagination-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Pagination Links */
.admin-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    font-family: var(--font-sans);
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Admin Pagination Container - Centers and wraps pagination items */
.admin-card-footer .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.admin-card-footer .pagination-item,
.admin-card-footer .pagination > li > a,
.admin-card-footer .pagination > li > span,
.admin-card-footer a.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.15s ease;
    background: var(--color-surface);
}

.admin-card-footer .pagination-item:hover,
.admin-card-footer .pagination > li > a:hover,
.admin-card-footer a.page-link:hover {
    background: var(--color-cream);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-card-footer .pagination-item.active,
.admin-card-footer .pagination > li.active > span,
.admin-card-footer .pagination > .active > a,
.admin-card-footer .page-item.active .page-link,
.admin-card-footer li.active > a {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    pointer-events: none;
}

.admin-card-footer .pagination-item.disabled,
.admin-card-footer .pagination > li.disabled > span,
.admin-card-footer .pagination > .disabled > a,
.admin-card-footer .page-item.disabled .page-link,
.admin-card-footer li.disabled > a {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pagination info text */
.admin-card-footer .pagination-info,
.admin-card-footer .showing {
    width: 100%;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-top: var(--space-2);
}

/* =============================================================================
   Admin Pagination (Custom - replaces vendor views)
   ============================================================================= */
.admin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.admin-pagination .pagination-btn,
.admin-pagination .pagination-btn:link,
.admin-pagination .pagination-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.15s ease;
    background: var(--color-surface);
    cursor: pointer;
}

.admin-pagination .pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--color-cream);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-pagination .pagination-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    cursor: default;
}

.admin-pagination .pagination-btn.disabled,
.admin-pagination .pagination-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.admin-pagination .pagination-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: var(--color-text-light);
    font-size: var(--text-sm);
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Tablet (< 1024px): compact table */
@media (max-width: 1023px) {
    .admin-table {
        font-size: var(--text-xs);
    }

    .admin-table th,
    .admin-table td {
        padding: var(--space-2) var(--space-3);
    }
}

/* Mobile (< 768px): card-style stacked table */
@media (max-width: 767px) {
    .admin-table-wrapper {
        border: none;
        background: transparent;
        overflow-x: visible;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .admin-table tbody tr:hover {
        background: var(--color-surface);
    }

    .admin-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border-light);
        text-align: right;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .admin-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .admin-table td:first-child {
        padding-top: 0;
    }

    /* Show data-label as label */
    .admin-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        color: var(--color-text-light);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        flex-shrink: 0;
        max-width: 50%;
    }

    /* When no data-label, use a fallback */
    .admin-table td:not([data-label]) {
        justify-content: flex-end;
    }

    /* Product cell with image */
    .admin-table-product {
        flex-direction: row;
        align-items: flex-start;
    }

    .admin-table-product-image {
        width: 48px;
        height: 48px;
    }

    /* Action buttons: full width on mobile */
    .table-actions,
    .admin-table-actions {
        justify-content: flex-end;
        width: 100%;
    }

    /* Image cell on its own row */
    .admin-table td:has(.table-image),
    .admin-table td:has(.admin-table-image) {
        display: block;
        text-align: center;
        padding: var(--space-2) 0;
    }

    .admin-table td:has(.table-image)::before,
    .admin-table td:has(.admin-table-image)::before {
        display: none;
    }

    .table-image,
    .admin-table-image {
        margin: 0 auto;
    }
}

/* Small Mobile (< 400px) */
@media (max-width: 399px) {
    .admin-table td[data-label]::before {
        font-size: 10px;
    }

    .admin-table-product-image {
        width: 40px;
        height: 40px;
    }

    /* Pagination mobile responsive */
    .admin-card-footer {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .admin-card-footer .pagination-item,
    .admin-card-footer .pagination > li > a,
    .admin-card-footer .pagination > li > span,
    .admin-card-footer a.page-link {
        min-width: 32px;
        height: 32px;
        font-size: var(--text-xs);
        padding: 0 var(--space-1);
    }
}


/* === admin/forms.css === */
/* =============================================================================
   Admin Forms
   ============================================================================= */

.admin-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.admin-form-section {
    margin-bottom: var(--space-8);
}

.admin-form-section:last-child {
    margin-bottom: 0;
}

.admin-form-section-title {
    font-size: var(--text-lg);
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
}

.admin-form-section-description {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin: 0 0 var(--space-5) 0;
}

/* Form Grid */
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.admin-form-grid-full {
    grid-column: 1 / -1;
}

/* Form Group */
.admin-form-group {
    margin-bottom: var(--space-5);
}

.admin-form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.admin-form-label-required::after {
    content: '*';
    color: var(--color-error);
    margin-left: 4px;
}

.admin-form-input,
.admin-form-textarea,
.admin-form-select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all 0.15s ease;
}

.admin-form-input:focus,
.admin-form-textarea:focus,
.admin-form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(106, 90, 62, 0.1);
}

.admin-form-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.admin-form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-top: var(--space-2);
}

.admin-form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-2);
}

/* File Upload */
.admin-form-file-upload {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-form-file-upload:hover {
    border-color: var(--color-primary);
    background: var(--color-cream);
}

.admin-form-file-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    color: var(--color-text-light);
}

.admin-form-file-upload-text {
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.admin-form-file-upload-hint {
    font-size: var(--text-xs);
    color: var(--color-text-light);
}

.admin-form-file-input {
    display: none;
}

/* Image Preview */
.admin-form-image-preview {
    margin-top: var(--space-4);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    max-width: 300px;
}

.admin-form-image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

/* Checkbox & Radio */
.admin-form-checkbox,
.admin-form-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.admin-form-checkbox input,
.admin-form-radio input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.admin-form-checkbox label,
.admin-form-radio label {
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

/* Form Actions */
.admin-form-actions {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-6);
}

.admin-form-actions .btn {
    min-width: 120px;
}

/* Filter Form */
.admin-filters {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: nowrap;
}

.input-sm {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all 0.15s ease;
    min-width: 180px;
}

.input-sm:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(106, 90, 62, 0.1);
}

.input-sm::placeholder {
    color: var(--color-text-light);
}

select.input-sm {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B5D4F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 36px;
}

/* Post/Page Edit Layout */
.admin-edit-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
}

.admin-edit-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-edit-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Category/Product Form Layout - matches inline grid */
.admin-content > form > div[style*="grid-template-columns: 1fr 320px"] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
}

.admin-content > form > div > div[style*="flex-direction: column"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Full width inputs in forms */
.admin-card-body input[type="text"],
.admin-card-body input[type="email"],
.admin-card-body input[type="password"],
.admin-card-body input[type="url"],
.admin-card-body input[type="number"],
.admin-card-body input[type="datetime-local"],
.admin-card-body input[type="file"],
.admin-card-body select,
.admin-card-body textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    transition: all 0.15s ease;
}

.admin-card-body input[type="number"] {
    height: 44px;
    padding: 0 var(--space-3);
}

.admin-card-body input[type="file"] {
    border-style: dashed;
    border-width: 2px;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    height: 44px;
}

.admin-card-body input:focus,
.admin-card-body select:focus,
.admin-card-body textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(106, 90, 62, 0.1);
}

.admin-card-body select {
    height: 44px;
    padding: 0 var(--space-3);
    cursor: pointer;
}

.admin-card-body textarea {
    resize: vertical;
    min-height: 100px;
    padding: var(--space-3);
}

.admin-card-body label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-sans);
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.admin-card-body label span[style*="color"] {
    color: var(--color-error);
}

.admin-card-body small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-light);
    line-height: 1.4;
}

/* Form field wrapper spacing */
.admin-card-body > div[style*="flex-direction: column"] > div {
    margin-bottom: var(--space-5);
}

.admin-card-body > div[style*="flex-direction: column"] > div:last-child {
    margin-bottom: 0;
}

/* Checkbox input in labels */
.admin-card-body label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Image preview in forms */
.admin-card-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

/* Image containers with border */
.admin-card-body div[style*="border-radius"][style*="border: 1px"] {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
}

/* Submit button in sidebar */
.admin-content > form > div > div button[type="submit"].btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Tablet (< 1024px): collapse 2-col layouts to 1 col */
@media (max-width: 1023px) {
    .admin-edit-layout {
        grid-template-columns: 1fr;
    }

    .admin-content > form > div[style*="grid-template-columns: 1fr 320px"] {
        grid-template-columns: 1fr;
    }
}

/* Mobile (< 768px): stack form, full-width buttons */
@media (max-width: 767px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form {
        padding: var(--space-4);
    }

    .admin-form-actions {
        flex-direction: column-reverse;
        gap: var(--space-2);
    }

    .admin-form-actions .btn {
        width: 100%;
    }

    .admin-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .input-sm {
        width: 100%;
    }

    .admin-edit-layout {
        gap: var(--space-4);
    }

    .admin-form-file-upload {
        padding: var(--space-4);
    }

    .admin-form-image-preview {
        max-width: 100%;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 479px) {
    .admin-form {
        padding: var(--space-3);
    }

    .admin-form-section-title {
        font-size: var(--text-base);
    }

    .admin-form-input,
    .admin-form-textarea,
    .admin-form-select {
        font-size: 16px; /* Prevent iOS zoom on focus */
        padding: var(--space-3);
    }
}


/* === admin/chat.css === */
/* =============================================================================
   Admin Chat Dashboard - Split Layout (Sidebar + Chat Panel)
   Dark slate theme tokens from theme.css
   ============================================================================= */

/* === Layout root === */
.admin-chat-layout {
    display: flex;
    height: calc(100vh - 80px);
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* =============================================================================
   SIDEBAR (Users List)
   ============================================================================= */
.admin-chat-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: var(--color-botanical);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    overflow: hidden;
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-sage);
}

.chat-sidebar-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    font-family: var(--font-sans);
}

.chat-sidebar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Sidebar scrollable user list */
.admin-chat-sidebar .chat-users-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.admin-chat-sidebar .chat-users-list::-webkit-scrollbar {
    width: 6px;
}

.admin-chat-sidebar .chat-users-list::-webkit-scrollbar-track {
    background: transparent;
}

.admin-chat-sidebar .chat-users-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

/* === User item === */
.chat-user-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    color: var(--color-text-light);
    transition: background var(--transition-fast);
    border-left: 3px solid transparent;
    position: relative;
}

.chat-user-item:hover {
    background: var(--color-sage);
    color: var(--color-text);
}

.chat-user-item.active {
    background: var(--color-sage);
    color: var(--color-text);
    border-left-color: var(--color-primary);
}

.chat-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.chat-user-info {
    flex: 1;
    min-width: 0;
}

.chat-user-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-user-preview {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.preview-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.preview-tag.admin {
    background: rgb(var(--color-primary-rgb) / 0.18);
    color: var(--color-primary);
}

.preview-tag.user {
    background: rgba(181, 140, 103, 0.18);
    color: var(--color-secondary);
}

.preview-muted {
    color: var(--color-text-light);
    font-style: italic;
    opacity: 0.7;
}

.chat-user-meta {
    margin-top: 2px;
}

.chat-user-time {
    font-size: 10px;
    color: var(--color-text-light);
    opacity: 0.7;
}

/* === Unread badge === */
.chat-unread-badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-error);
    color: white;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(166, 83, 78, 0.4);
}

/* =============================================================================
   MAIN CHAT PANEL
   ============================================================================= */
.admin-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-cream);
    min-width: 0;
    overflow: hidden;
}

/* === Header === */
.admin-chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.admin-chat-back-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.admin-chat-back-btn:hover {
    background: var(--color-cream);
    color: var(--color-text);
}

.chat-header-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.chat-user-avatar-lg {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-base);
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.chat-header-user-info {
    min-width: 0;
}

.chat-header-user-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 2px 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-user-email {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Connection status (admin variant) === */
.admin-chat-header .chat-status {
    background: var(--color-cream);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.admin-chat-header .chat-status.connected {
    background: rgba(88, 122, 92, 0.12);
    color: var(--color-success);
    border-color: rgba(88, 122, 92, 0.3);
}

.admin-chat-header .chat-status.disconnected {
    background: rgba(166, 83, 78, 0.12);
    color: var(--color-error);
    border-color: rgba(166, 83, 78, 0.3);
}

/* === Messages area === */
.admin-chat-main .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    background:
        radial-gradient(circle at 15% 25%, rgb(var(--color-primary-rgb) / 0.03) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(181, 140, 103, 0.03) 0%, transparent 40%),
        var(--color-cream);
    min-height: 0;
}

.admin-chat-main .chat-messages::-webkit-scrollbar {
    width: 8px;
}

.admin-chat-main .chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.admin-chat-main .chat-messages::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

/* === Message bubbles === */
.admin-chat-main .chat-message {
    max-width: 70%;
}

.admin-chat-main .chat-message.admin .message-bubble {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border-color: transparent;
    border-bottom-left-radius: 4px;
}

.admin-chat-main .chat-message.admin .message-time {
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

.admin-chat-main .chat-message.user {
    flex-direction: row;
    align-self: flex-end;
}

.admin-chat-main .chat-message.user .message-bubble {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-light);
    border-bottom-right-radius: 4px;
}

.admin-chat-main .chat-message.user .message-time {
    color: var(--color-text-light);
}

.admin-chat-main .chat-message-avatar {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
}

/* === Empty state === */
.admin-chat-main .chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.admin-chat-main .chat-empty-icon {
    background: var(--color-botanical);
    color: var(--color-primary);
}

/* === Input form === */
.admin-chat-main .chat-input-form {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.admin-chat-main .chat-input {
    background: var(--color-cream);
}

.admin-chat-main .chat-input:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.12);
}

.admin-chat-main .chat-send-btn {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* =============================================================================
   MOBILE - Stack layout (sidebar / panel toggle)
   ============================================================================= */
@media (max-width: 768px) {
    .admin-chat-layout {
        height: calc(100vh - 60px);
        margin: 0;
        border-radius: 0;
        border: none;
        position: relative;
    }

    .admin-chat-sidebar {
        width: 100%;
        position: absolute;
        inset: 0;
        z-index: 2;
        transition: transform 0.3s ease;
    }

    /* When viewing a chat: hide sidebar, show panel */
    .admin-chat-layout.is-viewing .admin-chat-sidebar {
        transform: translateX(-100%);
    }

    .admin-chat-main {
        width: 100%;
        position: absolute;
        inset: 0;
        z-index: 1;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .admin-chat-layout.is-viewing .admin-chat-main {
        transform: translateX(0);
    }

    .admin-chat-back-btn {
        display: inline-flex;
    }

    .admin-chat-header {
        padding: var(--space-3) var(--space-4);
    }

    .chat-header-user-name {
        font-size: var(--text-sm);
    }

    .chat-header-user-email {
        font-size: 11px;
    }

    .admin-chat-main .chat-messages {
        padding: var(--space-4);
    }

    .admin-chat-main .chat-message {
        max-width: 88%;
    }

    .chat-user-avatar-lg {
        width: 36px;
        height: 36px;
        font-size: var(--text-sm);
    }

    .admin-chat-main .chat-input-form {
        padding: var(--space-3) var(--space-4);
    }
}