/* ═══════════════════════════════════════════════════════════════════
   ZIA WORLD — brand stylesheet v3
   Rose Quartz palette. Restraint first. 100% mobile ready.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* — Pink palette (Rose Quartz, deepened primary) — */
    --zw-pink-deep:    #A8154D;  /* primary, CTAs (deeper, more confident) */
    --zw-pink:         #C2185B;  /* hover, secondary action */
    --zw-pink-vivid:   #E91E63;  /* accents, highlights, very sparingly */
    --zw-pink-soft:    #F9B8CC;  /* card accents, borders */
    --zw-peach:        #FFDAB9;  /* warm accent, badges */
    --zw-pink-blush:   #FFF0F5;  /* section backgrounds */
    --zw-pink-cream:   #FFF8FB;  /* page level subtle bg */

    /* — Neutrals — */
    --zw-ink:          #1A0F14;
    --zw-gray:         #7A6068;
    --zw-line:         #F0D6DE;
    --zw-line-soft:    #F8E6EC;
    --zw-white:        #FFFFFF;

    /* — Gold accent (used sparingly) — */
    --zw-gold:         #B8924A;
    --zw-gold-bg:      #F7EFE0;
    --zw-peach-text:   #B5481B;

    /* — Shadow scale — */
    --zw-sh-1: 0 1px 2px rgba(194,24,91,.04), 0 1px 4px rgba(194,24,91,.04);
    --zw-sh-2: 0 2px 6px rgba(194,24,91,.06), 0 8px 16px rgba(194,24,91,.06);
    --zw-sh-3: 0 4px 12px rgba(194,24,91,.08), 0 16px 32px rgba(194,24,91,.10);
    --zw-sh-4: 0 8px 20px rgba(194,24,91,.12), 0 24px 48px rgba(194,24,91,.14);

    /* — Legacy aliases (keep templates that still reference them working) — */
    --zw-blush:        var(--zw-pink-blush);
    --zw-cream:        var(--zw-pink-cream);
    --zw-coral:        var(--zw-peach);
    --zw-rose-gold:    var(--zw-peach);
    --zw-purple:       var(--zw-pink-deep);
}

/* ── Typography ────────────────────────────────────────────────────
   - Playfair Display: editorial serif for headings & numbers
   - Cormorant Garamond: italic body accents
   - Allura: romantic script for the logo and one moment per page
   - Inter: clean sans for everything else
*/
/* Google Fonts moved from @import to a <link> in head.php — @import is render-blocking
   and serial; <link> is parallel. The same family/weights are loaded there. */

.font-script  { font-family: 'Allura', cursive; font-weight: 400; }
.font-display { font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; }
.font-serif   { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-sans    { font-family: 'Inter', system-ui, sans-serif; }

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--zw-ink);
    background: var(--zw-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--zw-ink);
    margin: 0;
}

/* ── Buttons (disciplined) ─────────────────────────────────────────
   Mixed case by default. Use .btn-pill--upper for short uppercase CTAs.
*/
.btn-pill,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 0 24px;
    height: 46px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
    min-height: 44px;
}
.btn-pill:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
/* Empty button protection — if a button has no text content (e.g. Alpine x-text hasn't booted),
   show at least a tiny dot so the user never sees an empty pink bar. */
.btn-pill:empty::after, .btn:empty::after { content: '…'; opacity: .6; }

.btn-sm { height: 38px; padding: 0 18px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 32px; font-size: 15px; }

.btn--upper, .btn-pill--upper {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
}

/* Primary deep pink. Legacy aliases (btn-pink, btn-purple, btn-black) map here. */
.btn-primary,
.btn-pink,
.btn-purple,
.btn-black {
    background: var(--zw-pink-deep);
    color: #fff;
    box-shadow: 0 2px 8px rgba(194,24,91,.22);
}
.btn-primary:hover, .btn-pink:hover, .btn-purple:hover, .btn-black:hover {
    background: var(--zw-pink);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(194,24,91,.28);
    color: #fff;
}

.btn-secondary,
.btn-soft {
    background: var(--zw-pink-blush);
    color: var(--zw-pink-deep);
}
.btn-secondary:hover, .btn-soft:hover {
    background: var(--zw-peach);
    color: var(--zw-pink-deep);
}

.btn-ghost {
    background: transparent;
    color: var(--zw-pink-deep);
    box-shadow: inset 0 0 0 1.5px var(--zw-pink-deep);
}
.btn-ghost:hover {
    background: var(--zw-pink-deep);
    color: #fff;
    box-shadow: none;
}

.btn-link {
    background: transparent;
    color: var(--zw-pink-deep);
    padding: 0;
    height: auto;
    min-height: 0;
    font-size: 13px;
    font-weight: 600;
}
.btn-link:hover { text-decoration: underline; }

.btn-gold {
    background: var(--zw-gold);
    color: #fff;
}

/* ── Print stylesheet (order confirmation, receipts, anything customer might print) ── */
@media print {
    .zw-header, .zw-broadcast-banner, .zw-popup, .zw-popup__backdrop,
    .float-cart, .float-wa, .zw-to-top, .sticky-cta, .zw-push-prompt,
    footer { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline !important; }
    .zw-card { box-shadow: none !important; border: 1px solid #ccc !important; }
    /* Show product images smaller on paper */
    img { max-width: 200px !important; height: auto !important; page-break-inside: avoid; }
    h1, h2, h3 { page-break-after: avoid; }
}

/* ── Form fields ───────────────────────────────────────────────── */
.zw-input,
.field {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1.5px solid var(--zw-line);
    border-radius: 12px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--zw-ink);
    transition: border-color .15s, box-shadow .15s;
    min-height: 44px;
}
/* Force 16px on mobile to prevent iOS Safari zoom on focus. */
@media (max-width: 767px) {
    .zw-input, .field,
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
    input[type="number"], input[type="search"], input[type="url"], input[type="date"],
    textarea, select {
        font-size: 16px !important;
    }
}
.zw-input:focus, .field:focus {
    outline: 0;
    border-color: var(--zw-pink-deep);
    box-shadow: 0 0 0 4px rgba(194,24,91,.08);
}
textarea.zw-input, textarea.field {
    height: auto;
    padding: 12px 16px;
    min-height: 80px;
    resize: vertical;
}

.zw-label,
.label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--zw-gray);
    margin-bottom: 8px;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.zw-card,
.card {
    background: #fff;
    border: 1px solid var(--zw-line-soft);
    border-radius: 20px;
    box-shadow: var(--zw-sh-2);
}
.zw-card-soft {
    background: var(--zw-pink-cream);
    border-radius: 20px;
    border: 1px solid var(--zw-line-soft);
}
.card-lift {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1);
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--zw-sh-3);
}

/* ── Product card (premium, restrained) ────────────────────────── */
.product {
    background: #fff;
    border: 1px solid var(--zw-line-soft);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--zw-sh-2);
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1);
    text-decoration: none;
    color: inherit;
}
.product:hover { transform: translateY(-4px); box-shadow: var(--zw-sh-3); }
.product__img {
    aspect-ratio: 1;
    background: linear-gradient(180deg, #FFF8FB 0%, #FFEDF2 100%);
    position: relative;
    overflow: hidden;
}
.product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product:hover .product__img img { transform: scale(1.04); }
.product__wishlist {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 9999px;
    background: rgba(255,255,255,.96);
    color: var(--zw-gray);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; border: 0; cursor: pointer;
    box-shadow: var(--zw-sh-1);
    transition: color .15s;
    z-index: 5;
}
.product__wishlist:hover, .product__wishlist.is-on { color: var(--zw-pink-deep); }
.product__ribbon {
    position: absolute; top: 12px; left: 12px;
    background: var(--zw-pink-deep); color: #fff;
    font-size: 9px; padding: 4px 10px; border-radius: 9999px;
    font-weight: 700; letter-spacing: .14em;
    z-index: 5;
}
.product__ribbon--gold { background: var(--zw-gold); }
.product__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.product__brand {
    font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--zw-gray);
}
.product__title {
    font-family: 'Playfair Display', serif;
    font-size: 14.5px; font-weight: 500;
    color: var(--zw-ink);
    margin-top: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.product__rating {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--zw-gray);
}
.product__rating .stars { color: var(--zw-gold); letter-spacing: .5px; }
.product__price-row {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--zw-line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product__price {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--zw-pink-deep);
}
.product__add {
    width: 40px; height: 40px;
    border-radius: 9999px;
    background: var(--zw-pink-deep);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 300; line-height: 1;
    border: 0; cursor: pointer;
    transition: background .15s;
}
.product__add:hover { background: var(--zw-pink); }

.product-sm .product__body { padding: 12px 13px 14px; }
.product-sm .product__title { font-size: 13px; min-height: 2.4em; }
.product-sm .product__price { font-size: 15px; }
.product-sm .product__add { width: 36px; height: 36px; font-size: 16px; }
.product-sm .product__wishlist { width: 30px; height: 30px; font-size: 13px; top: 10px; right: 10px; }

/* ── Brand chips (admin tables) ────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.chip-beauty       { background: var(--zw-pink-blush); color: var(--zw-pink-deep); }
.chip-collections  { background: var(--zw-gold-bg);    color: var(--zw-gold); }
.chip-supply       { background: #FFEEDF;              color: var(--zw-peach-text); }
.chip-success      { background: #DCFCE7; color: #15803D; }
.chip-warn         { background: #FEF3C7; color: #A16207; }
.chip-info         { background: #DBEAFE; color: #1D4ED8; }
.chip-mute         { background: #F3F4F6; color: #6B7280; }

/* ── Status dots ───────────────────────────────────────────────── */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; margin-right: 6px; vertical-align: 1px; }
.dot-success { background: #22C55E; }
.dot-info    { background: #3B82F6; }
.dot-warn    { background: #F59E0B; }
.dot-mute    { background: #9CA3AF; }

/* ── Section headings with ornaments ───────────────────────────── */
.zw-section-title { text-align: center; margin-bottom: 2.5rem; }
.zw-section-title .eyebrow {
    font-family: 'Allura', cursive;
    font-size: 2rem;
    color: var(--zw-pink-deep);
    line-height: 1;
    margin-bottom: .25rem;
}
.zw-section-title h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zw-ink);
    margin: 0;
}
.zw-section-title .ornament {
    display: inline-flex; align-items: center;
    gap: .75rem; margin-top: .75rem;
    color: var(--zw-pink-deep);
}
.zw-section-title .ornament::before,
.zw-section-title .ornament::after {
    content: '';
    width: 32px; height: 1px;
    background: var(--zw-pink-soft);
}

/* ── Admin shell (legacy classes still used by some old templates) ── */
.admin-shell { background: var(--zw-pink-cream); min-height: 100vh; }
.admin-sidebar { background: #fff; border-right: 1px solid var(--zw-line-soft); }
.admin-nav-item {
    color: var(--zw-gray);
    padding: .55rem 1.25rem;
    display: flex; align-items: center; gap: .7rem;
    font-size: .84rem; font-weight: 500;
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1.2;
}
.admin-nav-item:hover     { background: var(--zw-pink-blush); color: var(--zw-pink-deep); }
.admin-nav-item.active {
    color: var(--zw-pink-deep);
    background: linear-gradient(90deg, var(--zw-pink-blush), transparent);
    border-left-color: var(--zw-pink-deep);
    font-weight: 600;
}
.admin-section-label {
    padding: .85rem 1.25rem .25rem;
    font-size: .58rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--zw-pink-deep); opacity: .65; margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ZW ADMIN v3 — Premium portal shell.
   Pure CSS sidebar toggle (no Alpine), bulletproof.
   ═══════════════════════════════════════════════════════════ */
.zw-admin {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--zw-ink);
    background: linear-gradient(180deg, #FFF8FB 0%, #FFF0F5 100%);
    min-height: 100vh;
    margin: 0;
}

.zw-sb-toggle { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.zw-admin-wrap {
    display: flex;
    min-height: 100vh;
}

/* ─── SIDEBAR ─── */
.zw-sb {
    width: 264px;
    background: #fff;
    border-right: 1px solid var(--zw-line);
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh;
    flex-shrink: 0;
    z-index: 30;
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    box-shadow: 1px 0 0 transparent;
}

/* Mobile sidebar: slide-in drawer */
@media (max-width: 1023px) {
    .zw-sb {
        position: fixed; top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        box-shadow: 8px 0 30px rgba(168, 21, 77, .15);
    }
    .zw-sb-toggle:checked ~ .zw-admin-wrap .zw-sb { transform: translateX(0); }
}

.zw-sb__head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--zw-line);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.zw-sb__logo {
    display: inline-flex; align-items: baseline; gap: 6px;
    text-decoration: none; line-height: 1;
}
.zw-sb__close {
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 9999px;
    color: var(--zw-ink);
    font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zw-sb__close:hover { background: var(--zw-pink-blush); color: var(--zw-pink-deep); }
@media (min-width: 1024px) { .zw-sb__close { display: none; } }

.zw-sb__nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--zw-pink-soft) transparent;
}
.zw-sb__nav::-webkit-scrollbar { width: 6px; }
.zw-sb__nav::-webkit-scrollbar-thumb { background: var(--zw-pink-soft); border-radius: 9999px; }

.zw-sb__label {
    padding: 16px 24px 6px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--zw-pink-deep); opacity: .55;
    margin: 0;
}

.zw-sb__link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px;
    color: var(--zw-gray);
    text-decoration: none;
    font-size: 13.5px; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1.2;
}
.zw-sb__link:hover {
    background: var(--zw-pink-blush);
    color: var(--zw-pink-deep);
}
.zw-sb__link.is-active {
    background: linear-gradient(90deg, var(--zw-pink-blush) 0%, transparent 100%);
    color: var(--zw-pink-deep);
    border-left-color: var(--zw-pink-deep);
    font-weight: 600;
}
.zw-sb__icon {
    display: inline-flex; justify-content: center; align-items: center;
    width: 20px; flex-shrink: 0;
    font-size: 14px; color: var(--zw-pink-deep);
    opacity: .7;
}
.zw-sb__link.is-active .zw-sb__icon { opacity: 1; }
.zw-sb__name { flex: 1; min-width: 0; }

/* Sidebar footer: profile + sign out */
.zw-sb__foot {
    padding: 12px 16px;
    border-top: 1px solid var(--zw-line);
    background: var(--zw-pink-cream);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.zw-sb__profile {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--zw-ink);
    transition: background .15s;
    min-width: 0;
}
.zw-sb__profile:hover { background: rgba(255, 255, 255, .8); }
.zw-sb__avatar {
    width: 36px; height: 36px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}
.zw-sb__avatar--letter {
    background: var(--zw-pink-deep);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
}
.zw-sb__profileinfo { flex: 1; min-width: 0; line-height: 1.2; }
.zw-sb__profname {
    margin: 0;
    font-size: 13px; font-weight: 600;
    color: var(--zw-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zw-sb__profrole {
    margin: 2px 0 0;
    font-size: 10px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--zw-pink-deep);
}
.zw-sb__signout {
    width: 36px; height: 36px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    color: var(--zw-gray);
    transition: background .15s, color .15s;
}
.zw-sb__signout:hover { background: #fff; color: var(--zw-pink-deep); }

/* ─── BACKDROP (mobile) ─── */
.zw-sb-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(26, 15, 20, .45);
    z-index: 29;
    cursor: pointer;
}
@media (max-width: 1023px) {
    .zw-sb-toggle:checked ~ .zw-admin-wrap .zw-sb-backdrop { display: block; }
    body:has(.zw-sb-toggle:checked) { overflow: hidden; }
}

/* ─── MAIN ─── */
.zw-main {
    flex: 1;
    display: flex; flex-direction: column;
    min-width: 0;
}

/* Top bar */
.zw-top {
    height: 64px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--zw-line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    position: sticky; top: 0;
    z-index: 20;
}
@media (min-width: 768px) { .zw-top { padding: 0 24px; height: 72px; } }

.zw-top__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zw-top__menu {
    cursor: pointer;
    width: 40px; height: 40px;
    border-radius: 9999px;
    color: var(--zw-ink);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zw-top__menu:hover { background: var(--zw-pink-blush); color: var(--zw-pink-deep); }
@media (min-width: 1024px) { .zw-top__menu { display: none; } }

.zw-top__crumb {
    color: var(--zw-gray);
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.zw-top__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.zw-top__bell {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 9999px;
    color: var(--zw-ink);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.zw-top__bell:hover { background: var(--zw-pink-blush); color: var(--zw-pink-deep); }
.zw-top__bell-dot {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--zw-pink-deep);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9999px;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

.zw-top__profile {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 9999px;
    text-decoration: none; color: var(--zw-ink);
    transition: background .15s;
}
.zw-top__profile:hover { background: var(--zw-pink-blush); }
.zw-top__avatar {
    width: 36px; height: 36px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}
.zw-top__avatar--letter {
    background: var(--zw-pink-deep);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
}
.zw-top__name {
    font-size: 13px; font-weight: 600;
    color: var(--zw-ink);
    max-width: 140px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: none;
}
@media (min-width: 640px) { .zw-top__name { display: inline; } }

/* Flash messages */
.zw-flash {
    margin: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    border-left: 4px solid;
}
@media (min-width: 768px) { .zw-flash { margin: 22px 28px 0; } }
.zw-flash--ok  { background: #ecfdf5; border-color: #10b981; color: #047857; }
.zw-flash--err { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }

/* Page content area */
.zw-page {
    padding: 18px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}
@media (min-width: 768px) { .zw-page { padding: 24px 28px; } }
@media (min-width: 1280px) { .zw-page { padding: 32px 40px; } }

/* ── Sticky glass header for public site (legacy) ──────────────── */
.glass-header {
    background: rgba(255,248,251,0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--zw-line-soft);
}

/* ════════ Broadcast banner (admin announcements) ════════ */
.zw-broadcast-banner {
    background: linear-gradient(90deg, #1A0F14 0%, #2A1820 100%);
    color: #fff;
    position: relative;
    z-index: 41;
}
.zw-broadcast-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
    font-size: 13px;
}
.zw-broadcast-banner__icon { font-size: 16px; flex-shrink: 0; }
.zw-broadcast-banner__text { flex: 1; line-height: 1.4; }
.zw-broadcast-banner__text strong { color: var(--zw-pink-soft, #F8B4CC); margin-right: 4px; }
.zw-broadcast-banner__cta {
    color: #fff;
    background: var(--zw-pink-deep);
    padding: 6px 14px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    transition: background .15s;
}
.zw-broadcast-banner__cta:hover { background: var(--zw-pink); }
.zw-broadcast-banner__close {
    width: 28px; height: 28px;
    border-radius: 9999px;
    border: 0;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.zw-broadcast-banner__close:hover { background: rgba(255,255,255,.2); }
@media (max-width: 640px) {
    .zw-broadcast-banner__text { font-size: 12px; }
    .zw-broadcast-banner__cta  { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   ZW HEADER — GLASSMORPHISM PREMIUM (Mockup 3)
   Three breakpoints: mobile (< 768px) · tablet (768-1023) · desktop (1024+)
   ════════════════════════════════════════════════════════════════ */
.zw-header {
    position: sticky;
    top: 0;
    z-index: 40;
    isolation: isolate;
}

/* Glass main bar */
.zw-header__glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Fallback for browsers without backdrop-filter (older Firefox, some Android WebViews) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .zw-header__glass { background: rgba(255, 255, 255, 0.96); }
}
.zw-header.is-scrolled .zw-header__glass {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--zw-line);
    box-shadow: 0 6px 24px rgba(168, 21, 77, 0.08);
}

.zw-header__row {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 64px;
}
@media (min-width: 768px) { .zw-header__row { padding: 0 24px; height: 72px; gap: 16px; } }
@media (min-width: 1024px) { .zw-header__row { padding: 0 32px; height: 80px; gap: 24px; } }

/* LEFT cluster — hamburger + logo */
.zw-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.zw-header__hamburger {
    width: 40px; height: 40px;
    margin-left: -8px;
    border: 0;
    background: transparent;
    color: var(--zw-ink);
    border-radius: 9999px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zw-header__hamburger:hover { background: rgba(255, 255, 255, 0.6); }
@media (min-width: 1024px) { .zw-header__hamburger { display: none; } }

.zw-header__logo {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    line-height: 1;
    text-decoration: none;
}
.zw-header__logoimg { height: 32px; width: auto; }
@media (min-width: 768px) { .zw-header__logoimg { height: 38px; } }

/* CENTER pill nav — desktop only */
.zw-header__nav {
    display: none;
}
@media (min-width: 1024px) {
    .zw-header__nav {
        display: flex;
        gap: 4px;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 9999px;
        padding: 4px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}
/* Each nav pill sits in its own wrapper so a hover dropdown can attach to it */
.zw-header__navitem {
    position: relative;
}
.zw-header__navpill {
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 11px;
    letter-spacing: .22em;
    font-weight: 600;
    color: var(--zw-ink);
    text-decoration: none;
    transition: all .25s cubic-bezier(.2, .8, .2, 1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.zw-header__navcaret {
    font-size: 9px;
    opacity: .7;
    transition: transform .2s;
}
.zw-header__navitem:hover .zw-header__navcaret { transform: rotate(180deg); }

/* Mega-menu dropdown — appears on hover for items with children */
.zw-header__mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding-top: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 50;
    min-width: 200px;
}
.zw-header__navitem:hover .zw-header__mega,
.zw-header__navitem:focus-within .zw-header__mega {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.zw-header__megainner {
    background: #fff;
    border: 1px solid var(--zw-line);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(168, 21, 77, .12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-width: 220px;
}
.zw-header__megalink {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--zw-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.zw-header__megalink:hover {
    background: var(--zw-pink-blush);
    color: var(--zw-pink-deep);
}
.zw-header__navpill:hover {
    background: var(--zw-pink-deep);
    color: #fff;
    transform: translateY(-1px);
}
.zw-header__navpill.is-active {
    background: var(--zw-pink-deep);
    color: #fff;
}

/* RIGHT icons — circular glass buttons */
.zw-header__icons {
    display: flex;
    align-items: center;
    gap: 6px;
}
@media (min-width: 768px) { .zw-header__icons { gap: 8px; } }

.zw-header__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    color: var(--zw-ink);
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
    position: relative;
}
.zw-header__icon:hover {
    background: var(--zw-pink-deep);
    color: #fff;
    transform: translateY(-1px);
}
/* Account icon — tablet+ only */
.zw-header__icon--md { display: none; }
@media (min-width: 768px) { .zw-header__icon--md { display: flex; } }

.zw-header__badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    background: var(--zw-pink-deep);
    color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 9999px;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
}

/* SEARCH overlay — drops below the header as a glass card */
.zw-header__searchpanel {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    padding: 0 16px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
}
.zw-header.is-search-open .zw-header__searchpanel {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(8px);
}
.zw-header__searchinner {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(168, 21, 77, 0.18);
}
.zw-header__searchform {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--zw-line);
    color: var(--zw-gray);
}
.zw-header__searchform input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: 0;
    font-size: 16px;
    font-family: 'Playfair Display', serif;
    color: var(--zw-ink);
    min-height: 36px;
}
.zw-header__searchform input::placeholder { color: var(--zw-gray); font-style: italic; }
.zw-header__searchclose {
    width: 32px; height: 32px;
    border-radius: 9999px;
    border: 0;
    background: rgba(255, 255, 255, 0.6);
    color: var(--zw-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.zw-header__searchclose:hover { background: var(--zw-pink-deep); color: #fff; }
.zw-header__searchtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.zw-header__searchtag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    font-size: 11px;
    color: var(--zw-ink);
    text-decoration: none;
    transition: all .2s;
}
.zw-header__searchtag:hover { background: var(--zw-pink-deep); color: #fff; border-color: var(--zw-pink-deep); }

/* ════════ Mobile drawer (slides from LEFT, same side as hamburger) ════════ */
.zw-drawer__backdrop {
    position: fixed; inset: 0;
    background: rgba(26,15,20,0);
    z-index: 50;
    pointer-events: none;
    transition: background-color .25s ease;
}
.zw-header.is-drawer-open .zw-drawer__backdrop {
    background: rgba(26,15,20,.45);
    pointer-events: auto;
}
.zw-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(85vw, 380px);
    background: #fff;
    z-index: 51;
    display: flex;
    flex-direction: column;
    box-shadow: 16px 0 40px rgba(168,21,77,.18);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.zw-header.is-drawer-open .zw-drawer {
    transform: translateX(0);
}
.zw-drawer__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--zw-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zw-drawer__search {
    padding: 16px 20px;
    border-bottom: 1px solid var(--zw-line);
    display: flex;
    gap: 8px;
}
.zw-drawer__search input {
    flex: 1;
    height: 42px;
    border: 1.5px solid var(--zw-line);
    border-radius: 9999px;
    padding: 0 16px;
    font-size: 14px;
}
.zw-drawer__search input:focus {
    outline: 0;
    border-color: var(--zw-pink-deep);
    box-shadow: 0 0 0 4px rgba(168,21,77,.08);
}
.zw-drawer__search button {
    width: 42px; height: 42px;
    border-radius: 9999px;
    border: 0;
    background: var(--zw-pink-deep);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.zw-drawer__search button svg { width: 18px; height: 18px; }

.zw-drawer__nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.zw-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: var(--zw-ink);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--zw-line-soft);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.zw-drawer__link:hover,
.zw-drawer__link.is-active { background: var(--zw-pink-blush); color: var(--zw-pink-deep); }
.zw-drawer__chev { color: var(--zw-pink-soft); font-size: 20px; }

.zw-drawer__foot {
    padding: 20px;
    border-top: 1px solid var(--zw-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--zw-pink-cream);
}
.zw-drawer__sec {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--zw-gray);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.zw-drawer__sec svg { width: 18px; height: 18px; }
.zw-drawer__sec:hover { color: var(--zw-pink-deep); }

/* Body scroll lock when drawer is open is handled by JS in header.php
   (the `:has()`/sibling-combinator CSS pattern is unreliable across mobile browsers). */

/* ════════ Hero carousel ════════ */
.zw-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}
.zw-hero-slide.is-active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}
.zw-hero-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.zw-hero-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    border: 0;
    background: var(--zw-pink-soft);
    cursor: pointer;
    transition: all .2s;
    padding: 0;
}
.zw-hero-dot.is-active {
    background: var(--zw-pink-deep);
    width: 28px;
}

/* ── Logo ──────────────────────────────────────────────────────── */
.zw-logo { display: inline-flex; align-items: baseline; gap: .4rem; line-height: 1; }
.zw-logo-script {
    font-family: 'Allura', cursive;
    color: var(--zw-gold);
    font-size: 2rem;
    letter-spacing: .02em;
}
.zw-logo-world {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--zw-ink);
    font-size: .82rem;
    padding-bottom: .15rem;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.gold-shimmer {
    background: linear-gradient(90deg, var(--zw-gold) 0%, #E0BD66 50%, var(--zw-gold) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: shimmer 2.5s ease-in-out 1;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up .5s ease forwards; opacity: 0; }

/* ── Skeleton loader (used during fetch) ───────────────────────── */
@keyframes skel-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
    background: linear-gradient(90deg, #F8E6EC 0%, #FFF0F5 50%, #F8E6EC 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 12px;
    color: transparent !important;
    pointer-events: none;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.zw-toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: var(--zw-pink-deep);
    color: #fff;
    padding: .85rem 1.5rem;
    border-radius: 9999px;
    font-size: .9rem;
    font-weight: 500;
    z-index: 9999;
    box-shadow: var(--zw-sh-3);
}

/* ── Mobile floating actions: WhatsApp, cart, back-to-top
   Layout strategy: WhatsApp + cart stack bottom-RIGHT. Back-to-top sits bottom-LEFT.
   Heights are coordinated so on iPhone SE (375px) nothing overlaps. */
.float-cart,
.float-wa {
    position: fixed;
    z-index: 50;
    color: #fff;
    padding: .85rem 1.25rem;
    border-radius: 9999px;
    box-shadow: var(--zw-sh-3);
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600;
    text-decoration: none;
    min-height: 48px;
    font-size: 14px;
}

/* WhatsApp now lives bottom-RIGHT (primary contact action).
   Mobile: round icon-only button. Tablet+: pill with label.
   bottom uses env(safe-area-inset-bottom) so the iPhone home indicator doesn't overlap. */
.float-wa   { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; background: #25D366; }
.float-wa:hover { background: #1FB155; }
.float-wa svg { width: 22px; height: 22px; }
@media (max-width: 639px) {
    .float-wa {
        width: 52px; height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 9999px;
    }
}

/* Cart also bottom-right, stacks ABOVE WhatsApp so both are reachable */
.float-cart { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; background: var(--zw-pink-deep); }
.float-cart:hover { background: var(--zw-pink); }
body:has(.float-wa) .float-cart { bottom: 80px; }

/* When sticky CTA is on (product detail mobile), lift everything above the bar */
.has-sticky-cta .float-wa   { bottom: 90px; }
.has-sticky-cta .float-cart { bottom: 90px; }
.has-sticky-cta .zw-to-top  { bottom: 90px; }
body:has(.float-wa).has-sticky-cta .float-cart { bottom: 152px; }

/* Tablet up: more breathing room */
@media (min-width: 640px) {
    .float-wa, .float-cart { bottom: 24px; right: 24px; }
    body:has(.float-wa) .float-cart { bottom: 86px; }
}

/* ── Sticky mobile product CTA ─────────────────────────────────── */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--zw-line);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    z-index: 45;
    box-shadow: 0 -8px 24px rgba(194,24,91,.10);
}
.sticky-cta__price {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--zw-pink-deep);
    font-size: 16px;
    line-height: 1;
}
.sticky-cta__add { flex: 1; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ── Alpine.js: hide x-cloak elements before Alpine initialises
   (critical: prevents mobile drawer / dropdowns / modals from flashing open
   on page load, especially on slow networks where Alpine takes a beat to boot)
   ─────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Accessibility ─────────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
*:focus-visible {
    outline: 2px solid var(--zw-pink-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Mobile horizontal snap row (brand cards on home) ─────────── */
.snap-row {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1rem 1.25rem;
    margin: 0 -1.25rem;
    scrollbar-width: none;
}
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: center; flex: 0 0 85%; }
@media (min-width: 768px) {
    .snap-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        padding: 0; margin: 0;
    }
    .snap-row > * { flex: none; }
}