/*
|--------------------------------------------------------------------------
| SYNTHVERSE — SHARED NAVIGATION
|--------------------------------------------------------------------------
| File:
|   /assets/styles/navigation.css
|
| Used by:
|   header.php
|   navigation.php
|   footer.php
|
| Dependencies:
|   default.css
|   components.css
|
| Scope:
|   Global Header
|   Main Navigation
|   Mobile Navigation
|   Account Controls
|   Footer
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   01. NAVIGATION SYSTEM
   ========================================================================== */

.sv-site-header {
    position: relative;

    width: 100%;

    z-index: var(--sv-z-header);

    background:
        linear-gradient(
            to bottom,
            var(--sv-background),
            var(--sv-background-transparent)
        );

    border-bottom: 1px solid transparent;

    transition:
        background var(--sv-transition-normal),
        border-color var(--sv-transition-normal),
        box-shadow var(--sv-transition-normal);
}

.sv-site-header.is-scrolled {
    background: var(--sv-surface-glass);

    border-bottom-color: var(--sv-border);

    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}


/* ==========================================================================
   02. HEADER INNER
   ========================================================================== */

.sv-header-inner {
    width: 100%;
    max-width: var(--sv-container-max);

    min-height: var(--sv-header-height);

    margin: 0 auto;

    padding:
        0
        var(--sv-container-padding);

    display: flex;
    align-items: center;

    gap: var(--sv-space-6);
}


/* ==========================================================================
   03. BRAND / LOGO
   ========================================================================== */

.sv-brand {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: var(--sv-space-3);

    color: var(--sv-text-primary);

    text-decoration: none;
}

.sv-brand:hover {
    color: var(--sv-text-primary);
}

.sv-brand-mark {
    position: relative;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--sv-theme-accent),
            var(--sv-theme-accent-secondary)
        );

    border-radius: var(--sv-radius-md);

    box-shadow:
        0 0 22px var(--sv-theme-glow);

    transition:
        transform var(--sv-transition-fast),
        box-shadow var(--sv-transition-fast);
}

.sv-brand:hover .sv-brand-mark {
    transform: scale(1.05);

    box-shadow:
        0 0 30px var(--sv-theme-glow);
}

.sv-brand-mark img,
.sv-brand-mark svg {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.sv-brand-name {
    color: var(--sv-text-primary);

    font-size: var(--sv-font-size-lg);
    font-weight: var(--sv-weight-bold);

    line-height: 1;

    letter-spacing: -0.025em;
}

.sv-brand-name-accent {
    color: var(--sv-theme-accent);
}


/* ==========================================================================
   04. PRIMARY NAVIGATION
   ========================================================================== */

.sv-primary-nav {
    flex: 1;

    display: flex;
    align-items: center;

    justify-content: center;

    min-width: 0;
}

.sv-primary-nav-list {
    display: flex;
    align-items: center;

    gap: var(--sv-space-1);

    margin: 0;
    padding: 0;

    list-style: none;
}

.sv-primary-nav-item {
    position: relative;
}

.sv-primary-nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: var(--sv-space-2);

    min-height: 42px;

    padding:
        var(--sv-space-2)
        var(--sv-space-3);

    color: var(--sv-text-secondary);

    font-size: var(--sv-font-size-sm);
    font-weight: var(--sv-weight-medium);

    text-decoration: none;

    border-radius: var(--sv-radius-md);

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast);
}

.sv-primary-nav-link:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-glass);
}

.sv-primary-nav-link.is-active {
    color: var(--sv-text-primary);

    background: var(--sv-primary-soft);
}


/* Active indicator */

.sv-primary-nav-link.is-active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 18px;
    height: 2px;

    transform: translateX(-50%);

    background: var(--sv-theme-accent);

    border-radius: var(--sv-radius-full);

    box-shadow:
        0 0 10px var(--sv-theme-glow);
}


/* Navigation icons */

.sv-primary-nav-icon {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: currentColor;
}


/* ==========================================================================
   05. NAVIGATION DROPDOWNS
   ========================================================================== */

.sv-nav-dropdown {
    position: relative;
}

.sv-nav-dropdown-toggle {
    cursor: pointer;
}

.sv-nav-dropdown-chevron {
    width: 14px;
    height: 14px;

    transition:
        transform var(--sv-transition-fast);
}

.sv-nav-dropdown.is-open
.sv-nav-dropdown-chevron {
    transform: rotate(180deg);
}

.sv-nav-dropdown-menu {
    position: absolute;

    top: calc(
        100% + var(--sv-space-2)
    );

    left: 50%;

    width: 240px;

    padding: var(--sv-space-2);

    transform:
        translateX(-50%)
        translateY(-6px);

    visibility: hidden;
    opacity: 0;

    background: var(--sv-surface-glass);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-lg);

    box-shadow: var(--sv-shadow-lg);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transition:
        opacity var(--sv-transition-fast),
        transform var(--sv-transition-fast),
        visibility var(--sv-transition-fast);
}

.sv-nav-dropdown:hover
.sv-nav-dropdown-menu,
.sv-nav-dropdown.is-open
.sv-nav-dropdown-menu {
    visibility: visible;
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

.sv-nav-dropdown-item {
    display: flex;
    align-items: center;

    gap: var(--sv-space-3);

    width: 100%;

    padding:
        var(--sv-space-3)
        var(--sv-space-3);

    color: var(--sv-text-secondary);

    font-size: var(--sv-font-size-sm);

    text-decoration: none;

    border-radius: var(--sv-radius-md);

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast);
}

.sv-nav-dropdown-item:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-glass-hover);
}

.sv-nav-dropdown-item-icon {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    color: var(--sv-theme-accent);
}

.sv-nav-dropdown-item-content {
    min-width: 0;

    flex: 1;
}

.sv-nav-dropdown-item-title {
    color: inherit;

    font-weight: var(--sv-weight-semibold);
}

.sv-nav-dropdown-item-description {
    margin-top: 2px;

    color: var(--sv-text-muted);

    font-size: var(--sv-font-size-xs);
}


/* ==========================================================================
   06. PRODUCT NAVIGATION
   ========================================================================== */

.sv-product-nav {
    display: flex;
    align-items: center;

    gap: var(--sv-space-1);

    padding: 3px;

    background: var(--sv-surface-2);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-md);
}

.sv-product-nav-link {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding:
        var(--sv-space-1)
        var(--sv-space-3);

    color: var(--sv-text-muted);

    font-size: var(--sv-font-size-xs);
    font-weight: var(--sv-weight-semibold);

    text-decoration: none;

    border-radius: var(--sv-radius-sm);

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast);
}

.sv-product-nav-link:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-glass);
}

.sv-product-nav-link.is-active {
    color: var(--sv-theme-accent);

    background: var(--sv-primary-soft);
}


/* ==========================================================================
   07. HEADER ACTIONS
   ========================================================================== */

.sv-header-actions {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: var(--sv-space-2);
}

.sv-header-action {
    position: relative;

    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--sv-text-secondary);

    background: transparent;

    border: 1px solid transparent;

    border-radius: var(--sv-radius-md);

    cursor: pointer;

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast),
        border-color var(--sv-transition-fast);
}

.sv-header-action:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-glass);

    border-color: var(--sv-border);
}

.sv-header-action.is-active {
    color: var(--sv-theme-accent);

    background: var(--sv-primary-soft);

    border-color: var(--sv-border);
}

.sv-header-action svg,
.sv-header-action img {
    width: 19px;
    height: 19px;
}


/* Notification indicator */

.sv-header-notification-dot {
    position: absolute;

    top: 7px;
    right: 7px;

    width: 7px;
    height: 7px;

    background: var(--sv-theme-accent);

    border: 2px solid var(--sv-background);

    border-radius: 50%;

    box-shadow:
        0 0 8px var(--sv-theme-glow);
}


/* ==========================================================================
   08. SEARCH
   ========================================================================== */

.sv-header-search {
    position: relative;

    width: 240px;
}

.sv-header-search-input {
    width: 100%;
    height: 40px;

    padding:
        0
        var(--sv-space-4)
        0
        40px;

    color: var(--sv-text-primary);

    background: var(--sv-surface-1);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-full);

    outline: none;

    transition:
        border-color var(--sv-transition-fast),
        background var(--sv-transition-fast),
        box-shadow var(--sv-transition-fast);
}

.sv-header-search-input::placeholder {
    color: var(--sv-text-disabled);
}

.sv-header-search-input:hover {
    border-color: var(--sv-border-light);
}

.sv-header-search-input:focus {
    border-color: var(--sv-theme-accent);

    background: var(--sv-surface-2);

    box-shadow:
        0 0 0 3px var(--sv-primary-soft),
        0 0 20px var(--sv-theme-glow);
}

.sv-header-search-icon {
    position: absolute;

    top: 50%;
    left: 14px;

    width: 17px;
    height: 17px;

    transform: translateY(-50%);

    color: var(--sv-text-muted);

    pointer-events: none;
}


/* ==========================================================================
   09. ACCOUNT AREA
   ========================================================================== */

.sv-account {
    position: relative;
}

.sv-account-toggle {
    display: inline-flex;
    align-items: center;

    gap: var(--sv-space-2);

    min-height: 42px;

    padding:
        var(--sv-space-1)
        var(--sv-space-2);

    color: var(--sv-text-primary);

    background: transparent;

    border: 1px solid transparent;

    border-radius: var(--sv-radius-md);

    cursor: pointer;

    transition:
        background var(--sv-transition-fast),
        border-color var(--sv-transition-fast);
}

.sv-account-toggle:hover,
.sv-account.is-open .sv-account-toggle {
    background: var(--sv-surface-glass);

    border-color: var(--sv-border);
}

.sv-account-avatar {
    width: 32px;
    height: 32px;

    overflow: hidden;

    background: var(--sv-surface-2);

    border: 1px solid var(--sv-border);

    border-radius: 50%;
}

.sv-account-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sv-account-info {
    min-width: 0;

    text-align: left;
}

.sv-account-name {
    max-width: 130px;

    overflow: hidden;

    color: var(--sv-text-primary);

    font-size: var(--sv-font-size-xs);
    font-weight: var(--sv-weight-semibold);

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sv-account-type {
    margin-top: 1px;

    color: var(--sv-text-muted);

    font-size: 0.65rem;
}

.sv-account-chevron {
    width: 14px;
    height: 14px;

    color: var(--sv-text-muted);

    transition:
        transform var(--sv-transition-fast);
}

.sv-account.is-open
.sv-account-chevron {
    transform: rotate(180deg);
}


/* Account dropdown */

.sv-account-menu {
    position: absolute;

    top: calc(
        100% + var(--sv-space-2)
    );

    right: 0;

    width: 270px;

    padding: var(--sv-space-2);

    visibility: hidden;
    opacity: 0;

    transform: translateY(-6px);

    background: var(--sv-surface-glass);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-lg);

    box-shadow: var(--sv-shadow-lg);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transition:
        opacity var(--sv-transition-fast),
        transform var(--sv-transition-fast),
        visibility var(--sv-transition-fast);

    z-index: var(--sv-z-dropdown);
}

.sv-account.is-open .sv-account-menu {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);
}

.sv-account-menu-header {
    display: flex;
    align-items: center;

    gap: var(--sv-space-3);

    padding: var(--sv-space-4);

    margin-bottom: var(--sv-space-1);

    border-bottom: 1px solid var(--sv-border);
}

.sv-account-menu-header-info {
    min-width: 0;
}

.sv-account-menu-header-name {
    overflow: hidden;

    color: var(--sv-text-primary);

    font-size: var(--sv-font-size-sm);
    font-weight: var(--sv-weight-semibold);

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sv-account-menu-header-type {
    margin-top: 2px;

    color: var(--sv-theme-accent);

    font-size: var(--sv-font-size-xs);
}

.sv-account-menu-link {
    display: flex;
    align-items: center;

    gap: var(--sv-space-3);

    width: 100%;

    padding:
        var(--sv-space-3)
        var(--sv-space-3);

    color: var(--sv-text-secondary);

    font-size: var(--sv-font-size-sm);

    text-decoration: none;

    border-radius: var(--sv-radius-md);

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast);
}

.sv-account-menu-link:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-glass-hover);
}

.sv-account-menu-link-icon {
    width: 18px;
    height: 18px;

    color: var(--sv-text-muted);
}

.sv-account-menu-link:hover
.sv-account-menu-link-icon {
    color: var(--sv-theme-accent);
}

.sv-account-menu-divider {
    height: 1px;

    margin:
        var(--sv-space-2)
        0;

    background: var(--sv-border);
}

.sv-account-menu-link.is-danger {
    color: var(--sv-danger);
}


/* ==========================================================================
   10. MOBILE MENU TOGGLE
   ========================================================================== */

.sv-mobile-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    color: var(--sv-text-primary);

    background: var(--sv-surface-1);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-md);

    cursor: pointer;

    transition:
        background var(--sv-transition-fast),
        border-color var(--sv-transition-fast),
        color var(--sv-transition-fast);
}

.sv-mobile-menu-toggle:hover {
    color: var(--sv-theme-accent);

    background: var(--sv-surface-2);

    border-color: var(--sv-border-light);
}

.sv-mobile-menu-toggle-icon {
    position: relative;

    width: 20px;
    height: 16px;
}

.sv-mobile-menu-toggle-line {
    position: absolute;

    left: 0;

    width: 100%;
    height: 2px;

    background: currentColor;

    border-radius: var(--sv-radius-full);

    transition:
        top var(--sv-transition-fast),
        transform var(--sv-transition-fast),
        opacity var(--sv-transition-fast);
}

.sv-mobile-menu-toggle-line:nth-child(1) {
    top: 0;
}

.sv-mobile-menu-toggle-line:nth-child(2) {
    top: 7px;
}

.sv-mobile-menu-toggle-line:nth-child(3) {
    top: 14px;
}

.sv-mobile-menu-toggle.is-open
.sv-mobile-menu-toggle-line:nth-child(1) {
    top: 7px;

    transform: rotate(45deg);
}

.sv-mobile-menu-toggle.is-open
.sv-mobile-menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.sv-mobile-menu-toggle.is-open
.sv-mobile-menu-toggle-line:nth-child(3) {
    top: 7px;

    transform: rotate(-45deg);
}


/* ==========================================================================
   11. MOBILE NAVIGATION
   ========================================================================== */

.sv-mobile-nav {
    display: none;

    position: fixed;

    top: var(--sv-header-height);
    right: 0;
    bottom: 0;
    left: 0;

    z-index: var(--sv-z-overlay);

    overflow-y: auto;

    padding:
        var(--sv-space-5)
        var(--sv-container-padding)
        var(--sv-space-10);

    background:
        linear-gradient(
            to bottom,
            var(--sv-background),
            var(--sv-surface)
        );

    border-top: 1px solid var(--sv-border);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity var(--sv-transition-normal),
        transform var(--sv-transition-normal),
        visibility var(--sv-transition-normal);
}

.sv-mobile-nav.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.sv-mobile-nav-list {
    display: flex;
    flex-direction: column;

    gap: var(--sv-space-1);

    margin: 0;
    padding: 0;

    list-style: none;
}

.sv-mobile-nav-link {
    display: flex;
    align-items: center;

    gap: var(--sv-space-3);

    min-height: 52px;

    padding:
        var(--sv-space-3)
        var(--sv-space-4);

    color: var(--sv-text-secondary);

    font-size: var(--sv-font-size-md);
    font-weight: var(--sv-weight-medium);

    text-decoration: none;

    border-radius: var(--sv-radius-md);

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast);
}

.sv-mobile-nav-link:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-glass);
}

.sv-mobile-nav-link.is-active {
    color: var(--sv-theme-accent);

    background: var(--sv-primary-soft);
}

.sv-mobile-nav-link-icon {
    width: 20px;
    height: 20px;

    flex-shrink: 0;
}


/* Mobile section */

.sv-mobile-nav-section {
    margin-top: var(--sv-space-6);
}

.sv-mobile-nav-section:first-child {
    margin-top: 0;
}

.sv-mobile-nav-section-title {
    margin:
        0
        var(--sv-space-4)
        var(--sv-space-2);

    color: var(--sv-text-muted);

    font-size: var(--sv-font-size-xs);
    font-weight: var(--sv-weight-bold);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* Mobile product links */

.sv-mobile-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: var(--sv-space-2);
}

.sv-mobile-product-link {
    display: flex;
    flex-direction: column;

    gap: var(--sv-space-2);

    min-height: 100px;

    padding: var(--sv-space-4);

    color: var(--sv-text-secondary);

    text-decoration: none;

    background: var(--sv-surface-1);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-md);

    transition:
        color var(--sv-transition-fast),
        border-color var(--sv-transition-fast),
        background var(--sv-transition-fast);
}

.sv-mobile-product-link:hover {
    color: var(--sv-text-primary);

    background: var(--sv-surface-2);

    border-color: var(--sv-border-light);
}

.sv-mobile-product-link-icon {
    width: 24px;
    height: 24px;

    color: var(--sv-theme-accent);
}

.sv-mobile-product-link-title {
    font-size: var(--sv-font-size-sm);
    font-weight: var(--sv-weight-semibold);
}

.sv-mobile-product-link-description {
    color: var(--sv-text-muted);

    font-size: var(--sv-font-size-xs);

    line-height: 1.4;
}


/* ==========================================================================
   12. MOBILE ACCOUNT
   ========================================================================== */

.sv-mobile-account {
    display: flex;
    align-items: center;

    gap: var(--sv-space-3);

    padding: var(--sv-space-4);

    margin-bottom: var(--sv-space-5);

    background: var(--sv-surface-1);

    border: 1px solid var(--sv-border);

    border-radius: var(--sv-radius-lg);
}

.sv-mobile-account-avatar {
    width: 46px;
    height: 46px;

    overflow: hidden;

    flex-shrink: 0;

    background: var(--sv-surface-2);

    border: 1px solid var(--sv-border);

    border-radius: 50%;
}

.sv-mobile-account-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sv-mobile-account-info {
    min-width: 0;

    flex: 1;
}

.sv-mobile-account-name {
    color: var(--sv-text-primary);

    font-size: var(--sv-font-size-sm);
    font-weight: var(--sv-weight-semibold);
}

.sv-mobile-account-type {
    margin-top: 2px;

    color: var(--sv-theme-accent);

    font-size: var(--sv-font-size-xs);
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.sv-site-footer {
    position: relative;

    margin-top: var(--sv-space-20);

    background:
        linear-gradient(
            to bottom,
            var(--sv-surface),
            var(--sv-background)
        );

    border-top: 1px solid var(--sv-border);
}


/* Footer glow */

.sv-site-footer::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: 40%;
    height: 1px;

    transform: translateX(-50%);

    background: var(--sv-theme-accent);

    box-shadow:
        0 0 35px var(--sv-theme-glow);

    opacity: 0.75;
}


/* Footer container */

.sv-footer-inner {
    width: 100%;
    max-width: var(--sv-container-max);

    margin: 0 auto;

    padding:
        var(--sv-space-14)
        var(--sv-container-padding)
        var(--sv-space-6);
}


/* ==========================================================================
   14. FOOTER TOP
   ========================================================================== */

.sv-footer-top {
    display: grid;

    grid-template-columns:
        minmax(220px, 1.4fr)
        repeat(
            4,
            minmax(130px, 1fr)
        );

    gap: var(--sv-space-10);

    padding-bottom: var(--sv-space-12);
}


/* Footer brand */

.sv-footer-brand {
    max-width: 340px;
}

.sv-footer-brand .sv-brand {
    margin-bottom: var(--sv-space-4);
}

.sv-footer-description {
    color: var(--sv-text-muted);

    font-size: var(--sv-font-size-sm);

    line-height: var(--sv-line-relaxed);
}


/* Footer social */

.sv-footer-social {
    display: flex;
    flex-wrap: wrap;

    gap: var(--sv-space-2);

    margin-top: var(--sv-space-5);
}

.sv-footer-social-link {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--sv-text-muted);

    background: var(--sv-surface-1);

    border: 1px solid var(--sv-border);

    border-radius: 50%;

    transition:
        color var(--sv-transition-fast),
        background var(--sv-transition-fast),
        border-color var(--sv-transition-fast),
        transform var(--sv-transition-fast);
}

.sv-footer-social-link:hover {
    color: var(--sv-theme-accent);

    background: var(--sv-primary-soft);

    border-color: var(--sv-theme-accent);

    transform: translateY(-2px);
}

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


/* ==========================================================================
   15. FOOTER COLUMNS
   ========================================================================== */

.sv-footer-column-title {
    margin: 0 0 var(--sv-space-4);

    color: var(--sv-text-primary);

    font-size: var(--sv-font-size-sm);
    font-weight: var(--sv-weight-semibold);
}

.sv-footer-links {
    display: flex;
    flex-direction: column;

    gap: var(--sv-space-2);

    margin: 0;
    padding: 0;

    list-style: none;
}

.sv-footer-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    color: var(--sv-text-muted);

    font-size: var(--sv-font-size-sm);

    text-decoration: none;

    transition:
        color var(--sv-transition-fast);
}

.sv-footer-link:hover {
    color: var(--sv-theme-accent);
}


/* ==========================================================================
   16. FOOTER BOTTOM
   ========================================================================== */

.sv-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--sv-space-5);

    padding-top: var(--sv-space-5);

    border-top: 1px solid var(--sv-border);
}

.sv-footer-copyright {
    color: var(--sv-text-disabled);

    font-size: var(--sv-font-size-xs);
}

.sv-footer-legal {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: var(--sv-space-4);
}

.sv-footer-legal-link {
    color: var(--sv-text-disabled);

    font-size: var(--sv-font-size-xs);

    text-decoration: none;

    transition:
        color var(--sv-transition-fast);
}

.sv-footer-legal-link:hover {
    color: var(--sv-text-secondary);
}


/* ==========================================================================
   17. FOOTER PRODUCT BADGE
   ========================================================================== */

.sv-footer-product {
    display: inline-flex;
    align-items: center;

    gap: var(--sv-space-2);

    margin-top: var(--sv-space-6);

    color: var(--sv-text-disabled);

    font-size: var(--sv-font-size-xs);
}

.sv-footer-product-indicator {
    width: 6px;
    height: 6px;

    background: var(--sv-theme-accent);

    border-radius: 50%;

    box-shadow:
        0 0 8px var(--sv-theme-glow);
}


/* ==========================================================================
   18. RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 1200px) {

    .sv-header-search {
        width: 190px;
    }

    .sv-primary-nav-list {
        gap: 0;
    }

    .sv-primary-nav-link {
        padding-left: var(--sv-space-2);
        padding-right: var(--sv-space-2);
    }

    .sv-footer-top {
        grid-template-columns:
            minmax(220px, 1.4fr)
            repeat(
                3,
                minmax(130px, 1fr)
            );
    }
}


/* ==========================================================================
   19. RESPONSIVE — SMALL TABLET
   ========================================================================== */

@media (max-width: 992px) {

    .sv-header-inner {
        gap: var(--sv-space-3);
    }

    .sv-primary-nav {
        display: none;
    }

    .sv-mobile-menu-toggle {
        display: inline-flex;
    }

    .sv-header-search {
        width: min(
            220px,
            30vw
        );
    }

    .sv-product-nav {
        display: none;
    }

    .sv-mobile-nav {
        display: block;
    }

    .sv-footer-top {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .sv-footer-brand {
        grid-column: 1 / -1;

        max-width: 600px;
    }
}


/* ==========================================================================
   20. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .sv-header-inner {
        min-height: 64px;

        padding:
            0
            var(--sv-container-padding);
    }

    .sv-brand-mark {
        width: 34px;
        height: 34px;
    }

    .sv-brand-name {
        font-size: var(--sv-font-size-md);
    }

    .sv-header-search {
        display: none;
    }

    .sv-header-actions {
        margin-left: auto;
    }

    .sv-header-action {
        width: 38px;
        height: 38px;
    }

    .sv-account-info,
    .sv-account-chevron {
        display: none;
    }

    .sv-account-toggle {
        padding: 3px;
    }

    .sv-account-menu {
        right: -8px;

        width: min(
            280px,
            calc(100vw - 32px)
        );
    }

    .sv-mobile-nav {
        top: 64px;

        padding:
            var(--sv-space-4)
            var(--sv-container-padding)
            var(--sv-space-8);
    }

    .sv-footer-inner {
        padding-top: var(--sv-space-10);
    }

    .sv-footer-top {
        grid-template-columns: 1fr;

        gap: var(--sv-space-8);

        padding-bottom: var(--sv-space-8);
    }

    .sv-footer-brand {
        grid-column: auto;
    }

    .sv-footer-bottom {
        align-items: flex-start;

        flex-direction: column;
    }

    .sv-footer-legal {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   21. RESPONSIVE — SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .sv-header-inner {
        gap: var(--sv-space-2);
    }

    .sv-brand-name {
        display: none;
    }

    .sv-header-actions {
        gap: 0;
    }

    .sv-header-action {
        width: 36px;
        height: 36px;
    }

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

    .sv-mobile-product-grid {
        grid-template-columns: 1fr;
    }

    .sv-footer-legal {
        flex-direction: column;

        gap: var(--sv-space-2);
    }
}


/* ==========================================================================
   22. ACCESSIBILITY
   ========================================================================== */

.sv-site-header a:focus-visible,
.sv-site-header button:focus-visible,
.sv-site-footer a:focus-visible,
.sv-site-footer button:focus-visible {
    outline: 2px solid var(--sv-theme-accent);

    outline-offset: 3px;
}


/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

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

    .sv-site-header,
    .sv-brand-mark,
    .sv-primary-nav-link,
    .sv-nav-dropdown-menu,
    .sv-account-menu,
    .sv-mobile-nav,
    .sv-mobile-menu-toggle-line,
    .sv-header-action,
    .sv-footer-social-link,
    .sv-footer-link,
    .sv-footer-legal-link {
        transition: none;
    }
}