:root {
    --eney-ink: #142933;
    --eney-ink-2: #203a45;
    --eney-muted: #6b7d85;
    --eney-line: #dfe7ea;
    --eney-bg: #f5f7f8;
    --eney-surface: #ffffff;
    --eney-soft: #eef3f4;

    --eney-success: #237348;
    --eney-success-bg: #e7f6ed;
    --eney-incoming: #8a5c15;
    --eney-incoming-bg: #fff3d9;
    --eney-danger: #a04642;
    --eney-danger-bg: #fbeceb;

    --bs-body-color: var(--eney-ink);
    --bs-body-bg: var(--eney-bg);
    --bs-border-color: var(--eney-line);
    --bs-dark: var(--eney-ink);
    --bs-dark-rgb: 20, 41, 51;
    --bs-link-color: var(--eney-ink);

    --catalog-radius: 1rem;
    --catalog-shadow: 0 .7rem 2rem rgb(20 41 51 / .07);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 88% 0%, rgb(20 41 51 / .04), transparent 26rem),
        var(--eney-bg);
}

body > main {
    flex: 1 0 auto;
}

.site-header {
    z-index: 1030;
}

.site-header .navbar {
    min-height: 4.75rem;
    background: rgb(255 255 255 / .95) !important;
    backdrop-filter: blur(14px);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
}

.brand-symbol {
    display: grid;
    place-items: center;
    width: 2.9rem;
    aspect-ratio: 1;
    border-radius: .8rem;
    background: var(--eney-ink);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.brand-copy {
    display: grid;
    line-height: 1.05;
}

.brand-copy strong {
    letter-spacing: .06em;
}

.brand-copy small {
    margin-top: .25rem;
    color: var(--eney-muted);
    font-size: .68rem;
}

.catalog-search {
    max-width: 52rem;
    margin-inline: auto;
}

.search-group .form-control,
.search-group .input-group-text,
.search-group .btn {
    min-height: 2.85rem;
}

.search-group .form-control:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
}

.filters-sticky {
    position: sticky;
    top: 6.25rem;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    padding-right: .2rem;
    scrollbar-width: thin;
}

.category-nav {
    display: grid;
    gap: .2rem;
}

.category-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 2.35rem;
    padding:
        .45rem
        .55rem
        .45rem
        calc(.55rem + var(--category-depth, 0) * .78rem);
    border-radius: .65rem;
    color: var(--eney-ink-2);
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.category-link:hover {
    background: var(--eney-soft);
}

.category-link.active {
    background: var(--eney-ink);
    color: #fff;
}

.category-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-dot {
    display: inline-block;
    width: .32rem;
    aspect-ratio: 1;
    margin-right: .3rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    vertical-align: middle;
}

.category-count {
    min-width: 1.8rem;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: rgb(20 41 51 / .07);
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
}

.category-link.active .category-count {
    background: rgb(255 255 255 / .15);
}

.catalog-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.catalog-toolbar {
    border-radius: var(--catalog-radius);
}

.catalog-toolbar .form-select {
    width: auto;
    min-width: 9rem;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.product-card {
    overflow: hidden;
    border-radius: var(--catalog-radius);
    box-shadow: var(--catalog-shadow) !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.75rem rgb(20 41 51 / .11) !important;
}

.product-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f8fafb);
}

.product-media img {
    width: 100%;
    height: 100%;
    padding: clamp(.75rem, 2vw, 1.25rem);
    object-fit: contain;
    transition: transform .2s ease;
}

.product-card:hover .product-media img {
    transform: scale(1.025);
}

.media-placeholder {
    width: 100%;
    height: 100%;
    min-height: 15rem;
    display: grid;
    place-items: center;
    color: #95a5ac;
    background:
        linear-gradient(
            135deg,
            #f6f8f9 25%,
            #edf2f3 25% 50%,
            #f6f8f9 50% 75%,
            #edf2f3 75%
        );
    background-size: 1.5rem 1.5rem;
}

.availability-badge,
.variant-badge {
    position: absolute;
    top: .75rem;
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 750;
}

.availability-badge {
    left: .75rem;
}

.availability-badge.static {
    position: static;
}

.availability-badge.is-stock {
    background: var(--eney-success-bg);
    color: var(--eney-success);
}

.availability-badge.is-incoming {
    background: var(--eney-incoming-bg);
    color: var(--eney-incoming);
}

.availability-badge.is-empty {
    background: var(--eney-danger-bg);
    color: var(--eney-danger);
}

.variant-badge {
    right: .75rem;
    background: rgb(20 41 51 / .08);
    color: var(--eney-ink);
}

.product-code {
    color: var(--eney-muted);
    font-size: .72rem;
    font-weight: 650;
}

.product-title {
    line-height: 1.38;
}

.product-title a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--eney-ink);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.product-title a:hover {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.option-name {
    color: #425a64;
    font-size: .76rem;
}

.category-breadcrumb-mini {
    display: -webkit-box;
    overflow: hidden;
    color: var(--eney-muted);
    font-size: .69rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-card-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
}

.product-price {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 800;
}

.product-stock {
    margin-top: .18rem;
    color: var(--eney-muted);
    font-size: .72rem;
}

.incoming-text {
    color: var(--eney-incoming);
}

.catalog-grid.list-view {
    grid-template-columns: 1fr;
}

.catalog-grid.list-view .product-card {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
}

.catalog-grid.list-view .product-media {
    aspect-ratio: 1;
}

.catalog-grid.list-view .card-body {
    padding: 1.25rem 1.5rem;
}

.empty-state {
    border-radius: var(--catalog-radius);
}

.empty-symbol {
    display: grid;
    place-items: center;
    width: 4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--eney-soft);
    color: var(--eney-muted);
    font-size: 2rem;
}

.page-link {
    border: 0;
    border-radius: .6rem !important;
    color: var(--eney-ink);
}

.page-item.active .page-link {
    background: var(--eney-ink);
}

/* Detail */

.breadcrumb a {
    color: var(--eney-muted);
    text-decoration: none;
}

.product-main-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 1.2rem;
    background: #fff;
}

.product-main-image img {
    width: 100%;
    height: 100%;
    padding: clamp(1rem, 3vw, 2rem);
    object-fit: contain;
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .55rem;
}

.gallery-thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: .2rem;
    overflow: hidden;
    border: 1px solid var(--eney-line);
    border-radius: .7rem;
    background: #fff;
    cursor: pointer;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--eney-ink);
    box-shadow: 0 0 0 .12rem rgb(20 41 51 / .08);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.related-arrow {
    position: absolute;
    right: .2rem;
    top: .15rem;
    display: grid;
    place-items: center;
    width: 1.1rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--eney-ink);
    color: #fff;
    font-size: .6rem;
}

.product-summary {
    position: sticky;
    top: 6.25rem;
    border-radius: 1.2rem;
}

.option-pill {
    display: inline-flex;
    width: fit-content;
    padding: .4rem .65rem;
    border-radius: .55rem;
    background: var(--eney-soft);
    color: #415964;
    font-size: .8rem;
}

.product-detail-price {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.stock-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem 1rem;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    padding: .27rem .5rem;
    border-radius: .45rem;
    background: var(--eney-soft);
    color: #48616b;
    font-size: .7rem;
}

.category-chip:hover {
    color: var(--eney-ink);
}

.related-products-list {
    display: grid;
    gap: .45rem;
}

.related-product-row {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .45rem;
    border: 1px solid var(--eney-line);
    border-radius: .75rem;
    color: var(--eney-ink);
    text-decoration: none;
    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.related-product-row:hover {
    border-color: #bdcbd0;
    background: #f8fafb;
}

.related-product-row img {
    width: 3.2rem;
    aspect-ratio: 1;
    padding: .2rem;
    border-radius: .5rem;
    object-fit: contain;
    background: #fff;
}

.related-product-copy {
    min-width: 0;
    display: grid;
}

.related-product-copy strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-product-copy small {
    color: var(--eney-muted);
    font-size: .68rem;
}

.related-product-price {
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
}

.product-meta-table {
    border-top: 1px solid var(--eney-line);
}

.product-meta-table > div {
    display: grid;
    grid-template-columns: minmax(8rem, .8fr) 1.2fr;
    gap: 1rem;
    padding-block: .78rem;
    border-bottom: 1px solid var(--eney-line);
    font-size: .84rem;
}

.product-meta-table span {
    color: var(--eney-muted);
}

.product-meta-table strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.property-table {
    container-type: inline-size;
}

.property-row {
    display: grid;
    grid-template-columns: minmax(13rem, 32%) 1fr;
    border-bottom: 1px solid var(--eney-line);
}

.property-row:last-child {
    border-bottom: 0;
}

.property-key,
.property-values {
    padding: .75rem 1.25rem;
    overflow-wrap: anywhere;
}

.property-key {
    background: #f8fafb;
    color: var(--eney-muted);
}

@container (max-width: 36rem) {
    .property-row {
        grid-template-columns: 1fr;
    }

    .property-key {
        padding-bottom: .3rem;
    }

    .property-values {
        padding-top: .3rem;
    }
}

@media (max-width: 1199.98px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-thumbs {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .site-header .navbar {
        min-height: auto;
        padding-block: .65rem;
    }

    .brand-copy small {
        display: none;
    }

    .catalog-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .product-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .container-xxl {
        --bs-gutter-x: 1rem;
    }

    .brand-symbol {
        width: 2.35rem;
    }

    .search-group .btn {
        padding-inline: .9rem !important;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-hero {
        align-items: flex-start;
    }

    .catalog-toolbar .card-body {
        align-items: stretch !important;
    }

    .catalog-toolbar .form-select {
        width: 100%;
    }

    .catalog-grid.list-view .product-card {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .catalog-grid.list-view .card-body {
        padding: .9rem;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .product-meta-table > div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .product-meta-table strong {
        text-align: left;
    }

    .related-product-row {
        grid-template-columns: 2.8rem minmax(0, 1fr);
    }

    .related-product-row img {
        width: 2.8rem;
    }

    .related-product-price {
        grid-column: 2;
    }
}

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


/* Hidden settings page */

.settings-login-page {
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.settings-login-card {
    width: min(100%, 29rem);
    border-radius: 1.25rem;
}

.settings-container {
    max-width: 980px;
}

.settings-card {
    border-radius: 1.1rem;
}

.tier-table-head,
.tier-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
}

.tier-table-head {
    display: grid;
    padding: 0 .15rem .55rem;
    color: var(--eney-muted);
    font-size: .75rem;
    font-weight: 700;
}

.tiers-container {
    display: grid;
    gap: .65rem;
}

.tier-row {
    display: grid;
    padding: .75rem;
    border: 1px solid var(--eney-line);
    border-radius: .8rem;
    background: #fafcfc;
}

.tier-actions {
    display: flex;
    justify-content: flex-end;
}

.empty-tier-message {
    padding: 2rem;
    border: 1px dashed #cbd6da;
    border-radius: .8rem;
    color: var(--eney-muted);
    text-align: center;
    background: #fafcfc;
}

.settings-example {
    padding: .9rem 1rem;
    border-radius: .75rem;
    background: var(--eney-soft);
    color: #50656e;
    font-size: .82rem;
}

.settings-save-bar {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .tier-row {
        grid-template-columns: 1fr;
    }

    .tier-actions .btn,
    .settings-save-bar .btn {
        width: 100%;
    }
}


/* Pre-release pen quote calculator */

.quote-modal-content {
    border-radius: 1.2rem;
    box-shadow: 0 1.5rem 4rem rgb(20 41 51 / .2);
}

.quote-breakdown {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border-radius: .9rem;
    background: var(--eney-soft);
}

.quote-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.quote-row span {
    color: var(--eney-muted);
}

.quote-row strong {
    text-align: right;
    white-space: nowrap;
}

.quote-divider {
    height: 1px;
    background: rgb(20 41 51 / .12);
}

.quote-row-total {
    padding-top: .1rem;
    font-size: 1.05rem;
}

.quote-row-total span,
.quote-row-total strong {
    color: var(--eney-ink);
    font-weight: 800;
}

.quote-row-unit strong {
    font-size: 1.2rem;
    color: var(--eney-ink);
}



/* Advertising agency discount switch */

.agency-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--eney-line);
    border-radius: .85rem;
    background: #fafcfc;
}

.agency-toggle .form-check-input {
    width: 2.65rem;
    height: 1.4rem;
    margin-right: .45rem;
    cursor: pointer;
}

.agency-toggle .form-check-input:checked {
    background-color: var(--eney-ink);
    border-color: var(--eney-ink);
}

.agency-toggle-note {
    color: var(--eney-muted);
    font-size: .75rem;
    text-align: right;
}

@media (max-width: 575.98px) {
    .agency-toggle {
        align-items: flex-start;
        flex-direction: column;
    }

    .agency-toggle-note {
        text-align: left;
    }
}


/* Settings: category menu tab */

.settings-tabs .nav-link {
    color: var(--eney-muted);
    font-weight: 650;
}

.settings-tabs .nav-link.active {
    color: var(--eney-ink);
}

.menu-category-list {
    display: block;
    column-count: 3;
    column-gap: .75rem;
}

.menu-category-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 2.8rem;
    margin: 0 0 .5rem;
    padding: .55rem .65rem;
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid var(--eney-line);
    border-radius: .7rem;
    background: #fafcfc;
    cursor: pointer;
}

.menu-category-item:hover {
    border-color: #bdcbd0;
    background: #f6f9fa;
}

.menu-category-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-category-level {
    color: var(--eney-muted);
    font-size: .7rem;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .menu-category-list {
        column-count: 2;
    }
}

@media (max-width: 575.98px) {
    .menu-category-list {
        column-count: 1;
    }

    .menu-category-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .menu-category-level {
        display: none;
    }
}


/* Catalog authentication/users */

.header-user {
    max-width: 18rem;
}

.header-user-copy {
    min-width: 0;
    display: grid;
    line-height: 1.1;
    text-align: right;
}

.header-user-copy strong,
.header-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-copy strong {
    font-size: .78rem;
}

.header-user-copy small {
    margin-top: .2rem;
    color: var(--eney-muted);
    font-size: .66rem;
}

.users-table {
    min-width: 850px;
}

.users-table th {
    color: var(--eney-muted);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Personal account */

.account-container {
    max-width: 820px;
}


/* Registration/auth */

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--eney-muted);
    font-size: .75rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--eney-line);
}


/* Site footer */

.site-footer {
    flex: 0 0 auto;
    margin-top: 2.5rem;
    border-top: 1px solid var(--eney-line);
    background: rgb(255 255 255 / .72);
}

.site-footer-inner {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--eney-muted);
    font-size: .78rem;
}

.site-footer-release {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .site-footer-inner {
        min-height: 4.5rem;
        flex-direction: column;
        justify-content: center;
        gap: .25rem;
        text-align: center;
    }
}


/* Settings: application price groups */

.application-settings-layout {
    align-items: start;
}

.application-group-list {
    display: grid;
    gap: .45rem;
}

.application-group-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .85rem;
    border: 1px solid var(--eney-line);
    border-radius: .8rem;
    color: var(--eney-ink);
    text-decoration: none;
    background: #fafcfc;
}

.application-group-card:hover {
    border-color: #b8c8ce;
    background: #f5f8f9;
}

.application-group-card.is-active {
    border-color: var(--eney-ink);
    box-shadow: inset 0 0 0 1px var(--eney-ink);
    background: #fff;
}

.application-group-card-copy {
    min-width: 0;
    display: grid;
    gap: .18rem;
}

.application-group-card-copy strong,
.application-group-card-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.application-group-card-copy small {
    color: var(--eney-muted);
    font-size: .72rem;
}

.application-product-list {
    max-height: 36rem;
    overflow: auto;
    border: 1px solid var(--eney-line);
    border-radius: .85rem;
    background: #fff;
}

.application-product-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 3.5rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--eney-line);
    cursor: pointer;
}

.application-product-item:last-child {
    border-bottom: 0;
}

.application-product-item:hover {
    background: #f8fafb;
}

.application-product-item[hidden] {
    display: none !important;
}

.application-product-copy {
    min-width: 0;
    display: grid;
    gap: .1rem;
}

.application-product-copy strong,
.application-product-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.application-product-copy small {
    color: var(--eney-muted);
    font-size: .7rem;
}

.application-product-current-group {
    max-width: 11rem;
    overflow: hidden;
    padding: .25rem .45rem;
    border-radius: .45rem;
    background: var(--eney-soft);
    color: var(--eney-muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .application-settings-layout > .col-lg-4 > .settings-card {
        position: sticky;
        top: 6rem;
    }
}

@media (max-width: 767.98px) {
    .application-product-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .application-product-current-group {
        grid-column: 2;
        max-width: 100%;
        justify-self: start;
    }
}


/* v19: application assignment by category or individual product */

.application-category-copy {
    padding-left: calc(min(var(--application-category-level, 0), 4) * .6rem);
}

.application-assignment-badges {
    display: grid;
    gap: .25rem;
    justify-items: end;
}

.application-product-current-group.is-inherited {
    background: #eef3f5;
    border: 1px dashed #b9c7cd;
}

@media (max-width: 767.98px) {
    .application-assignment-badges {
        grid-column: 2;
        justify-items: start;
    }
}


/* v20 importer diagnostics */

.import-runs-table,
.category-anomaly-table {
    min-width: 820px;
}

.import-runs-table th,
.category-anomaly-table th {
    color: var(--eney-muted);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.category-anomaly-table td {
    max-width: 28rem;
}