:root {
    --sc-button-blue: #48CAE4;
    --sc-button-blue-hover: #00B4D8;
    --sc-button-blue-shadow: rgba(0, 180, 216, .28);
}

/* SugarClass public action buttons share the same ocean-blue treatment. */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-light,
.btn-border-white,
.btn-border-gray300,
a.btn:not(.btn-link),
button.btn:not(.btn-transparent):not(.btn-icon),
input[type="submit"].btn {
    border-color: var(--sc-button-blue) !important;
    background: var(--sc-button-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px var(--sc-button-blue-shadow) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-dark:hover,
.btn-dark:focus,
.btn-light:hover,
.btn-light:focus,
.btn-border-white:hover,
.btn-border-gray300:hover,
a.btn:not(.btn-link):hover,
button.btn:not(.btn-transparent):not(.btn-icon):hover,
input[type="submit"].btn:hover {
    border-color: var(--sc-button-blue-hover) !important;
    background: var(--sc-button-blue-hover) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px var(--sc-button-blue-shadow) !important;
    transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
    border-color: var(--sc-button-blue) !important;
    background: transparent !important;
    color: var(--sc-button-blue-hover) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    border-color: var(--sc-button-blue) !important;
    background: var(--sc-button-blue) !important;
    color: #fff !important;
}

/* Custom search and profile actions that do not use Bootstrap button classes. */
.sc-finder-search-button,
.sc-tuturn-card-profile-button,
.sc-v2-hero .btn-primary,
.sc-contact-page form .btn-primary,
.footer .subscribe-input .btn {
    border-color: var(--sc-button-blue) !important;
    background: var(--sc-button-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px var(--sc-button-blue-shadow) !important;
}

.sc-finder-search-button:hover,
.sc-tuturn-card-profile-button:hover,
.sc-v2-hero .btn-primary:hover,
.sc-contact-page form .btn-primary:hover,
.footer .subscribe-input .btn:hover {
    border-color: var(--sc-button-blue-hover) !important;
    background: var(--sc-button-blue-hover) !important;
    color: #fff !important;
}

/* Share the homepage canvas token with the legacy panel header. */
.sc-at-header {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--sc-public-canvas) !important;
    padding: 12px 0 !important;
}

/* Keep the Home hero's blue bubble behind the media artwork, not above it. */
body:has(.sc-v2-home--dark-header) .sc-at-header {
    position: relative;
    z-index: auto;
    overflow: visible !important;
    background: transparent !important;
}

body:has(.sc-v2-home--dark-header) .sc-at-header::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block !important;
    background: linear-gradient(135deg, #eefbff 0%, #f8fdff 58%, #fff8dc 100%);
    content: '' !important;
    pointer-events: none;
}

body:has(.sc-v2-home--dark-header) .sc-v2-hero {
    position: relative;
    z-index: 1;
    overflow: visible;
}

body:has(.sc-v2-home--dark-header) .sc-at-header__inner {
    position: relative;
    z-index: 20;
}

/* Keep every public-header item vertically balanced with equal top/bottom space. */
.sc-at-header__links a,
.sc-at-header__selector summary,
.sc-at-header__help {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.sc-at-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1px solid #ade8f4;
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    color: #03045e;
    cursor: pointer;
}

.sc-at-header__toggle:hover,
.sc-at-header__toggle:focus-visible {
    border-color: #48cae4;
    color: #0077b6;
    outline: none;
}

.sc-at-header__toggle-icon,
.sc-at-header__toggle-icon span {
    display: block;
}

.sc-at-header__toggle-icon {
    position: relative;
    width: 20px;
    height: 16px;
}

.sc-at-header__toggle-icon span {
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform .2s ease, top .2s ease, opacity .2s ease;
}

.sc-at-header__toggle-icon span:nth-child(1) { top: 0; }
.sc-at-header__toggle-icon span:nth-child(2) { top: 7px; }
.sc-at-header__toggle-icon span:nth-child(3) { top: 14px; }

.sc-at-header.is-mobile-open .sc-at-header__toggle-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.sc-at-header.is-mobile-open .sc-at-header__toggle-icon span:nth-child(2) {
    opacity: 0;
}

.sc-at-header.is-mobile-open .sc-at-header__toggle-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

.sc-at-header__links a,
.sc-at-header__selector,
.sc-at-header__selector summary,
.sc-at-header__help,
.sc-at-header .sc-current-currency,
.sc-at-header__actions > .d-flex a,
.sc-at-header__actions > .d-flex a.text-dark-blue,
.sc-at-header .sc-at-header__actions a[href="/login"],
.sc-at-header .sc-at-header__actions a[href*="register"],
.sc-at-header .navbar-user,
.sc-at-header .navbar-user .user-name,
.sc-at-header .navbar-user .text-gray {
    color: #03045e !important;
}

/* Match the entire user panel's legacy navbar to the public header canvas.
   Scope to the panel so the existing sidebar, buttons, and other layouts stay intact. */
body.sc-panel-layout #navbar {
    border-bottom: 1px solid #ade8f4 !important;
    background: var(--sc-public-canvas) !important;
    color: #03045e !important;
}

#navbar .navbar-brand img,
#navbar .navbar-brand img.sc-site-logo {
        content: url('/store/1/hlogo1.png') !important;
    width: 175px !important;
    max-width: 175px !important;
    height: auto !important;
    max-height: 58px !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
}

#navbar .nav-link,
#navbar .nav-link:hover,
#navbar .nav-link.active,
#navbar .navbar-toggler,
#navbar .navbar-toggler-icon,
#navbar .user-feedback-header-button,
#navbar .nav-icons-or-start-live,
#navbar .nav-icons-or-start-live svg,
#navbar .nav-notify-cart-dropdown button,
#navbar .nav-notify-cart-dropdown svg {
    color: #03045e !important;
}

#navbar .nav-notify-cart-dropdown,
#navbar .nav-notify-cart-dropdown .dropdown,
#navbar .nav-notify-cart-dropdown .border-left {
    background: transparent !important;
    color: #03045e !important;
    border-color: #c8e8ee !important;
}

#navbar .nav-notify-cart-dropdown a.btn-transparent,
#navbar .nav-notify-cart-dropdown button.btn-transparent,
#navbar .nav-notify-cart-dropdown a.btn-transparent:hover,
#navbar .nav-notify-cart-dropdown button.btn-transparent:hover,
#navbar .nav-notify-cart-dropdown a.btn-transparent:focus,
#navbar .nav-notify-cart-dropdown button.btn-transparent:focus {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #03045e !important;
    transform: none !important;
}

#navbar .nav-link:hover,
#navbar .nav-link.active {
    color: #0794cd !important;
}

#navbar .nav-link::after {
    background: #48cae4 !important;
}

#navbar .menu-category {
    border-color: #d8edf2 !important;
    background: rgba(255, 255, 255, .82) !important;
    color: #03045e !important;
}

#navbar .menu-category > ul > li {
    color: #03045e !important;
}

/* Profile tabs use the same navy text and cyan active indicator as Home. */
#tabs-tab {
    border-bottom: 1px solid #d8edf2 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

#tabs-tab .nav-item {
    margin-top: 24px !important;
}

#tabs-tab .nav-item > a,
#tabs-tab .nav-item > a.text-dark-blue {
    color: #03045e !important;
    font-weight: 600 !important;
    transition: color .2s ease;
}

#tabs-tab .nav-item > a:hover,
#tabs-tab .nav-item > a.active {
    color: #0794cd !important;
}

#tabs-tab .nav-item > a::after {
    background: #48cae4 !important;
    border-radius: 999px;
    bottom: -16px !important;
    height: 3px !important;
}

/* Use the dark wordmark on the pale header so the logo remains readable. */
.sc-at-header__brand img {
    content: normal !important;
    background: transparent !important;
    mix-blend-mode: normal;
}

/* Make the SugarClass wordmark more visible without forcing the nav to wrap. */
.sc-at-header__brand img {
    width: 220px !important;
    height: 72px !important;
    max-width: none;
    transform: scale(1.15);
    transform-origin: left center;
}

@media (max-width: 1200px) {
    .sc-at-header__brand img {
        width: 185px !important;
        height: 64px !important;
    }
}

/* Cart is a navigation icon, not a primary action button. */
.sc-at-header__icon-group .dropdown > .btn-transparent,
.sc-at-header__icon-group .dropdown > .btn-transparent:hover,
.sc-at-header__icon-group .dropdown > .btn-transparent:focus,
.sc-at-header__icon-group .dropdown > .btn-transparent:active,
.sc-at-header__icon-group .dropdown > .btn-transparent.show {
    width: auto !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #03045e !important;
    transform: none !important;
}

.sc-at-header__icon-group .dropdown > .btn-transparent:hover,
.sc-at-header__icon-group .dropdown > .btn-transparent:focus,
.sc-at-header__icon-group .dropdown > .btn-transparent:active,
.sc-at-header__icon-group .dropdown > .btn-transparent.show {
    color: #0077b6 !important;
}

.sc-v2-home--dark-header .sc-v2-hero {
    margin-top: -1px;
    border-top: 0 !important;
    background: linear-gradient(135deg, #eefbff 0%, #f8fdff 58%, #fff8dc 100%) !important;
}

/* Keep the footer light on every public page, not only Contact. */
.footer {
    border-top: 1px solid #d6eef2 !important;
    background: linear-gradient(180deg, #eefbff 0%, #ffffff 100%) !important;
    color: #03045e !important;
}

/* Use one font across footer headings, copy, links, and CMS-injected text. */
.footer,
.footer * {
    font-family: 'SugarClass Montserrat', Montserrat, Arial, sans-serif !important;
}

.footer > .container {
    width: 84%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    padding-top: 28px !important;
}

.footer .footer-copyright-card > .container {
    width: 84%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

.footer .text-white,
.footer ul li a,
.footer a,
.footer .header,
.footer p,
.footer li,
.footer .font-14,
.footer .footer-copyright-card {
    color: #03045e !important;
}

.footer .header {
    font-weight: 750 !important;
}

.footer a:hover {
    color: #0794cd !important;
}

.footer .border-blue {
    border-color: #c8e8ee !important;
}

.footer .footer-logo img,
.footer .footer-social img {
    filter: brightness(0) saturate(100%) invert(12%) sepia(48%) saturate(3276%) hue-rotate(235deg) brightness(74%) contrast(123%);
}

.footer .footer-copyright-card {
    background: #eefbff !important;
    border-top: 1px solid #d6eef2 !important;
}

/* The legacy footer adds a black overlay above the copyright strip. Keep the
   strip's actual pale-blue color visible instead of washing it into gray. */
.footer .footer-copyright-card::before {
    background: transparent !important;
    opacity: 0 !important;
}

/* Override legacy footer text classes so the pale footer remains readable. */
.footer .mt-20,
.footer .mt-20 *,
.footer .footer-copyright-card .container > div,
.footer .footer-copyright-card .container > div * {
    color: #03045e !important;
}

.footer .footer-subscribe {
    border-color: #c8e8ee !important;
    background: linear-gradient(135deg, #eafbf6 0%, #eef9ff 100%) !important;
    box-shadow: 0 16px 34px rgba(11, 79, 92, .09) !important;
}

.footer .footer-subscribe strong,
.footer .footer-subscribe span {
    color: #03045e !important;
}

/* Public CMS pages use the same light SugarClass canvas as the homepage. */
.sc-other-page {
    min-height: calc(100vh - 120px);
    background: var(--sc-public-canvas) !important;
    color: #486581;
}

.sc-other-page .cart-banner {
    border-bottom: 1px solid #ade8f4;
    background: var(--sc-public-canvas) !important;
}

.sc-other-page .cart-banner h1 {
    color: #03045e !important;
}

.sc-other-page .post-show,
.sc-other-page .post-show p,
.sc-other-page .post-show span,
.sc-other-page .post-show li,
.sc-other-page .post-show div {
    color: #486581 !important;
}

.sc-other-page .post-show h1,
.sc-other-page .post-show h2,
.sc-other-page .post-show h3,
.sc-other-page .post-show h4,
.sc-other-page .post-show h5,
.sc-other-page .post-show h6 {
    color: #03045e !important;
}

/* Registration account selection follows the white SugarClass visual system. */
body:has(.sc-account-type-page) {
    background: #fff !important;
    overflow-x: hidden;
}

#app:has(.sc-account-type-page) {
    background: #fff !important;
}

.sc-account-type-page {
    width: 84%;
    max-width: none;
    padding: 56px 0 72px;
}

.sc-account-type-page .login-container {
    align-items: stretch;
    overflow: hidden;
    margin: 0;
    border: 1px solid #e5ebf5;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(3, 4, 94, .08);
}

.sc-account-type-page .sc-account-type-art {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    padding: 36px;
    background: linear-gradient(145deg, #f7fbff 0%, #fff 62%, #eef8ff 100%);
}

.sc-account-type-gallery {
    position: relative;
    width: 100%;
    max-width: 500px;
    min-height: 440px;
}

.sc-account-type-gallery-main,
.sc-account-type-gallery-secondary {
    position: absolute;
    overflow: hidden;
    border: 7px solid #fff;
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(3, 4, 94, .14);
}

.sc-account-type-gallery-main {
    z-index: 2;
    top: 24px;
    left: 8%;
    width: 84%;
    height: 330px;
    transform: rotate(-3deg);
    animation: sc-account-gallery-main 6s ease-in-out infinite;
}

.sc-account-type-gallery-secondary {
    z-index: 3;
    bottom: 12px;
    left: 0;
    width: 48%;
    height: 205px;
    transform: rotate(5deg);
    animation: sc-account-gallery-secondary 5s ease-in-out .35s infinite;
}

@keyframes sc-account-gallery-main {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-7px); }
}

@keyframes sc-account-gallery-secondary {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(7px); }
}

.sc-account-type-gallery-main img,
.sc-account-type-gallery-secondary img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-account-type-gallery-main span,
.sc-account-type-gallery-secondary span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    border-radius: 999px;
    padding: 7px 12px;
    background: #08086f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.sc-account-type-gallery-secondary span {
    right: auto;
    left: 10px;
    background: #0794cd;
}

.sc-account-type-page .sc-account-type-form {
    display: flex;
    align-items: center;
    padding: 0;
}

.sc-account-type-page .login-card {
    width: 100%;
    padding: 64px 58px;
}

.sc-account-type-page .login-card h1,
.sc-account-type-page .login-card label {
    color: #03045e;
}

.sc-account-type-page .login-card > p,
.sc-account-type-page .login-card > div span {
    color: #7182a1 !important;
}

.sc-account-type-page .login-card a {
    color: #0794cd;
}

/* Keep account pages aligned with the redesigned Home content canvas. */
body.sc-wide-site .sc-account-type-page {
    width: 84%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

/* The Login page footer follows the same content width as the Home page. */
body:has(.sc-account-type-page) .footer > .container,
body:has(.sc-account-type-page) .footer .footer-copyright-card > .container {
    width: 84%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

/* Give the long registration form more room and keep its visual anchored near the top. */
.sc-register-page .login-container {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
}

.sc-register-page .login-container > .sc-account-type-art,
.sc-register-page .login-container > .sc-account-type-form {
    width: auto;
    max-width: none;
    flex: none;
}

.sc-register-page .sc-account-type-art {
    align-items: flex-start;
    padding-top: 24px;
}

.sc-register-page .sc-account-type-gallery {
    min-height: 390px;
    margin-top: -4px;
}

.sc-register-page .sc-account-type-gallery-main {
    top: 8px;
    height: 292px;
}

.sc-register-page .sc-account-type-gallery-secondary {
    bottom: 0;
    height: 178px;
}

.sc-register-page .sc-account-type-form {
    align-items: flex-start;
}

.sc-register-page .login-card {
    padding: 40px 48px 48px;
}

.sc-register-page .login-card form {
    margin-top: 24px !important;
}

.sc-register-page .login-card .form-group {
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .footer > .container,
    .footer .footer-copyright-card > .container {
        width: calc(100% - 32px);
    }

    .sc-account-type-page {
        width: calc(100% - 32px);
        padding: 28px 0 48px;
    }

    .sc-account-type-page .sc-account-type-art {
        min-height: 240px;
        padding: 22px;
    }

    .sc-account-type-gallery {
        min-height: 280px;
    }

    .sc-account-type-gallery-main {
        top: 14px;
        left: 8%;
        width: 84%;
        height: 205px;
    }

    .sc-account-type-gallery-secondary {
        bottom: 2px;
        width: 48%;
        height: 122px;
    }

    .sc-account-type-gallery-main span,
    .sc-account-type-gallery-secondary span {
        bottom: 7px;
        right: 7px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .sc-account-type-gallery-secondary span {
        left: 7px;
        right: auto;
    }

    .sc-account-type-page .login-card {
        padding: 36px 24px 40px;
    }

    .sc-register-page .login-container {
        display: block;
    }

    .sc-register-page .sc-account-type-art {
        align-items: center;
        padding-top: 22px;
    }

    .sc-register-page .sc-account-type-gallery {
        min-height: 280px;
        margin-top: 0;
    }

    .sc-register-page .sc-account-type-gallery-main {
        top: 14px;
        height: 205px;
    }

    .sc-register-page .sc-account-type-gallery-secondary {
        bottom: 2px;
        height: 122px;
    }

    .sc-register-page .login-card {
        padding: 32px 24px 40px;
    }

    body.sc-wide-site .sc-account-type-page {
        width: calc(100% - 32px);
    }

    body:has(.sc-account-type-page) .footer > .container,
    body:has(.sc-account-type-page) .footer .footer-copyright-card > .container {
        width: calc(100% - 32px);
    }
}

/* Collapse the public navigation into a touch-friendly menu on tablets and phones. */
@media (max-width: 820px) {
    .sc-at-header {
        padding: 8px 0 !important;
    }

    .sc-at-header__inner {
        position: relative;
        width: calc(100% - 32px) !important;
        min-height: 56px;
        gap: 0 !important;
        flex-wrap: wrap;
        overflow: visible !important;
    }

    .sc-at-header__brand {
        min-width: 0;
        max-width: calc(100% - 58px);
    }

    .sc-at-header__brand img {
        width: 138px !important;
        height: 44px !important;
        transform: none;
    }

    .sc-at-header__toggle {
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .sc-at-header__links,
    .sc-at-header__actions {
        display: none;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    .sc-at-header.is-mobile-open .sc-at-header__links,
    .sc-at-header.is-mobile-open .sc-at-header__actions {
        display: flex;
    }

    .sc-at-header.is-mobile-open .sc-at-header__links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 0;
        border-top: 1px solid #d8edf2;
    }

    .sc-at-header.is-mobile-open .sc-at-header__links a {
        display: block;
        width: 100%;
        padding: 12px 4px !important;
        border-bottom: 1px solid rgba(173, 232, 244, .5);
        font-size: 15px;
    }

    .sc-at-header.is-mobile-open .sc-at-header__actions {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 14px;
        padding: 12px 0 6px;
        white-space: normal;
        border-top: 1px solid #d8edf2;
    }

    .sc-at-header.is-mobile-open .sc-at-header__selector {
        flex: 0 0 auto;
    }

    .sc-at-header.is-mobile-open .sc-at-header__selector summary,
    .sc-at-header.is-mobile-open .sc-at-header__help {
        padding: 8px 4px !important;
    }

    .sc-at-header.is-mobile-open .sc-at-header__selector-menu {
        position: static;
        width: 100%;
        min-width: 160px;
        margin-top: 4px;
        box-shadow: 0 8px 20px rgba(3, 4, 94, .1);
    }

    .sc-at-header.is-mobile-open .sc-at-header__icon-group {
        gap: 2px;
    }

    .sc-at-header.is-mobile-open .navbar-auth-user-dropdown {
        margin-left: 0 !important;
    }

    .sc-at-header.is-mobile-open .navbar-auth-user-dropdown > .navbar-user > div {
        display: flex !important;
    }

    .sc-at-header.is-mobile-open .navbar-auth-user-dropdown > div:last-child {
        right: 0;
        left: auto;
    }
}

@media (max-width: 480px) {
    .sc-at-header__inner {
        width: calc(100% - 24px) !important;
    }

    .sc-at-header__brand img {
        width: 124px !important;
    }

    .sc-at-header.is-mobile-open .sc-at-header__actions {
        align-items: flex-start;
    }

    .sc-at-header.is-mobile-open .sc-at-header__selector,
    .sc-at-header.is-mobile-open .sc-at-header__icon-group,
    .sc-at-header.is-mobile-open .sc-at-header__help,
    .sc-at-header.is-mobile-open .navbar-auth-user-dropdown,
    .sc-at-header.is-mobile-open .navbar-auth-user-dropdown + div {
        flex: 0 0 auto;
    }
}

/* Keep the public and panel desktop headers the same compact height and logo
   geometry. The logo asset includes transparent side padding, so both headers
   use the same crop offset and scale to align the visible mark. */
@media (min-width: 992px) {
    .sc-at-header {
        min-height: 80px;
        padding: 0 !important;
    }

    .sc-at-header__inner {
        min-height: 80px;
        align-items: center;
    }

    body.sc-wide-site .sc-at-header__brand {
        width: 178px;
        overflow: visible;
    }

    body.sc-wide-site .sc-at-header__brand img,
    body.sc-panel-layout #navbar .navbar-brand img,
    body.sc-panel-layout #navbar .navbar-brand img.sc-site-logo {
        width: 180px !important;
        height: 56px !important;
        max-width: none !important;
        max-height: 56px !important;
        transform: translateX(-24px) scale(1.15);
        transform-origin: left center;
        object-fit: contain !important;
        object-position: center;
        mix-blend-mode: normal !important;
    }

    body.sc-panel-layout #navbar .navbar-brand img,
    body.sc-panel-layout #navbar .navbar-brand img.sc-site-logo {
        content: url('/assets/default/img/sugarclass/sugarclass-logo-transparent.png') !important;
    }

    body.sc-panel-layout #navbar {
        min-height: 80px;
        padding: 0;
        box-shadow: none;
        align-items: center;
    }

    body.sc-panel-layout #navbar > .container-fluid {
        width: calc(100% - 48px);
        max-width: none;
        min-height: 80px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
        padding-left: 0;
    }

    body.sc-panel-layout #navbar > .container-fluid > .d-flex {
        min-height: 80px;
        align-items: center;
    }

    body.sc-panel-layout #navbar .navbar-toggle-content {
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    body.sc-panel-layout #navbar .navbar-nav,
    body.sc-panel-layout #navbar .nav-icons-or-start-live {
        align-items: center;
    }

    body.sc-panel-layout #navbar .navbar-brand {
        flex: 0 0 178px;
        width: 178px;
        height: auto;
        min-height: 80px;
        align-self: stretch;
        margin: 0;
        padding: 0;
        overflow: visible;
        align-items: center;
        justify-content: flex-start !important;
    }

    body.sc-panel-layout .panel-sidebar {
        top: 80px;
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    body.sc-wide-site .sc-at-header__brand,
    body.sc-panel-layout #navbar .navbar-brand {
        width: 154px;
    }

    body.sc-panel-layout #navbar .navbar-brand {
        flex-basis: 154px;
    }

    body.sc-wide-site .sc-at-header__brand img,
    body.sc-panel-layout #navbar .navbar-brand img,
    body.sc-panel-layout #navbar .navbar-brand img.sc-site-logo {
        transform: translateX(-20px) scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-account-type-gallery-main,
    .sc-account-type-gallery-secondary {
        animation: none;
    }
}

/* Categories should sit directly on the pale header without a gray pill. */
#navbar .menu-category,
#navbar .menu-category > ul > li {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep unread counts as compact circular badges instead of stretched red marks. */
#navbar .nav-notify-cart-dropdown .btn-transparent {
    position: relative;
}

#navbar .nav-notify-cart-dropdown .badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

/* Keep the public header's notification panel inside the viewport. */
body.sc-wide-site .sc-at-header__icon-group .sc-header-notification-dropdown > .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

body.sc-wide-site .sc-at-header__icon-group .sc-header-notification-dropdown > .dropdown-menu::after {
    left: auto;
    right: 15px;
}

body.sc-wide-site.rtl .sc-at-header__icon-group .sc-header-notification-dropdown > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

body.sc-wide-site.rtl .sc-at-header__icon-group .sc-header-notification-dropdown > .dropdown-menu::after {
    left: 15px;
    right: auto;
}