/*
 * Theme Name:        Lumino
 * Theme URI:         https://yoursite.com/lumino-theme
 * Author:            Your Name
 * Author URI:        https://yoursite.com
 * Description:       A minimalist, professional WordPress theme designed for photo printing businesses. 
 *                    Built for seamless integration with the Photo Print plugin, WP 6.8+ compatibility,
 *                    and easy customization throughout.
 * Version:           1.7.0
 * Requires at least: 6.8
 * Tested up to:      6.8
 * Requires PHP:      8.0
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       lumino
 * Tags:              minimalist, photography, printing, e-commerce, custom-colors, custom-logo
 *
 * Date Created:      2026-05-27
 * Date Last Updated: 2026-05-28
 *
 * ============================================================
 * TABLE OF CONTENTS
 * ============================================================
 * 1.  CSS Custom Properties (Variables)
 * 2.  Reset & Base
 * 3.  Typography
 * 4.  Layout & Grid
 * 5.  Header & Navigation
 * 6.  Hero Section
 * 7.  Buttons & CTAs
 * 8.  Cards & Grid Items
 * 9.  Footer
 * 10. Forms
 * 11. WordPress Core Styles (alignments, captions, etc.)
 * 12. Accessibility
 * 13. Animations
 * ============================================================
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   Edit these variables to globally restyle the theme
   ============================================================ */
:root {
    /* -- Colors -- */
    --color-bg:            #F9F8F6;       /* Main background (warm off-white) */
    --color-surface:       #FFFFFF;       /* Cards, panels */
    --color-surface-alt:   #F2EFE9;       /* Alternate surface (section bg) */
    --color-border:        #E5E0D8;       /* Borders, dividers */

    --color-text-primary:  #1C1917;       /* Headings, body */
    --color-text-secondary:#6B6560;       /* Subtitles, meta */
    --color-text-muted:    #9C9590;       /* Placeholders, disabled */

    --color-accent:        #2B3A4A;       /* Primary accent (deep navy) */
    --color-accent-hover:  #1A2533;       /* Accent hover state */
    --color-accent-light:  #E8EDF2;       /* Light accent tint */

    --color-cta:           #B5834A;       /* CTA / Print action (warm amber) */
    --color-cta-hover:     #9A6D39;       /* CTA hover */
    --color-cta-light:     #FAF3EB;       /* CTA tint background */

    --color-success:       #3D7A5C;
    --color-error:         #B04040;
    --color-warning:       #B07A30;

    /* -- Typography -- */
    --font-display:  'Cormorant Garamond', 'Georgia', serif;   /* Headings */
    --font-body:     'DM Sans', 'Helvetica Neue', sans-serif;  /* Body text */
    --font-mono:     'JetBrains Mono', 'Courier New', monospace;

    --text-xs:    0.75rem;     /* 12px */
    --text-sm:    0.875rem;    /* 14px */
    --text-base:  1rem;        /* 16px */
    --text-md:    1.125rem;    /* 18px */
    --text-lg:    1.25rem;     /* 20px */
    --text-xl:    1.5rem;      /* 24px */
    --text-2xl:   2rem;        /* 32px */
    --text-3xl:   2.5rem;      /* 40px */
    --text-4xl:   3.25rem;     /* 52px */
    --text-5xl:   4.5rem;      /* 72px */

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.65;
    --leading-loose:  1.85;

    --tracking-tight:  -0.03em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;
    --tracking-wider:   0.12em;

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

    /* -- Layout -- */
    --max-width:       1280px;
    --max-width-text:  720px;
    --container-pad:   clamp(1.25rem, 5vw, 3rem);
    --section-gap:     clamp(4rem, 10vw, 8rem);

    /* -- Borders & Radius -- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* -- Shadows -- */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-xl:  0 24px 64px rgba(0,0,0,0.12);

    /* -- Transitions -- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -- Nav -- */
    --nav-height: 72px;
}

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

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

ul, ol {
    list-style: none;
}

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

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
}

h1, .h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2, .h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3, .h3 { font-size: clamp(var(--text-xl),  3vw, var(--text-3xl)); }
h4, .h4 { font-size: clamp(var(--text-lg),  2.5vw, var(--text-2xl)); }
h5, .h5 { font-size: var(--text-xl); }
h6, .h6 { font-size: var(--text-lg); }

p {
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    max-width: 70ch;
}

.lead {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-cta);
}

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

/* Prose (entry-content) */
.entry-content > * + * { margin-top: var(--space-5); }
.entry-content h2,
.entry-content h3 { margin-top: var(--space-10); }
.entry-content a {
    color: var(--color-cta);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-base);
}
.entry-content a:hover { text-decoration-color: var(--color-cta); }
.entry-content ul,
.entry-content ol {
    list-style: revert;
    padding-left: var(--space-6);
    color: var(--color-text-secondary);
}
.entry-content blockquote {
    border-left: 3px solid var(--color-cta);
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-text-secondary);
    background: var(--color-cta-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.entry-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-alt);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-sm);
}
.entry-content pre {
    background: var(--color-accent);
    color: #E8EDF2;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
.entry-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ============================================================
   4. LAYOUT & GRID
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.container--narrow {
    max-width: calc(var(--max-width-text) + (var(--container-pad) * 2));
}

.section {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
}

.section--sm {
    padding-top: calc(var(--section-gap) * 0.5);
    padding-bottom: calc(var(--section-gap) * 0.5);
}

.section--dark {
    background-color: var(--color-accent);
    color: #fff;
}
.section--dark p,
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--color-cta); }

.section--alt {
    background-color: var(--color-surface-alt);
}

.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-3 {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.grid--auto-4 {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.flex         { display: flex; }
.flex-center  { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

/* Main content + sidebar layout */
.site-content-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}
.has-sidebar .site-content-area {
    grid-template-columns: 1fr 300px;
}

@media (max-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .has-sidebar .site-content-area { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   5. HEADER & NAVIGATION
   Updated: v1.2.0 — new three-zone layout, cart badge, UM auth
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-height);
    background: rgba(249, 248, 246, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition-base);
}
.site-header.scrolled {
    box-shadow: var(--shadow-sm);
}

/* Three-zone flex row: [Logo] [Nav…] [Actions] */
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* ---- Zone 1: Logo (left, fixed width, no shrink) ---- */
.site-branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.site-logo img {
    height: 40px;
    width: auto;
}
.site-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    line-height: 1;
    white-space: nowrap;
}
.site-title:hover { color: var(--color-accent); }

/* ---- Zone 2: Primary Nav (takes remaining space, left-aligned) ---- */
.primary-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* nav sits left-of-center */
    min-width: 0;
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: nowrap;
}
.nav-menu li { position: relative; }
.nav-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
    color: var(--color-text-primary);
    background: var(--color-surface-alt);
}

/* Dropdown sub-menus
   Fixed v1.3.1: added hover bridge pseudo-element, hide delay, and
   visibility toggling so the dropdown doesn't vanish before you can
   move the cursor from the parent item into the sub-menu.            */
.nav-menu li { position: relative; }

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;              /* flush to parent bottom — bridge covers the gap */
    left: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    padding-top: calc(var(--space-2) + 8px); /* push content below the bridge */

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);

    /* Show instantly, hide with a 200 ms delay so cursor has time to reach it */
    transition:
        opacity    150ms ease,
        transform  150ms ease,
        visibility 0ms   linear 200ms; /* delay only on close */
    z-index: 200;
}

/* Bridge: an invisible 8px tall pseudo-element that spans the full width
   of the sub-menu, sitting above it. It fills the gap between the parent
   nav link and the dropdown so moving the cursor downward never leaves
   the hover zone. */
.nav-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -8px;         /* same height as the gap */
    left: 0;
    right: 0;
    height: 8px;       /* covers the space-2 gap exactly */
    background: transparent;
}

/* Open state — no delay on show */
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu,
.nav-menu li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
    transition:
        opacity    150ms ease,
        transform  150ms ease,
        visibility 0ms   linear 0ms; /* no delay on open */
}

.nav-menu .sub-menu a {
    display: block;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    /* Taller click target */
    line-height: 1.6;
}
.nav-menu .sub-menu a:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}
/* Extra vertical breathing room between sub-menu items */
.nav-menu .sub-menu li + li {
    margin-top: 2px;
}

/* ---- Zone 3: Header Actions (right-pinned) ---- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-left: auto;
}

/* Shared icon button style (search, cart, account) */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.header-icon-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-alt);
}

/* Cart badge */
.cart-count-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: var(--color-cta);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: var(--radius-full);
    pointer-events: none;
}

/* Auth buttons (logged-out) */
.header-auth {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.header-auth__signin {
    font-size: var(--text-xs);
    padding: 0.45rem 1rem;
}
.header-auth__register {
    font-size: var(--text-xs);
    padding: 0.45rem 1rem;
}

/* ---- Mobile Menu Toggle ---- */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.menu-toggle:hover { background: var(--color-surface-alt); }
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.menu-toggle-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.menu-toggle.is-active .menu-toggle-inner span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle-inner span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-toggle.is-active .menu-toggle-inner span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    /* Slightly tighter spacing on medium screens */
    .header-actions { gap: var(--space-1); }
    .header-auth__signin,
    .header-auth__register { padding: 0.4rem 0.75rem; }
}

@media (max-width: 900px) {
    .menu-toggle { display: flex; }

    /* Hide auth text buttons on small screens — user accesses via menu */
    .header-auth { display: none; }

    .primary-navigation {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-bg);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--space-8) var(--container-pad);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        border-top: 1px solid var(--color-border);
        z-index: 99;
    }
    .primary-navigation.is-open { transform: translateX(0); }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    .nav-menu li { width: 100%; }
    .nav-menu a {
        font-size: var(--text-md);
        padding: var(--space-4);
        border-radius: var(--radius-md);
    }
    .nav-menu .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: all;
        box-shadow: none;
        border: none;
        background: var(--color-surface-alt);
        border-radius: var(--radius-md);
        margin-top: var(--space-1);
        margin-left: var(--space-4);
        display: none;
    }
    .nav-menu li.is-open > .sub-menu { display: block; }

    /* Show Sign In / Create Account at the bottom of the mobile menu */
    .primary-navigation::after {
        content: '';
        display: block;
        flex: 1;
    }
}

@media (max-width: 480px) {
    /* On very small screens hide the account icon too — everything is in hamburger */
    .header-account { display: none; }
}

/* ============================================================
   6. HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    min-height: calc(100svh - var(--nav-height));
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-accent);
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}
.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(27, 37, 51, 0.85) 0%,
        rgba(27, 37, 51, 0.6) 60%,
        rgba(27, 37, 51, 0.3) 100%
    );
}
.hero__content {
    position: relative;
    z-index: 1;
    padding: var(--space-24) 0;
    max-width: 680px;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: var(--space-6);
}
.hero__eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-cta);
    border-radius: 2px;
}
.hero__title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: var(--space-6);
}
.hero__title em {
    font-style: italic;
    color: var(--color-cta);
}
.hero__subtitle {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: rgba(255,255,255,0.72);
    margin-bottom: var(--space-10);
    max-width: 52ch;
}
.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.hero--short {
    min-height: 400px;
    align-items: flex-end;
    padding-bottom: var(--space-12);
}
.hero--short .hero__content { padding: 0; }
.hero--short .hero__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }

/* ============================================================
   7. BUTTONS & CTAs
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-spring),
        box-shadow var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--color-cta);
    color: #fff;
    border-color: var(--color-cta);
}
.btn--primary:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    box-shadow: 0 6px 20px rgba(181, 131, 74, 0.35);
}

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

.btn--outline-dark {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.btn--outline-dark:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-text-secondary);
}

.btn--ghost {
    background: transparent;
    color: var(--color-cta);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}
.btn--ghost:hover {
    color: var(--color-cta-hover);
    transform: translateX(4px);
}

.btn--lg {
    padding: 1rem 2.25rem;
    font-size: var(--text-base);
}
.btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: var(--text-xs);
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.btn--ghost:hover svg { transform: translateX(4px); }

/* ============================================================
   8. CARDS & GRID ITEMS
   ============================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.card__image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-surface-alt);
}
.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__body {
    padding: var(--space-6);
}
.card__eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: var(--space-2);
}
.card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}
.card__title a { transition: color var(--transition-fast); }
.card__title a:hover { color: var(--color-cta); }
.card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card__price {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}
.card__price .original {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-right: var(--space-2);
    font-weight: 400;
}

/* Product Card (photo print specific) */
.product-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.product-card__badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: var(--color-cta);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    z-index: 1;
}
.product-card__image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-surface-alt);
}
.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.product-card:hover .product-card__image img { transform: scale(1.05); }
.product-card__info {
    padding: var(--space-5) var(--space-5) var(--space-4);
}
.product-card__size {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.product-card__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    margin-bottom: var(--space-3);
}
.product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Section: feature strip */
.feature-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.feature-strip__item {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-right: 1px solid var(--color-border);
}
.feature-strip__item:last-child { border-right: none; }
.feature-strip__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--color-cta);
}
.feature-strip__text strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}
.feature-strip__text span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px,100%), 1fr));
    gap: var(--space-8);
    counter-reset: steps;
}
.step-item {
    position: relative;
    padding-top: var(--space-12);
}
.step-item::before {
    counter-increment: steps;
    content: counter(steps, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 300;
    color: var(--color-border);
    line-height: 1;
}
.step-item__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}
.step-item__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

/* Section header utility */
.section-header {
    margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}
.section-header--center { text-align: center; }
.section-header--center p { margin-left: auto; margin-right: auto; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.site-footer {
    background: var(--color-accent);
    color: rgba(255,255,255,0.72);
    margin-top: auto;
}
.footer-top {
    padding: var(--space-16) 0;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-12);
}
.footer-brand .site-title { color: #fff; font-size: var(--text-xl); }
.footer-brand .site-description {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    line-height: var(--leading-loose);
    max-width: 36ch;
}
.footer-socials {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.6);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.footer-social-link:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
    background: rgba(181,131,74,0.1);
}
.footer-col h4 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--space-5);
}
.footer-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.footer-menu a {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    transition: color var(--transition-fast);
}
.footer-menu a:hover { color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: var(--space-6) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.footer-bottom p {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    max-width: none;
}
.footer-legal {
    display: flex;
    gap: var(--space-5);
}
.footer-legal a {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    transition: color var(--transition-fast);
}
.footer-legal a:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 1024px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: span 2; }
}
@media (max-width: 640px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   10. FORMS
   ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.form-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}
.form-label .required { color: var(--color-cta); margin-left: var(--space-1); }
.form-control {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: 1.5;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}
.form-control.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(176, 64, 64, 0.1);
}
.form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    font-weight: 500;
}
textarea.form-control { resize: vertical; min-height: 120px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
}

/* Comment Form */
.comment-form .form-group + .form-group { margin-top: var(--space-4); }

/* Search Form */
.search-form {
    display: flex;
    gap: var(--space-2);
}
.search-form .search-field {
    flex: 1;
}
.search-form .search-submit {
    flex-shrink: 0;
}

/* ============================================================
   11. WORDPRESS CORE STYLES
   ============================================================ */

/* Alignments */
.alignleft  { float: left; margin-right: var(--space-6); margin-bottom: var(--space-4); }
.alignright { float: right; margin-left: var(--space-6); margin-bottom: var(--space-4); }
.aligncenter { display: block; margin: var(--space-8) auto; }
.alignwide  { max-width: calc(var(--max-width) + 160px); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* Captions */
.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
    font-style: italic;
}

/* Pagination */
.pagination,
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) 0;
    flex-wrap: wrap;
}
.page-numbers, .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.page-numbers:hover,
.nav-links a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-light);
}
.page-numbers.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* Post meta */
.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.post-meta a { color: inherit; transition: color var(--transition-fast); }
.post-meta a:hover { color: var(--color-cta); }

/* Tags */
.tag-cloud, .wp-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.tag-cloud-link, .wp-tag-cloud a {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs) !important;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.tag-cloud-link:hover, .wp-tag-cloud a:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
    background: var(--color-cta-light);
}

/* Widgets */
.widget { margin-bottom: var(--space-8); }
.widget-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-primary);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-4);
}
.widget ul { display: flex; flex-direction: column; gap: var(--space-2); }
.widget ul a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.widget ul a:hover { color: var(--color-cta); }

/* Notices / Messages */
.notice {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border-left: 3px solid;
    margin-bottom: var(--space-4);
}
.notice--success { background: #EDF7F2; border-color: var(--color-success); color: var(--color-success); }
.notice--error   { background: #FDF2F2; border-color: var(--color-error);   color: var(--color-error); }
.notice--warning { background: #FDF8EE; border-color: var(--color-warning); color: var(--color-warning); }
.notice--info    { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-accent); }

/* ============================================================
   12. ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--color-surface);
    clip: auto !important;
    clip-path: none;
    color: var(--color-text-primary);
    display: block;
    font-size: var(--text-sm);
    font-weight: bold;
    height: auto;
    left: var(--space-4);
    line-height: normal;
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    top: var(--space-4);
    width: auto;
    z-index: 999;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   13. ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
}

.animate-fade-up {
    animation: fadeUp 0.6s var(--transition-slow) both;
}
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-border) 25%,
        var(--color-surface-alt) 50%,
        var(--color-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-md);
}

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

/* ============================================================
   AUTH PAGES (Login & Register)
   Added: v1.3.0 — 2026-05-28
   Shared styles for template-login.php and any themed auth page.
   ============================================================ */

.lumino-auth-page {
    min-height: calc(100svh - var(--nav-height) - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--container-pad);
    background: var(--color-surface-alt);
}

.lumino-auth-wrap {
    width: 100%;
    max-width: 440px;
}

/* Brand mark above card */
.lumino-auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}
.lumino-auth-brand img {
    height: 44px;
    width: auto;
}
.lumino-auth-brand .site-title {
    font-size: var(--text-xl);
}

/* Card */
.lumino-auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-md);
}

.lumino-auth-card__header {
    margin-bottom: var(--space-6);
    text-align: center;
}
.lumino-auth-card__title {
    font-size: var(--text-2xl);
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.lumino-auth-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: none;
    margin: 0;
}

/* Notices */
.lumino-auth-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    border-left: 3px solid;
}
.lumino-auth-notice--error {
    background: #FDF2F2;
    border-color: var(--color-error);
    color: var(--color-error);
}
.lumino-auth-notice--success {
    background: #EDF7F2;
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Native WP login form */
.lumino-auth-form__password-wrap {
    position: relative;
}
.lumino-auth-form__password-wrap .form-control {
    padding-right: 2.75rem;
}
.lumino-auth-form__toggle-pw {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    padding: 0;
    transition: color var(--transition-fast);
}
.lumino-auth-form__toggle-pw:hover {
    color: var(--color-text-primary);
}

.lumino-auth-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.lumino-auth-form__remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.lumino-auth-form__remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-cta);
    cursor: pointer;
}
.lumino-auth-form__forgot {
    font-size: var(--text-sm);
    color: var(--color-cta);
    transition: color var(--transition-fast);
}
.lumino-auth-form__forgot:hover {
    color: var(--color-cta-hover);
}

/* Card footer (sign up link) */
.lumino-auth-card__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.lumino-auth-card__footer p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: none;
    margin: 0;
}
.lumino-auth-card__footer a {
    color: var(--color-cta);
    font-weight: 600;
    transition: color var(--transition-fast);
}
.lumino-auth-card__footer a:hover {
    color: var(--color-cta-hover);
}

/* UM overrides inside auth card — force UM form to inherit theme styles */
.lumino-um-wrap .um {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.lumino-um-wrap .um .um-field input,
.lumino-um-wrap .um .um-field textarea,
.lumino-um-wrap .um .um-field select {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast) !important;
}
.lumino-um-wrap .um .um-field input:focus,
.lumino-um-wrap .um .um-field select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--color-accent-light) !important;
    outline: none !important;
}
.lumino-um-wrap .um .um-field label {
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    margin-bottom: var(--space-2) !important;
}
.lumino-um-wrap .um .um-col-01 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}
.lumino-um-wrap .um .um-field {
    margin-bottom: 1.25rem !important;
    padding: 0 !important;
}
/* UM submit button */
.lumino-um-wrap .um .um-button,
.lumino-um-wrap .um input[type="submit"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1.75rem !important;
    background: var(--color-cta) !important;
    color: #fff !important;
    border: 2px solid var(--color-cta) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--transition-fast) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.lumino-um-wrap .um .um-button:hover,
.lumino-um-wrap .um input[type="submit"]:hover {
    background: var(--color-cta-hover) !important;
    border-color: var(--color-cta-hover) !important;
}
/* UM links (forgot password, etc.) */
.lumino-um-wrap .um a {
    color: var(--color-cta) !important;
}
.lumino-um-wrap .um .um-misc-link {
    font-size: var(--text-sm) !important;
    text-align: center !important;
    margin-top: var(--space-4) !important;
}

/* Responsive */
@media (max-width: 480px) {
    .lumino-auth-card {
        padding: var(--space-8) var(--space-5);
        border-radius: var(--radius-lg);
    }
    .lumino-auth-page {
        padding: var(--space-8) var(--space-4);
        align-items: flex-start;
    }
}

/* ============================================================
   HEADER ACCOUNT DROPDOWN  (added v1.6.0)
   ============================================================ */

/* Wrapper — sets positioning context */
.header-account-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Avatar trigger button */
.header-account-trigger {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-surface-alt) !important;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.header-account-trigger:hover {
    border-color: var(--color-cta);
    transform: none;
    background: var(--color-cta-light) !important;
}
.header-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
}

/* Dropdown panel */
.header-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 300;

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity    150ms ease,
        transform  150ms ease,
        visibility 0ms linear 150ms;
    pointer-events: none;
    overflow: hidden;
}

/* Open state (JS adds .is-open to .header-account-wrap) */
.header-account-wrap.is-open .header-account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity    150ms ease,
        transform  150ms ease,
        visibility 0ms linear 0ms;
    pointer-events: all;
}

/* User info header */
.had-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.had-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.had-info { flex: 1; min-width: 0; }
.had-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
}
.had-email {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
}
.had-unverified {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-warning);
    background: #FDF8EE;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* Nav links */
.had-nav {
    padding: var(--space-2);
}
.had-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1.4;
}
.had-nav__item svg { flex-shrink: 0; color: var(--color-text-muted); }
.had-nav__item:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}
.had-nav__item:hover svg { color: var(--color-cta); }

/* Log out footer */
.had-footer {
    padding: var(--space-2) var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
}
.had-logout {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-error);
    text-decoration: none;
    transition: background var(--transition-fast);
}
.had-logout:hover { background: #FDF2F2; }

/* Verification success/error notice on account page */
.lumino-verify-notice {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border-left: 3px solid;
    margin-bottom: var(--space-6);
}
.lumino-verify-notice--success {
    background: #EDF7F2;
    border-color: var(--color-success);
    color: var(--color-success);
}
.lumino-verify-notice--error {
    background: #FDF2F2;
    border-color: var(--color-error);
    color: var(--color-error);
}