@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/baloo2-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/baloo2-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/atkinson-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/atkinson-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/atkinson-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/atkinson-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

    --s5-purple-950: #201234;
    --s5-purple-900: #2E1B47;
    --s5-purple-800: #432663;
    --s5-purple-700: #57327D;
    --s5-purple-100: #EBE3F4;
    --s5-purple-50: #F6F2FA;
    --s5-lime-300: #EEF688;
    --s5-green-300: #B0E390;
    --s5-green-400: #8CD895;
    --s5-ink: #262130;
    --s5-ink-soft: #4C4558;
    --s5-ink-muted: #6F677C;
    --s5-line: #D5D1DB;
    --s5-paper: #FFFFFF;
    --s5-pink-400: #F0609A;

    --s5-score-positive: #2E7D32;
    --s5-score-positive-surface: #E8F5E9;
    --s5-score-positive-text: #1F6626;
    --s5-score-caution: #F9A825;
    --s5-score-caution-surface: #FFF8E1;
    --s5-score-caution-text: #6F5200;
    --s5-score-negative: #C62828;
    --s5-score-negative-surface: #FFEBEE;
    --s5-score-negative-text: #B71C1C;
    --s5-score-unknown: #6F677C;
    --s5-score-unknown-surface: #EBE9EF;
    --s5-score-unknown-text: #4C4558;

    --s5-gradient: linear-gradient(180deg, #EEF688 0%, #B0E390 50%, #8CD895 100%);
    --s5-shadow-overlay: 0 8px 32px rgba(32, 18, 52, .18);
    --s5-ease: cubic-bezier(.2, .8, .2, 1);
    --s5-font-head: 'Baloo 2', system-ui, sans-serif;
    --s5-font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

    --primary: var(--s5-purple-700);
    --primary-dark: var(--s5-purple-800);
    --primary-light: var(--s5-purple-100);
    --primary-subtle: var(--s5-purple-50);

    --success: var(--s5-score-positive);
    --success-bg: var(--s5-score-positive-surface);
    --success-border: var(--s5-score-positive);
    --success-text: var(--s5-score-positive-text);

    --danger: var(--s5-score-negative);
    --danger-bg: var(--s5-score-negative-surface);
    --danger-border: var(--s5-score-negative);
    --danger-text: var(--s5-score-negative-text);

    --warning: var(--s5-score-caution);
    --warning-bg: var(--s5-score-caution-surface);
    --warning-border: var(--s5-score-caution);
    --warning-text: var(--s5-score-caution-text);

    --gold: var(--s5-purple-700);
    --gold-bg: var(--s5-purple-100);
    --gold-dark: var(--s5-purple-800);

    --bg: var(--s5-purple-50);
    --surface: var(--s5-paper);
    --text: var(--s5-ink);
    --text-secondary: var(--s5-ink-soft);
    --text-muted: var(--s5-ink-muted);
    --border: var(--s5-line);
    --border-light: var(--s5-purple-50);

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    --font-sm: 16px;
    --font-base: 18px;
    --font-lg: 20px;
    --font-xl: 26px;
    --font-2xl: 32px;
    --font-3xl: 38px;

    --touch: 56px;
    --touch-lg: 64px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: var(--s5-shadow-overlay);

    --transition: 150ms var(--s5-ease);
    --transition-slow: 250ms var(--s5-ease);
}

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

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

body {
    font-family: var(--s5-font-body);
    background: var(--bg);
    color: var(--text);
    font-size: var(--font-base);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--s5-font-head);
    font-weight: 600;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--s5-paper);
    padding: 8px 20px;
    border-radius: 0 0 12px 12px;
    font-weight: 700;
    font-size: var(--font-sm);
    text-decoration: none;
    z-index: 9999;
    transition: top 150ms;
}

.skip-link:focus {
    top: 0;
}

.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;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding: var(--space-md) var(--space-lg);
    padding-top: calc(var(--space-md) + env(safe-area-inset-top));
}

.header-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
}

.logo-fallback {
    width: 40px;
    height: 40px;
    background: var(--primary-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.brand-name {
    font-family: var(--s5-font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.006em;
}

.icon-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.icon-btn:hover {
    background: var(--primary-subtle);
    color: var(--primary-dark);
}

.icon-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.main-content {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom));
}

.hero-section {
    padding: var(--space-3xl) 0;
    text-align: center;
}

.hero-title {
    font-family: var(--s5-font-head);
    font-size: var(--font-3xl);
    font-weight: 700;
    line-height: 1.08;
    color: var(--text);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 8px 8px 8px var(--space-md);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    max-width: 560px;
    margin: 0 auto;
}

.search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.scan-icon-btn {
    width: var(--touch-lg);
    height: var(--touch-lg);
    border-radius: var(--radius-full);
    border: none;
    background: var(--primary);
    color: var(--s5-paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.scan-icon-btn:hover {
    background: var(--primary-dark);
}

.scan-icon-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--s5-font-body);
    font-size: var(--font-lg);
    color: var(--text);
    min-height: var(--touch);
    padding: 0 var(--space-sm);
    outline: none;
}

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

.search-submit {
    width: var(--touch);
    height: var(--touch);
    border-radius: var(--radius-full);
    border: none;
    background: var(--primary-subtle);
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.search-submit:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.search-submit:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.search-hint {
    margin-top: var(--space-md);
    font-size: var(--font-base);
    color: var(--text-muted);
}

.loading-state {
    text-align: center;
    padding: var(--space-2xl) 0;
    color: var(--text-secondary);
    font-size: var(--font-base);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--space-md);
}

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

.result-card {
    padding: var(--space-lg) !important;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    animation: fadeUp 0.25s var(--s5-ease);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.result-emoji {
    font-size: 64px;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.result-verdict {
    font-family: var(--s5-font-head);
    font-size: var(--font-xl);
    font-weight: 700;
    letter-spacing: -0.012em;
}

.result-verdict.good {
    color: var(--s5-score-positive-text);
}

.result-verdict.caution {
    color: var(--s5-score-caution-text);
}

.result-verdict.bad {
    color: var(--s5-score-negative-text);
}

.result-verdict.unknown {
    color: var(--s5-score-unknown-text);
}

.result-product {
    font-family: var(--s5-font-head);
    font-size: var(--font-xl) !important;
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-md);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--text);
}

.result-sugar {
    font-family: var(--s5-font-head);
    font-size: var(--font-xl) !important;
    padding: var(--space-lg) !important;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-align: center;
}

.result-sugar.good {
    background: var(--s5-score-positive-surface);
    color: var(--s5-score-positive-text);
    border: 2px solid var(--s5-score-positive);
}

.result-sugar.caution {
    background: var(--s5-score-caution-surface);
    color: var(--s5-score-caution-text);
    border: 2px solid var(--s5-score-caution);
}

.result-sugar.bad {
    background: var(--s5-score-negative-surface);
    color: var(--s5-score-negative-text);
    border: 2px solid var(--s5-score-negative);
}

.result-sugar.unknown {
    background: var(--s5-score-unknown-surface);
    color: var(--s5-score-unknown-text);
    border: 2px solid var(--s5-score-unknown);
}

.result-nutrition {
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

.nutrition-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-base) !important;
    gap: var(--space-md);
}

.nutrition-row:last-child {
    border-bottom: none;
}

.nutrition-row strong {
    font-weight: 700;
    color: var(--text);
    font-size: var(--font-base);
}

.nutrition-val {
    font-weight: 700;
    font-size: var(--font-base);
    text-align: right;
    white-space: nowrap;
}

.nutrition-val.low {
    color: var(--s5-score-positive-text);
}

.nutrition-val.medium {
    color: var(--s5-score-caution-text);
}

.nutrition-val.high {
    color: var(--s5-score-negative-text);
}

.vegan-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    margin-top: var(--space-sm);
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-size: var(--font-base);
    font-weight: 700;
}

.save-list-btn {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-lg) !important;
    margin: 12px 0 var(--space-sm);
    background: var(--primary);
    color: var(--s5-paper);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--s5-font-body);
    font-size: var(--font-lg) !important;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    min-height: var(--touch-lg) !important;
    box-shadow: var(--shadow-md);
}

.save-list-btn:hover:not(.saved) {
    background: var(--primary-dark);
}

.save-list-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.save-list-btn.saved {
    background: var(--primary-subtle);
    color: var(--primary);
    border: 2px solid var(--primary);
    cursor: default;
}

.save-list-btn.saved:hover {
    background: var(--primary-subtle);
}

#addToListSection {
    margin-top: 12px;
    padding: var(--space-sm) 0;
}

#addToListSection select {
    flex: 1;
    min-height: var(--touch) !important;
    padding: 0 var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--s5-font-body);
    font-size: var(--font-base) !important;
    color: var(--text);
    cursor: pointer;
    appearance: auto;
}

#addToListSection select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

#addToListSection .btn-primary {
    min-height: var(--touch) !important;
    padding: 0 var(--space-lg);
    font-size: var(--font-sm) !important;
    font-weight: 700;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--s5-paper);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

#addToListSection .btn-primary:hover {
    background: var(--primary-dark);
}

.scan-again-btn {
    display: block;
    width: 100%;
    padding: var(--space-md) var(--space-lg) !important;
    margin-top: var(--space-md);
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    font-family: var(--s5-font-body);
    font-size: var(--font-lg) !important;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    min-height: var(--touch-lg) !important;
    text-align: center;
}

.scan-again-btn:hover {
    background: var(--primary);
    color: var(--s5-paper);
    border-color: var(--primary);
}

.scan-again-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.error-section {
    text-align: center;
    padding: var(--space-2xl) 0;
    max-width: 480px;
    margin: 0 auto;
}

.error-emoji {
    font-size: 56px;
    margin-bottom: var(--space-md);
}

.error-text {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--touch);
    padding: 0 var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--s5-font-body);
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: var(--s5-paper);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

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

.btn-secondary:hover {
    background: var(--primary-subtle);
}

.btn-gold {
    background: var(--gold);
    color: var(--s5-paper);
    box-shadow: var(--shadow-md);
}

.btn-gold:hover {
    background: var(--gold-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--border);
    font-size: var(--font-sm);
}

.btn-ghost:hover {
    background: var(--primary-subtle);
    border-color: var(--primary);
}

.btn-full {
    width: 100%;
}

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

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.link-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-family: var(--s5-font-body);
    font-size: var(--font-base);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: var(--space-xs);
}

.link-btn:hover {
    color: var(--primary-dark);
}

.link-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(32, 18, 52, 0.55);
    z-index: 900;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.drawer-overlay.show {
    opacity: 1;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 460px;
    background: var(--surface);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 250ms var(--s5-ease);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    padding-top: calc(var(--space-lg) + env(safe-area-inset-top));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface);
}

.drawer-header h2 {
    font-family: var(--s5-font-head);
    font-size: var(--font-2xl);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--text);
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom));
    scroll-behavior: smooth;
}

.drawer-section {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-sm);
}

.drawer-section h3 {
    font-family: var(--s5-font-head);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--text);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.drawer-input {
    width: 100%;
    min-height: var(--touch-lg);
    padding: 0 var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--s5-font-body);
    font-size: var(--font-lg);
    background: var(--surface);
    color: var(--text);
    margin-bottom: var(--space-md);
    transition: var(--transition);
    outline: none;
}

.drawer-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.drawer-input::placeholder {
    color: var(--text-muted);
    font-size: var(--font-base);
}

.drawer-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.drawer-auth-form .btn-primary {
    min-height: var(--touch-lg);
    font-size: var(--font-lg);
    border-radius: var(--radius-md);
}

.drawer-auth-form .link-btn {
    font-size: var(--font-base);
    padding: var(--space-sm);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-profile {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--bg);
    border: 1px solid var(--border);
}

.profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.profile-row span:first-child {
    font-size: var(--font-base);
    font-weight: 700;
    word-break: break-all;
    color: var(--text);
}

.badge-premium {
    background: var(--primary);
    color: var(--s5-paper);
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-count {
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: var(--font-sm);
    font-weight: 700;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--primary-light);
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.section-header-row h3 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.drawer-loading {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-xl) 0;
    font-size: var(--font-base);
}

.drawer-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-xl) 0;
    font-size: var(--font-base);
    line-height: 1.6;
}

.drawer-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.drawer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    gap: 14px;
    min-height: 72px;
    transition: var(--transition);
    cursor: pointer;
}

.drawer-item:hover {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.drawer-item:active {
    background: var(--primary-light);
}

.drawer-item .item-name {
    font-size: var(--font-base);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    color: var(--text);
}

.drawer-item .item-barcode {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--space-xs);
    font-weight: 400;
}

.drawer-item .item-sugar {
    font-size: var(--font-sm);
    padding: 0 var(--space-md);
    height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.drawer-item .item-sugar.good {
    background: var(--s5-score-positive-surface);
    color: var(--s5-score-positive-text);
    border: 1px solid var(--s5-score-positive);
}

.drawer-item .item-sugar.caution {
    background: var(--s5-score-caution-surface);
    color: var(--s5-score-caution-text);
    border: 1px solid var(--s5-score-caution);
}

.drawer-item .item-sugar.bad {
    background: var(--s5-score-negative-surface);
    color: var(--s5-score-negative-text);
    border: 1px solid var(--s5-score-negative);
}

.drawer-item .delete-btn,
.drawer-item .list-actions button,
.unshare-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 48px;
    height: 48px;
    font-size: 22px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.drawer-item .delete-btn:hover,
.drawer-item .delete-btn:focus-visible,
.drawer-item .list-actions button:hover,
.drawer-item .list-actions button:focus-visible,
.unshare-btn:hover,
.unshare-btn:focus-visible {
    background: var(--primary-light);
    color: var(--primary);
}

.share-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    width: 48px;
    height: 48px;
    font-size: 22px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.share-btn:hover,
.share-btn:focus-visible {
    background: var(--primary-subtle);
}

.drawer-premium {
    background: var(--primary-subtle);
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.drawer-premium p {
    margin-bottom: var(--space-md);
    font-size: var(--font-base);
    font-weight: 700;
}

.drawer-premium .premium-small {
    font-size: var(--font-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    font-weight: 400;
}

.drawer-premium .btn-gold {
    min-height: var(--touch-lg);
    font-size: var(--font-lg);
    border-radius: var(--radius-md);
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    font-size: var(--font-base);
    transition: var(--transition);
    min-height: var(--touch-lg);
}

.drawer-link:hover,
.drawer-link:focus-visible {
    border-color: var(--primary);
    background: var(--primary-subtle);
    color: var(--primary);
}

.auth-message {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-weight: 700;
    display: none;
    text-align: center;
    min-height: var(--touch);
    align-items: center;
    justify-content: center;
}

.auth-message.error {
    display: flex;
    background: var(--primary-light);
    color: var(--s5-purple-900);
    border: 2px solid var(--primary);
}

.auth-message.success {
    display: flex;
    background: var(--primary);
    color: var(--s5-paper);
    border: 2px solid var(--primary);
}

.drawer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg) 0;
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
    font-size: var(--font-base);
    color: var(--text-muted);
}

.drawer-legal a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 400;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.drawer-legal a:hover {
    color: var(--primary);
    background: var(--primary-subtle);
}

.drawer-legal a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.legal-separator {
    color: var(--border);
    font-weight: 700;
}

.scanner-overlay {
    position: fixed;
    inset: 0;
    background: var(--s5-purple-950);
    display: none;
    z-index: 1100;
    flex-direction: column;
    padding: var(--space-md);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.scanner-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: var(--space-lg);
    padding-top: var(--space-md);
}

.scanner-header p {
    color: var(--s5-paper);
    font-size: var(--font-lg);
    font-weight: 700;
}

.close-scanner {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--s5-purple-800);
    border: 1px solid var(--s5-purple-700);
    color: var(--s5-paper);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-scanner:focus-visible {
    outline: 2px solid var(--s5-paper);
    outline-offset: 2px;
}

.scanner-frame {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4/3;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 auto var(--space-lg);
    background: var(--s5-purple-950);
}

#scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-reticle {
    position: absolute;
    inset: var(--space-md);
    pointer-events: none;
}

.reticle-corner {
    position: absolute;
    width: 32px;
    height: 32px;
    border-color: var(--s5-lime-300);
    border-style: solid;
    border-width: 0;
}

.reticle-tl {
    top: 0;
    left: 0;
    border-top-width: 3px;
    border-left-width: 3px;
}

.reticle-tr {
    top: 0;
    right: 0;
    border-top-width: 3px;
    border-right-width: 3px;
}

.reticle-bl {
    bottom: 0;
    left: 0;
    border-bottom-width: 3px;
    border-left-width: 3px;
}

.reticle-br {
    bottom: 0;
    right: 0;
    border-bottom-width: 3px;
    border-right-width: 3px;
}

.scanner-hint {
    color: var(--s5-purple-100);
    font-size: var(--font-base);
    text-align: center;
    font-weight: 400;
}

.toast-container {
    position: fixed;
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: calc(100% - var(--space-xl));
    max-width: 480px;
    pointer-events: none;
}

.toast {
    background: var(--s5-ink);
    color: var(--s5-paper);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-base);
    font-weight: 700;
    text-align: center;
    box-shadow: var(--shadow-xl);
    animation: toastIn 0.25s var(--s5-ease);
    pointer-events: auto;
}

.toast.success {
    background: var(--s5-purple-700);
}

.toast.error {
    background: var(--s5-purple-900);
}

.toast.warning {
    background: var(--s5-purple-800);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast-exit {
    animation: toastOut 0.25s forwards;
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    cursor: pointer;
    padding: var(--space-sm) 0;
    min-height: var(--touch);
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-box {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-top: 2px;
}

.checkbox-box::after {
    content: '';
    width: 6px;
    height: 12px;
    border-right: 2.5px solid var(--s5-paper);
    border-bottom: 2.5px solid var(--s5-paper);
    transform: rotate(45deg) scale(0.5);
    margin-top: -2px;
    opacity: 0;
    transition: var(--transition);
}

.checkbox-input:checked+.checkbox-box {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-input:checked+.checkbox-box::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.checkbox-input:focus-visible+.checkbox-box {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.checkbox-text {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.6;
}

.checkbox-text a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

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

.install-btn {
    position: fixed;
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
    right: var(--space-lg);
    background: var(--primary);
    color: var(--s5-paper);
    border: 1px solid var(--primary-dark);
    padding: 0 var(--space-md);
    min-height: 48px;
    border-radius: var(--radius-full);
    font-family: var(--s5-font-body);
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: var(--transition);
}

.install-btn:hover {
    background: var(--primary-dark);
}

.install-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

#profileLimits {
    margin-top: 12px;
}

#profileLimits .profile-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border: 1px solid var(--border);
}

#profileLimits .plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-sm);
    letter-spacing: 0.01em;
}

#profileLimits .plan-badge.free {
    background: var(--s5-purple-50);
    color: var(--s5-ink-soft);
    border: 1px solid var(--border);
}

#profileLimits .plan-badge.pro {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}

#profileLimits .plan-badge.premium {
    background: var(--primary);
    color: var(--s5-paper);
    border: 1px solid var(--primary);
}

#profileLimits .info-btn {
    background: var(--primary-subtle);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

#profileLimits .info-btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

#profileLimits .info-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

#profileLimits .limit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-xs);
}

#profileLimits .limit-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

#profileLimits .limit-item .icon {
    font-size: var(--font-lg);
}

#profileLimits .limit-item strong {
    color: var(--text);
}

#profileLimits .price-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    text-align: center;
}

#planInfoPopover {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-xl);
    max-width: 280px;
    z-index: 2000;
    font-size: var(--font-sm);
    color: var(--text);
    line-height: 1.6;
    animation: fadeIn 0.2s var(--s5-ease);
}

#planInfoPopover .popover-title {
    font-family: var(--s5-font-head);
    font-size: var(--font-base);
    font-weight: 600;
    letter-spacing: -0.006em;
    margin-bottom: var(--space-xs);
}

#planInfoPopover .popover-close {
    margin-top: 10px;
    background: var(--primary-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 40px;
    padding: 0 var(--space-md);
    font-family: var(--s5-font-body);
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
    color: var(--primary);
}

#planInfoPopover .popover-close:hover {
    background: var(--primary-light);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#shoppingListsContainer {
    margin-top: 12px;
}

#newListForm {
    display: none;
    padding: 12px 0;
    gap: 12px;
    flex-direction: column;
}

#newListForm .drawer-input {
    margin-bottom: 0;
}

#newListForm .btn-primary {
    min-height: var(--touch-lg);
    font-size: var(--font-lg);
    font-weight: 700;
}

.shopping-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
    min-height: 72px;
}

.shopping-list-item:hover,
.shopping-list-item:focus-visible {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.shopping-list-item .list-name {
    font-weight: 700;
    font-size: var(--font-base);
    color: var(--text);
}

.shopping-list-item .list-meta {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--space-xs);
    font-weight: 400;
}

.shopping-list-item .list-actions {
    display: flex;
    gap: var(--space-sm);
}

.shopping-list-item .list-actions button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 22px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.shopping-list-item .list-actions button:hover,
.shopping-list-item .list-actions button:focus-visible {
    background: var(--primary-light);
    color: var(--primary);
}

@media (max-width: 480px) {

    .result-product {
        font-size: 24px !important;
    }

    .result-sugar {
        font-size: 24px !important;
        padding: var(--space-md) !important;
    }

    .nutrition-row {
        font-size: var(--font-base) !important;
        padding: 12px 0;
    }

    .nutrition-row strong {
        font-size: var(--font-base);
    }

    .nutrition-val {
        font-size: var(--font-base);
    }

    .save-list-btn {
        font-size: var(--font-base) !important;
        padding: var(--space-md) !important;
        min-height: var(--touch) !important;
    }

    .scan-again-btn {
        font-size: var(--font-base) !important;
        padding: var(--space-md) !important;
        min-height: var(--touch) !important;
    }

    #addToListSection select {
        font-size: var(--font-base) !important;
        min-height: 52px !important;
    }

    #addToListSection .btn-primary {
        font-size: var(--font-sm) !important;
        min-height: 52px !important;
        padding: 0 var(--space-md);
    }

    .vegan-row {
        font-size: var(--font-base);
        padding: 12px;
    }

    .drawer-content {
        padding: var(--space-md);
    }

    .drawer-item {
        padding: var(--space-md);
        min-height: 64px;
    }

    .drawer-item .item-name {
        font-size: var(--font-base);
    }

    .drawer-item .item-barcode {
        font-size: var(--font-sm);
    }

    .drawer-item .item-sugar {
        font-size: var(--font-sm);
        padding: 0 12px;
    }

    .drawer-input {
        min-height: var(--touch);
        font-size: var(--font-base);
    }

    .drawer-link {
        padding: var(--space-md);
        font-size: var(--font-base);
        min-height: var(--touch);
    }

    .drawer-section h3 {
        font-size: 20px;
    }

    .drawer-header h2 {
        font-size: 28px;
    }
}

@media (min-width: 768px) {
    .hero-section {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    
    .hero-title {
        font-size: 64px;
    }

    .search-box {
        padding: 8px 8px 8px var(--space-lg);
    }

    .search-input {
        font-size: var(--font-lg);
    }

    .result-emoji {
        font-size: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

:focus:not(:focus-visible) {
    outline: none;
}

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

.scanner-overlay :focus-visible {
    outline-color: var(--s5-paper);
}

.product-name {
    font-family: var(--s5-font-head);
    font-size: var(--font-xl) !important;
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-md);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--text);
}

@media (max-width: 480px) {
    .product-name {
        font-size: 24px !important;
    }
}

.s5-header{position:sticky;top:0;z-index:100;padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background-color:transparent;border:0;
  transition:transform var(--transition-slow)}
.s5-header-hidden{transform:translate3d(0,-110%,0)}

.s5-header-bar{display:flex;align-items:center;gap:24px;width:fit-content;height:60px;
  max-width:100%;margin:0 auto;padding:0 8px 0 20px;
  background-color:var(--s5-paper);border-radius:9999px;
  border:1px solid var(--s5-line)}
@media (max-width:1119px){.s5-header-bar{width:100%;max-width:1140px;padding:0 8px 0 16px}}
@media (max-width:479px){.s5-header-bar{gap:12px;height:56px}}

.s5-header-home{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  min-height:44px}
.s5-header-home:focus-visible{outline:2px solid var(--s5-purple-700);outline-offset:2px}

.s5-header-logo{display:block;width:40px;height:40px;object-fit:contain;
  border-radius:var(--s5-radius-m,12px)}
.s5-header-wordmark{color:var(--s5-purple-700);font-family:'Baloo 2',sans-serif;
  font-weight:700;font-size:22px;letter-spacing:-0.006em}
@media (max-width:479px){.s5-header-wordmark{display:none}}

.s5-header-nav{display:flex;align-items:center;gap:4px}
@media (max-width:767px){.s5-header-nav{display:none}}
.s5-header-navlink{display:inline-flex;align-items:center;color:var(--s5-ink);
  font-family:'Atkinson Hyperlegible',sans-serif;font-size:18px;line-height:1.4;
  text-decoration:none;padding:10px 12px;border-radius:9999px;white-space:nowrap;
  transition:background-color 150ms var(--s5-ease),color 150ms var(--s5-ease)}
.s5-header-navlink:hover{color:var(--s5-purple-700);background-color:var(--s5-purple-50)}
.s5-header-navlink:focus-visible{outline:2px solid var(--s5-purple-700);outline-offset:2px}

.s5-navgroup{display:flex;align-items:center;position:relative}
.s5-navtrigger{display:inline-flex;align-items:center;color:var(--s5-ink);
  font-family:'Atkinson Hyperlegible',sans-serif;font-size:18px;line-height:1.4;
  text-decoration:none;padding:10px 12px;background-color:transparent;
  border-radius:9999px;border:0;cursor:pointer;white-space:nowrap;
  transition:background-color 150ms var(--s5-ease),color 150ms var(--s5-ease)}
.s5-navtrigger:hover{color:var(--s5-purple-700);background-color:var(--s5-purple-50)}
.s5-navtrigger:focus-visible{outline:2px solid var(--s5-purple-700);outline-offset:2px}
.s5-navtrigger::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translate3d(0,-2px,0) rotateZ(45deg);
  transition:transform 150ms var(--s5-ease)}

.s5-navpanel{display:flex;visibility:hidden;flex-flow:column;gap:2px;position:absolute;
  top:calc(100% + 14px);left:50%;z-index:20;min-width:288px;padding:8px;
  background-color:var(--s5-paper);border-radius:var(--s5-radius-l,16px);
  border:1px solid var(--s5-line);transform-origin:50% 50%;opacity:0;
  transform:translate3d(-50%,-8px,0) scale(0.96,0.96);
  transition:opacity 180ms var(--s5-ease),
             transform 180ms cubic-bezier(.34,1.56,.64,1),
             visibility 0s linear 180ms}
.s5-navpanel::before{content:"";position:absolute;top:-14px;right:0;left:0;height:14px}

.s5-navgroup:hover .s5-navpanel,
.s5-navgroup:focus-within .s5-navpanel,
.s5-navgroup.s5-open .s5-navpanel{visibility:visible;opacity:1;
  transform:translate3d(-50%,0,0) scale(1,1);
  transition:opacity 180ms var(--s5-ease),
             transform 260ms cubic-bezier(.34,1.56,.64,1),visibility 0s}
.s5-navgroup:hover .s5-navtrigger,
.s5-navgroup:focus-within .s5-navtrigger,
.s5-navgroup.s5-open .s5-navtrigger{color:var(--s5-purple-700);
  background-color:var(--s5-purple-50)}
.s5-navgroup:hover .s5-navtrigger::after,
.s5-navgroup:focus-within .s5-navtrigger::after,
.s5-navgroup.s5-open .s5-navtrigger::after{transform:translate3d(0,1px,0) rotateZ(225deg)}

.s5-navpanel-link{display:block;color:var(--s5-ink);
  font-family:'Atkinson Hyperlegible',sans-serif;font-size:18px;line-height:1.4;
  text-decoration:none;padding:10px 12px;border-radius:var(--s5-radius-m,12px);
  white-space:nowrap;transition:background-color 150ms var(--s5-ease),
  color 150ms var(--s5-ease)}
.s5-navpanel-link:hover{color:var(--s5-purple-700);background-color:var(--s5-purple-50)}
.s5-navpanel-link:focus-visible{outline:2px solid var(--s5-purple-700);outline-offset:2px}

.s5-menu-btn{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;color:var(--s5-purple-700);
  padding:0;background-color:transparent;border:0;
  border-radius:var(--s5-radius-m,12px);cursor:pointer;
  transition:background-color 150ms var(--s5-ease)}
.s5-menu-btn:hover{background-color:var(--s5-purple-50)}
.s5-menu-btn:focus-visible{outline:2px solid var(--s5-purple-700);outline-offset:2px}
.s5-menu-icon{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;line-height:0}
.s5-menu-icon svg{width:28px;height:28px}

.s5-header-bar .s5-btn-primary{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  .s5-header{transition:none}
  .s5-navpanel{transition:opacity .01ms,visibility .01ms}
}

.s5-header-bar .s5-btn-primary {
    
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    margin: 0;
    background-image: none;
    text-transform: none;

    
    margin-left: auto;

    
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 20px;

    
    font-family: var(--s5-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;

    
    background-color: var(--s5-purple-700);
    color: var(--s5-paper);
    border-radius: 9999px;

    
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms var(--s5-ease);
}

.s5-header-bar .s5-btn-primary:hover {
    background-color: var(--s5-purple-800);
}

.s5-header-bar .s5-btn-primary:active {
    background-color: var(--s5-purple-900);
}

.s5-header-bar .s5-btn-primary:focus-visible {
    outline: 2px solid var(--s5-purple-700);
    outline-offset: 2px;
}

@media (max-width: 359px) {
    .s5-header-bar .s5-btn-primary {
        padding: 0 14px;
    }
}

.s5-header-home {
    min-width: 0;
}

.s5-header-wordmark {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-input {
    min-width: 0;
}

@media (max-width: 479px) {
    .search-box {
        padding-left: 10px;
        gap: 4px;
    }

    .scan-icon-btn {
        width: 56px;
        height: 56px;
    }

    .search-submit {
        width: 48px;
        height: 48px;
    }

    .search-input {
        font-size: 18px;
    }
}

.s5-header {
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
}

.s5-header-bar:not(:has(.s5-btn-primary)) .s5-menu-btn {
    margin-left: auto;
}