/* ═══════════════════════════════════════════════════════════
   MILORA BEAUTY — main.css  v2
   Poppins · White background · New brand palette
═══════════════════════════════════════════════════════════ */

:root {
    /* Core colors */
    --white:       #FFFFFF;
    --ivory:       #F8F4EF;
    --nude-beige:  #EADFD7;
    --nude-light:  #F5EEE8;
    --gold:        #C8A97E;
    --gold-deep:   #A17A54;
    --gold-pale:   #E8D5B7;
    --gold-light:  #F3EAD8;
    --black:       #1F1F1F;
    --black-soft:  #2C2C2C;
    --grey:        #6B6560;
    --grey-light:  #B8AFA8;
    --grey-border: #E8E2DC;

    /* Semantic aliases */
    --color-bg:           var(--white);
    --color-surface:      var(--white);
    --color-primary:      var(--gold);
    --color-primary-dark: var(--gold-deep);
    --color-text:         var(--black);
    --color-text-muted:   var(--grey);
    --color-border:       var(--gold-pale);

    /* Status colors */
    --color-success: #4A7A4A;
    --color-error:   #9B4040;
    --color-warning: #8B6914;
    --color-info:    #3A6080;

    /* Fonts — Poppins everywhere */
    --font-display: 'Poppins', sans-serif;
    --font-body:    'Poppins', sans-serif;
    --font-brand:   'Cormorant Garamond', Georgia, serif;

    /* Spacing */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* Border radius */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 4px rgba(31, 31, 31, 0.06);
    --shadow-md:   0 4px 20px rgba(31, 31, 31, 0.09);
    --shadow-lg:   0 8px 40px rgba(31, 31, 31, 0.13);
    --shadow-card: 0 2px 16px rgba(200, 169, 126, 0.12);
    --shadow-gold: 0 4px 24px rgba(200, 169, 126, 0.30);

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.4s ease;

    /* Layout */
    --container-max: 1280px;
    --container-pad: clamp(1.25rem, 4vw, 2.5rem);
    --navbar-height: 84px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    background-color: var(--white);
    color: var(--black);
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

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

ul, ol { list-style: none; }

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

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

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 600; }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }

p {
    font-weight: 400;
    color: var(--grey);
    line-height: 1.8;
    font-size: 1rem;
}

/* ── Announcement Bar ──────────────────────────────────────── */
.announcement-bar {
    background: var(--black);
    color: rgba(232, 213, 183, 0.9);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--sp-2) 0;
}

.announcement-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
    padding: 0 var(--container-pad);
}

.announcement-inner .sep { color: var(--gold); opacity: 0.5; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.section        { padding: var(--sp-16) 0; }
.section--lg    { padding: var(--sp-24) 0; }
.section--ivory { background: var(--ivory); }
.section--nude  { background: var(--nude-light); }

/* Gold divider */
.gold-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}
.gold-divider::before,
.gold-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gold-divider-icon { color: var(--gold); font-size: 0.8rem; }

/* Section header */
.section-header {
    text-align: center;
    margin-bottom: var(--sp-12);
}
.section-header .eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: var(--sp-3);
}
.section-header h2 { margin-bottom: var(--sp-4); }
.section-header p {
    max-width: 520px;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--grey);
}

.section-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-12);
}

/* ── Main content offset ───────────────────────────────────── */
.main-content {
    min-height: calc(100vh - var(--navbar-height));
    padding-top: calc(var(--navbar-height) + 1.5rem);
}

/* ── Toasts ────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: calc(var(--navbar-height) + 1rem);
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--white);
    border: 1px solid var(--grey-border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    min-width: 290px;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    animation: toastSlideIn 0.3s ease forwards;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast--success { border-left-color: var(--color-success); }
.toast--error   { border-left-color: var(--color-error); }
.toast--warning { border-left-color: var(--color-warning); }

.toast-icon { font-size: 1rem; flex-shrink: 0; color: var(--gold); }
.toast--success .toast-icon { color: var(--color-success); }
.toast--error   .toast-icon { color: var(--color-error); }
.toast--warning .toast-icon { color: var(--color-warning); }

.toast-message {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1.4;
}

.toast-close {
    color: var(--grey-light);
    font-size: 0.85rem;
    padding: var(--sp-1);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}
.toast-close:hover { color: var(--black); }

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22em 0.7em;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}
.badge--sale       { background: var(--color-error); color: #fff; }
.badge--new        { background: var(--black); color: var(--gold-pale); }
.badge--outofstock { background: var(--grey-light); color: var(--white); }
.badge--lowstock   { background: var(--color-warning); color: #fff; }

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--grey);
    margin-bottom: var(--sp-8);
}
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--grey-border); }
.breadcrumb .current { color: var(--gold); font-weight: 600; }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: var(--sp-20) var(--sp-8); }
.empty-state-icon { font-size: 3.5rem; color: var(--gold-pale); margin-bottom: var(--sp-6); }
.empty-state h3 { font-size: 1.6rem; margin-bottom: var(--sp-4); }
.empty-state p { max-width: 380px; margin: 0 auto var(--sp-8); font-size: 0.95rem; }

/* ── Price display ─────────────────────────────────────────── */
.price-group { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.price-current { font-size: 1.15rem; font-weight: 700; color: var(--black); }
.price-original { font-size: 0.9rem; color: var(--grey-light); text-decoration: line-through; }
.price-save { font-size: 0.72rem; font-weight: 700; color: var(--color-error); text-transform: uppercase; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Utility ───────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .announcement-bar .sep,
    .announcement-inner span:not(:first-child) { display: none; }
    .main-content { padding-top: calc(var(--navbar-height) + 1rem); }
}