/* Noventra storefront brand layer.
 * Semantic status colors (success, warning, danger) intentionally remain unchanged.
 */
:root {
    --noventra-navy: #000b29;
    --noventra-blue: #1558fc;
    --noventra-cyan: #04cdfc;
    --noventra-violet: #932afc;
    --noventra-violet-deep: #6d28d9;
    --noventra-violet-soft: #a855f7;
    --noventra-magenta: #c026d3;
    --noventra-ink: #111a3a;
    --noventra-muted: #68708a;
    --noventra-surface: #ffffff;
    --noventra-surface-soft: #f5f7ff;
    --noventra-border: #dde5ff;
    --noventra-cyan-tint: rgba(4, 205, 252, 0.1);
    --noventra-cyan-border: rgba(4, 205, 252, 0.28);
    --noventra-violet-tint: rgba(109, 40, 217, 0.1);
    --noventra-violet-surface: rgba(109, 40, 217, 0.035);
    --noventra-violet-focus: rgba(109, 40, 217, 0.1);
    --noventra-notification-hover: rgba(4, 205, 252, 0.035);
    --noventra-shadow-soft: rgba(0, 11, 41, 0.07);
    --noventra-action-hover: #e6e6e6;
    --noventra-breadcrumb: #6c757d;
    --noventra-breadcrumb-hover: #495057;
    --noventra-gradient: linear-gradient(120deg, #04cdfc 0%, #1558fc 52%, #932afc 100%);
    --noventra-gradient-soft: linear-gradient(110deg, #f8f9ff 0%, #f4f0ff 58%, #ede5ff 100%);
    --noventra-button-gradient: #6d28d9;
    --noventra-button-gradient-hover: #000b29;
}

html {
    scrollbar-color: #7c3aed #edf0fb;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: #edf0fb;
}

*::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid #edf0fb;
    border-radius: 999px;
    background: #7c3aed;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--noventra-navy);
}

body {
    background-color: #fbfcff;
    color: var(--noventra-ink);
}

/* Responsive customer notification feed */
.notification-page {
    padding-bottom: 4rem;
}

.notification-page-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.notification-page-header > div {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.notification-page-kicker,
.notification-feed-icon,
.notification-empty-icon {
    align-items: center;
    background: var(--noventra-cyan-tint);
    border: 1px solid var(--noventra-cyan-border);
    border-radius: 50%;
    color: var(--noventra-violet-deep);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.notification-feed-shell {
    background: var(--noventra-surface);
    border: 1px solid var(--noventra-border);
    border-radius: 18px;
    box-shadow: 0 14px 38px var(--noventra-shadow-soft);
    overflow: hidden;
}

.notification-feed-toolbar {
    align-items: center;
    background: var(--noventra-surface-soft);
    border-bottom: 1px solid var(--noventra-border);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(330px, auto);
    padding: 1rem;
}

.notification-search,
.notification-filter {
    align-items: center;
    background: var(--noventra-surface);
    border: 1px solid var(--noventra-border);
    border-radius: 12px;
    display: flex;
    gap: 0.65rem;
    margin: 0;
    min-height: 48px;
    padding-inline: 0.9rem;
}

.notification-filter {
    gap: 0.25rem;
    padding: 0.3rem;
}

.notification-filter > i {
    margin-inline: 0.35rem;
}

.notification-filter-option {
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--noventra-muted);
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
}

.notification-filter-option:hover,
.notification-filter-option:focus-visible {
    background: var(--noventra-cyan-tint);
    color: var(--noventra-navy);
    outline: 0;
}

.notification-filter-option.is-active {
    background: var(--noventra-violet-deep);
    box-shadow: 0 5px 14px var(--noventra-violet-focus);
    color: #fff;
    font-weight: 700;
}

.notification-search:focus-within,
.notification-filter:focus-within {
    border-color: var(--noventra-violet-deep);
    box-shadow: 0 0 0 3px var(--noventra-violet-focus);
}

.notification-search i,
.notification-filter i {
    color: var(--noventra-violet-deep);
    font-size: 1.15rem;
}

.notification-search input {
    background: transparent;
    border: 0;
    color: var(--noventra-ink);
    min-width: 0;
    outline: 0;
    width: 100%;
}

.notification-feed-list {
    display: grid;
}

.notification-feed-item {
    align-items: flex-start;
    background: var(--noventra-surface);
    border-bottom: 1px solid var(--noventra-border);
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1.25rem;
    position: relative;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.notification-feed-item:last-child {
    border-bottom: 0;
}

.notification-feed-item:hover {
    background: var(--noventra-notification-hover);
}

.notification-feed-item.is-unread {
    background: var(--noventra-violet-surface);
}

.notification-feed-item.is-unread::before {
    background: var(--noventra-violet-deep);
    border-radius: 999px;
    content: "";
    inset-block: 1rem;
    inset-inline-start: 0;
    position: absolute;
    width: 3px;
}

.notification-feed-content {
    min-width: 0;
}

.notification-feed-meta {
    align-items: center;
    color: var(--noventra-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.notification-type,
.notification-status {
    border-radius: 999px;
    display: inline-flex;
    padding: 0.2rem 0.6rem;
}

.notification-type {
    background: var(--noventra-cyan-tint);
    color: var(--noventra-navy);
}

.notification-status {
    background: var(--noventra-violet-tint);
    color: var(--noventra-violet-deep);
    font-weight: 700;
}

.notification-feed-title {
    color: var(--noventra-navy);
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0 0 0.3rem;
}

.notification-feed-message {
    color: var(--noventra-muted);
    line-height: 1.65;
    margin: 0;
}

.notification-feed-actions {
    display: flex;
    gap: 0.5rem;
}

.notification-action,
.notification-mark-all,
.notification-load-more {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.notification-action {
    background: var(--noventra-surface);
    border: 1px solid var(--noventra-border);
    color: var(--noventra-violet-deep);
    height: 40px;
    padding: 0;
    width: 40px;
}

.notification-action:hover,
.notification-action:focus {
    background: var(--noventra-violet-deep);
    border-color: var(--noventra-violet-deep);
    color: #fff;
    transform: translateY(-1px);
}

.notification-delete:hover,
.notification-delete:focus {
    background: #dc3545;
    border-color: #dc3545;
}

.notification-mark-all,
.notification-load-more {
    background: var(--noventra-violet-deep);
    border: 1px solid var(--noventra-violet-deep);
    color: #fff;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
}

.notification-mark-all:hover,
.notification-load-more:hover {
    background: var(--noventra-navy);
    border-color: var(--noventra-navy);
    color: #fff;
}

.notification-feed-empty {
    align-items: center;
    color: var(--noventra-muted);
    display: flex;
    flex-direction: column;
    padding: 3.5rem 1rem;
    text-align: center;
}

.notification-empty-icon {
    font-size: 1.4rem;
    height: 3.5rem;
    margin-bottom: 0.85rem;
    width: 3.5rem;
}

.notification-feed-footer {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.notification-load-more[hidden] {
    display: none;
}

.notification-confirm-delete {
    background: var(--noventra-violet-deep) !important;
    border-color: var(--noventra-violet-deep) !important;
}

@media (max-width: 767.98px) {
    .notification-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-mark-all {
        width: 100%;
    }

    .notification-feed-toolbar {
        grid-template-columns: 1fr;
    }

    .notification-filter > i {
        display: none;
    }

    .notification-filter-option {
        font-size: 0.82rem;
        padding-inline: 0.45rem;
    }

    .notification-feed-item {
        gap: 0.75rem;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 1rem;
    }

    .notification-feed-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .notification-action {
        height: 42px;
        width: 42px;
    }
}

::selection {
    background: rgba(4, 205, 252, 0.24);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.item-title {
    color: var(--noventra-navy);
}

.noventra-site-header,
.noventra-site-header .content-wrapper,
.noventra-navbar {
    background: var(--noventra-gradient-soft);
}

.noventra-site-header {
    border-bottom: 1px solid rgba(89, 69, 116, 0.16);
    position: relative;
}

.noventra-topbar {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(89, 69, 116, 0.16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: visible;
    position: relative;
    z-index: 1035;
}

.noventra-navbar {
    overflow: visible;
    position: relative;
    z-index: 1020;
}

.noventra-topbar-inner,
.noventra-topbar-auth,
.noventra-topbar-controls,
.noventra-account-menu {
    overflow: visible;
}

.noventra-account-menu {
    position: relative;
}

.noventra-account-dropdown {
    border: 1px solid var(--noventra-border);
    border-radius: 14px;
    box-shadow:
        0 18px 42px rgba(0, 11, 41, 0.16),
        0 10px 26px rgba(4, 205, 252, 0.14),
        0 6px 18px rgba(109, 40, 217, 0.16) !important;
    margin-top: 0.55rem;
    min-width: 240px;
    z-index: 1100;
}

.noventra-topbar .language-select .dropdown-menu,
#user_notification_nav .user-notification-panel {
    background: #fff !important;
    border: 1px solid rgba(109, 40, 217, 0.18) !important;
    border-radius: 14px !important;
    box-shadow:
        0 18px 42px rgba(0, 11, 41, 0.16),
        0 10px 26px rgba(4, 205, 252, 0.14),
        0 6px 18px rgba(109, 40, 217, 0.16) !important;
}

.noventra-topbar .language-select .dropdown-item,
.noventra-account-dropdown .dropdown-item {
    border-radius: 9px;
    margin-inline: 0.35rem;
    width: calc(100% - 0.7rem);
}

.noventra-topbar .language-select .dropdown-item:hover,
.noventra-topbar .language-select .dropdown-item:focus,
.noventra-account-dropdown .dropdown-item:hover,
.noventra-account-dropdown .dropdown-item:focus {
    background: rgba(4, 205, 252, 0.08) !important;
    color: var(--noventra-navy) !important;
}

.navbar.navbar-light.fixed,
.navbar-clone.fixed {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--noventra-border);
    box-shadow: 0 10px 35px rgba(0, 11, 41, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.brand-logo-link {
    width: auto;
    max-width: min(260px, 32vw);
    object-fit: contain;
}

.noventra-action-tray {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(21, 88, 252, 0.16);
    box-shadow:
        0 16px 36px rgba(0, 11, 41, 0.16),
        0 8px 22px rgba(21, 88, 252, 0.16),
        0 3px 12px rgba(147, 42, 252, 0.13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    gap: 0 !important;
    padding-inline: 0.45rem !important;
}

.noventra-action-tray > .nav-item {
    flex: 0 0 44px;
    margin: 0 !important;
    width: 44px;
}

.noventra-action-tray .nav-link {
    align-items: center;
    color: var(--noventra-ink);
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0 !important;
    width: 44px;
}

.noventra-action-tray .nav-link:hover,
.noventra-action-tray .nav-link:focus {
    color: var(--noventra-violet-deep) !important;
}

.noventra-action-icon {
    font-size: 24px !important;
}

.noventra-action-tray .badge.bg-primary {
    background-color: var(--noventra-violet-deep) !important;
    border-color: var(--noventra-violet-deep) !important;
}

.noventra-action-tray a[aria-label="cart-image"] {
    overflow: visible;
    position: relative;
}

.noventra-action-tray #cart-count {
    align-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    bottom: auto;
    display: flex;
    font-size: 0.58rem;
    font-weight: 700;
    height: 17px;
    justify-content: center;
    left: 1px !important;
    line-height: 1;
    margin: 0 !important;
    min-width: 17px;
    padding: 0 3px;
    position: absolute !important;
    right: auto !important;
    top: 1px;
    transform: none;
    z-index: 2;
}

.noventra-action-tray #cart-count:empty {
    display: none;
}

.noventra-account-dropdown .text-primary,
.noventra-account-dropdown .link-color {
    color: var(--noventra-violet-deep) !important;
}

/* Preserve the original navigation layout while bringing back the Noventra
 * logo gradient on the interactive state. */
.pharma-nav .nav-link::after {
    background: var(--noventra-gradient) !important;
}

.pharma-nav .nav-link:hover,
.pharma-nav .nav-link.active {
    background-image: var(--noventra-gradient);
    background-clip: text;
    color: var(--noventra-blue) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-primary,
.btn-blue,
.btn-yellow,
.button-success,
.add-to-cart,
.subscribe-form button {
    background: var(--noventra-button-gradient) !important;
    border-color: var(--noventra-violet-deep) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(89, 69, 116, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-blue:hover,
.btn-blue:focus,
.btn-yellow:hover,
.btn-yellow:focus,
.button-success:hover,
.add-to-cart:hover,
.subscribe-form button:hover {
    background: var(--noventra-button-gradient-hover) !important;
    border-color: var(--noventra-navy) !important;
    box-shadow: 0 9px 20px rgba(16, 25, 56, 0.22);
    transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-blue {
    color: var(--noventra-violet-deep) !important;
    border-color: var(--noventra-violet) !important;
    background: rgba(102, 80, 138, 0.035) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-blue:hover,
.btn-outline-blue:focus {
    color: #fff !important;
    background: var(--noventra-button-gradient) !important;
    border-color: var(--noventra-violet-deep) !important;
}

.text-primary,
.link-primary,
.link-color,
.span-color {
    color: var(--noventra-violet-deep) !important;
}

.bg-primary,
.badge-primary,
.badge.bg-primary,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.swiper-pagination-bullet-active,
.form-check-input:checked {
    background-color: var(--noventra-violet-deep) !important;
    border-color: var(--noventra-violet-deep) !important;
}

/* The pagination group carried a soft card-like shadow behind the row. The
   buttons already read as a group through their own borders. */
.pagination {
    background: transparent !important;
    box-shadow: none !important;
}

/* The rule above only set the violet fill, so the current page number kept the
   blue link colour and was unreadable against it. */
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.nav-pills .nav-link.active {
    color: #fff !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--focus .select2-selection {
    border-color: rgba(102, 80, 138, 0.62) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 80, 138, 0.14) !important;
}

.card,
.dropdown-menu,
.modal-content,
.offcanvas {
    border-color: var(--noventra-border);
}

.card,
.modal-content {
    box-shadow: 0 14px 36px rgba(89, 69, 116, 0.1);
}

.colored-breadcrumb,
.page-footer {
    background: var(--noventra-surface-soft) !important;
}

/* Compact transparent breadcrumbs with a cyan-to-violet depth cue. */
.deeplink_wrapper > .wrapper.bg-soft-grape {
    background: transparent !important;
}

.deeplink_wrapper > .wrapper.bg-soft-grape > .container {
    padding-bottom: 0.65rem !important;
    padding-top: 0.65rem !important;
}

.deeplink_wrapper .breadcrumb {
    align-items: center;
    background: transparent !important;
    column-gap: 0.1rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.deeplink_wrapper .breadcrumb-item,
.deeplink_wrapper .breadcrumb-item a,
.deeplink_wrapper .breadcrumb-item.active {
    color: var(--noventra-breadcrumb) !important;
    font-weight: 600;
}

/* Links stay grey but darken on hover, so they still read as clickable. */
.deeplink_wrapper .breadcrumb-item a:hover,
.deeplink_wrapper .breadcrumb-item a:focus {
    color: var(--noventra-breadcrumb-hover) !important;
}

.deeplink_wrapper .breadcrumb-item + .breadcrumb-item::before {
    color: var(--noventra-breadcrumb) !important;
}

@media (max-width: 575.98px) {
    .deeplink_wrapper > .wrapper.bg-soft-grape > .container {
        padding-bottom: 0.45rem !important;
        padding-top: 0.45rem !important;
    }

    .deeplink_wrapper .breadcrumb {
        font-size: 0.8rem;
    }
}

/* Keep the language control in the brand palette, regardless of Bootstrap's
 * selected primary colour. */
.noventra-topbar .language-select .dropdown-toggle,
.noventra-topbar .language-select .dropdown-toggle span,
.noventra-topbar .language-select .dropdown-toggle::after {
    color: var(--noventra-violet-deep) !important;
    border-top-color: var(--noventra-violet-deep) !important;
}

/* Home section headings: simple editorial layout with no colour wash. */
.featured-section-title {
    background: transparent;
    border: 0;
    border-top: 3px solid #e8edf7;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0.9rem 0 0.7rem;
    position: relative;
}

.featured-section-title::before {
    content: none;
}

.main-content .default_heading {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.featured-section-title .default_heading {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.featured-section-title h3,
.featured-section-title h3.text-dark,
.main-content .section-title,
.main-content .default_heading h3 {
    color: var(--noventra-navy) !important;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
}

.featured-section-title .title-sm {
    color: var(--noventra-muted) !important;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0.22rem 0 0;
}

.featured-section-title a,
.main-content .default_heading + div a {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--noventra-cyan) !important;
    display: inline-flex;
    font-weight: 600;
    gap: 0.3rem;
    padding: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.featured-section-title a:hover,
.featured-section-title a:focus {
    border-color: transparent;
    box-shadow: none;
    color: var(--noventra-violet-deep) !important;
    transform: translateY(-1px);
}

/* Standalone catalogue pages use a centered title only. The homepage accent
 * intentionally does not belong here, especially in RTL layouts. */
.catalog-page-title {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.catalog-page-title .section-title {
    color: var(--noventra-navy) !important;
}

.catalog-page-title hr {
    border-color: rgba(21, 88, 252, 0.14);
    opacity: 1;
}

/* Give every storefront product presentation the same clean, lightly branded
 * card surface instead of the inherited gray treatment. */
.main-content .project.default-style,
.main-content .swiper-slide.product-bg,
.main-content .card.item.project,
.product-listing-section .product-grid,
.product-grid {
    background: #fff !important;
    border: 1px solid rgba(21, 88, 252, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(0, 11, 41, 0.08), 0 2px 8px rgba(4, 205, 252, 0.06) !important;
}

.main-content .project.default-style {
    padding: 0.75rem 0.75rem 1rem !important;
}

/* The Bootstrap column itself is the card, so reserve a real gutter instead
 * of allowing neighbouring borders to touch. */
.main-content .grid-view .row > .project.default-style {
    flex: 0 0 calc(50% - 0.75rem);
    margin-inline: 0.375rem;
    max-width: calc(50% - 0.75rem);
}

@media (min-width: 1200px) {
    .main-content .grid-view .row > .project.default-style {
        flex-basis: calc(25% - 1rem);
        margin-inline: 0.5rem;
        max-width: calc(25% - 1rem);
    }
}

.main-content .project.default-style figure {
    background: #fff;
    border: 0;
}

/* Product card actions (favourite / quick view): no background until the button
   itself is hovered, then a neutral grey. Matches the product listing treatment. */
.main-content .project.default-style figure .item-like,
.main-content .project.default-style figure .item-view,
.main-content .swiper-slide figure .item-like,
.main-content .swiper-slide figure .item-view {
    background: transparent !important;
    border: 0;
    box-shadow: none;
    color: var(--noventra-ink) !important;
}

.main-content .project.default-style figure .item-like:hover,
.main-content .project.default-style figure .item-view:hover,
.main-content .swiper-slide figure .item-like:hover,
.main-content .swiper-slide figure .item-view:hover {
    background: var(--noventra-action-hover) !important;
    border-color: transparent;
    box-shadow: none;
    color: var(--noventra-ink) !important;
}

/* Same treatment outside the branded card contexts (product listing, search, tags). */
.item figure .item-like,
.item figure .item-view,
.swiper-slide figure .item-like,
.swiper-slide figure .item-view {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--noventra-ink);
}

.item figure .item-like:hover,
.item figure .item-view:hover,
.swiper-slide figure .item-like:hover,
.swiper-slide figure .item-view:hover {
    background: var(--noventra-action-hover);
    box-shadow: none;
    color: var(--noventra-ink);
}

/* Related products rail: the cards ended flush against the pagination dots, and
   the container's overflow-hidden clipped their drop shadow. */
.mySwiper4 {
    padding-bottom: 2.5rem;
}

/* Cart drawer: the product image and title links carry no class, so Bootstrap's
   generic `a:hover { text-decoration: underline }` underlined the item name on
   hover. Covers the server-rendered list and the guest cart built in JS. */
#cart-item-sidebar a,
#cart-item-sidebar a:hover,
#cart-item-sidebar a:focus {
    text-decoration: none;
}

/* Order status timeline. Each step is a Bootstrap column pinned to a fixed
   percentage, but its label is nowrap, so long statuses such as "Return Request
   Pending" spilled over the next step and the two ran together. The row already
   scrolls horizontally, so let a step size to its own label instead. */
#progressbar > [class*="col-"] {
    flex: 0 0 auto;
    /* max-content, not a fixed width: the gx-lg-8 gutter eats into the step, so
       any guessed value still clipped the longest labels. */
    min-width: max-content;
    padding-inline-end: 1.5rem;
    width: auto;
}

/* The theme drops the connector after a cancel-state step (.cancel:after
   { width: 0 }), which is right when that status ends the timeline. A return
   request is not terminal -- it is followed by approved/declined -- so keep the
   line whenever another step comes after it. The last step has none either way. */
#progressbar > div.cancel:not(:last-child)::after {
    width: 100%;
}

/* 404 page. The old markup relied on a background GIF that is not in the repo,
   leaving a 400px hole, and forced an Arvo serif that is never loaded. */
.noventra-404 {
    padding: 3rem 0 5rem;
}

.noventra-404-inner {
    margin: 0 auto;
    max-width: 34rem;
}

.noventra-404-art svg {
    height: auto;
    max-width: 17rem;
    width: 100%;
}

.noventra-404-code {
    background: var(--noventra-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0.5rem 0 0.75rem;
}

.noventra-404-title {
    color: var(--noventra-navy);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    margin-bottom: 0.5rem;
}

.noventra-404-text {
    color: var(--noventra-muted);
    margin-bottom: 1.75rem;
}

.noventra-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Cart drawer total row. Two classes so it outranks Bootstrap's
   `.d-flex { display: flex !important }` when the cart is empty. */
.cart-sidebar-total.is-empty {
    display: none !important;
}

/* The fixed navbar sits at z-index 1008-1020, so the quick-view iziModal (999)
   was rendering underneath the header. Lift it above the navbar but keep it below
   Bootstrap's offcanvas (1045) and modal (1055) layers, so the cart drawer and the
   sign-in modal still open on top of it. */
.iziModal {
    z-index: 1035 !important;
}

.iziModal-overlay,
.iziModal-navigate {
    z-index: 1030 !important;
}

/* The theme paints every swiper slide solid white, which leaves the brand and
   category rails sitting on a white strip over the tinted page background. */
.main-content .swiper-slide.swiper-slide-category,
.swiper-slide.swiper-slide-category {
    background: transparent;
}

.main-content .project.default-style figure .item-cart,
.main-content .swiper-slide figure .item-cart {
    background: var(--noventra-navy) !important;
    box-shadow: 0 -8px 22px rgba(0, 11, 41, 0.16);
    color: #fff !important;
}

.main-content .project.default-style figure .item-cart:hover,
.main-content .swiper-slide figure .item-cart:hover {
    background: var(--noventra-violet-deep) !important;
}

.main-content .project.default-style:hover,
.main-content .swiper-slide.product-bg:hover,
.product-grid:hover {
    border-color: rgba(147, 42, 252, 0.42) !important;
    box-shadow: 0 14px 32px rgba(21, 88, 252, 0.12), 0 4px 14px rgba(147, 42, 252, 0.09) !important;
}

.product-grid .product-content {
    background: var(--noventra-surface) !important;
}

/* Card copy sat flush against the card edge, so long product names were clipped
   right at the border. The list-view variant already sits in a padded column. */
.swiper-slide .product-content:not(.product_listing_list),
.main-content .item .product-content:not(.product_listing_list) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Grid product cards (seller details, product listing) put the name and price in
   .post-header rather than .product-content, and it had no gutter either. */
.project.item .post-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Cart drawer: stable in both RTL and LTR, including long mixed-language
 * product names and missing catalogue images. */
#offcanvas-cart {
    width: min(430px, 100vw);
    background: #fbfafc !important;
}

#offcanvas-cart .offcanvas-header {
    background: var(--noventra-surface);
    border-bottom: 1px solid var(--noventra-border);
    min-height: 64px;
    padding: 1rem 1.1rem;
    position: sticky;
    top: 0;
    z-index: 3;
}

#offcanvas-cart .offcanvas-header h3 {
    color: var(--noventra-navy);
    line-height: 1.35;
}

#cart-item-sidebar {
    gap: 0.8rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 1rem;
}

body.cart-drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

#cart-item-sidebar.is-empty {
    overflow: hidden;
}

#cart-item-sidebar .cart-sidebar-empty {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 1.5rem 0.75rem;
    text-align: center;
}

#cart-item-sidebar .cart-sidebar-empty h1 {
    margin-bottom: 1.25rem;
}

#cart-item-sidebar .cart-sidebar-empty img {
    display: block;
    height: auto;
    max-height: min(42vh, 300px);
    max-width: 310px;
    object-fit: contain;
    width: min(82%, 310px);
}

#cart-item-sidebar .shopping-cart {
    background: var(--noventra-surface);
    border: 1px solid var(--noventra-border);
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(89, 69, 116, 0.08);
    padding: 0.75rem;
}

#cart-item-sidebar .shopping-cart-item {
    align-items: flex-start;
    display: grid !important;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 !important;
    min-width: 0;
}

#cart-item-sidebar .shopping-cart-item > .d-flex {
    align-items: flex-start;
    gap: 0.7rem !important;
    min-width: 0;
}

#cart-item-sidebar .shopping-cart-item > .d-flex > .w-100 {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

#cart-item-sidebar .cart-img {
    align-items: center;
    background: #fff;
    border: 1px solid var(--noventra-border);
    display: flex;
    flex: 0 0 78px;
    height: 78px !important;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    width: 78px !important;
}

#cart-item-sidebar .cart-img a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

#cart-item-sidebar .cart-img img {
    background: #fff;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    width: 100% !important;
}

#cart-item-sidebar .title_wrap.w-19 {
    color: var(--noventra-navy);
    display: -webkit-box;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    max-width: none;
    overflow: hidden !important;
    text-align: start;
    text-overflow: ellipsis !important;
    text-wrap: wrap !important;
    unicode-bidi: plaintext;
    white-space: normal !important;
    width: auto !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#cart-item-sidebar .price .amount {
    color: var(--noventra-violet-deep) !important;
}

#cart-item-sidebar .product-pricing {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem !important;
    padding-inline: 0 !important;
}

#cart-item-sidebar .header_qty {
    height: 38px !important;
    min-width: 62px;
    text-align: center;
    width: 62px !important;
}

#cart-item-sidebar .product-line-price {
    color: var(--noventra-ink);
    white-space: nowrap;
}

#cart-item-sidebar .product-sm-removal {
    flex: 0 0 auto;
}

#offcanvas-cart .offcanvas-footer {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--noventra-border);
    gap: 0.65rem;
    padding: 0.9rem 1rem 1rem;
}

#offcanvas-cart .offcanvas-footer .btn {
    margin: 0 !important;
    width: 100%;
}

@media (max-width: 420px) {
    #cart-item-sidebar .cart-img {
        flex-basis: 68px;
        height: 68px !important;
        width: 68px !important;
    }
}

#spotlight-box {
    border: 1px solid var(--noventra-border);
}

#spotlight-input-row .sp-icon {
    color: var(--noventra-cyan) !important;
    transition: color 0.18s ease;
}

/* Product catalogue empty state and desktop filters. */
.listing-page .product-listing-empty {
    align-items: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(4, 205, 252, 0.12), transparent 32%),
        radial-gradient(circle at 82% 82%, rgba(147, 42, 252, 0.13), transparent 36%),
        #fff;
    border: 1px solid rgba(109, 40, 217, 0.16);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0, 11, 41, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 390px;
    overflow: hidden;
    padding: 3rem 1.5rem;
    position: relative;
}

.listing-page .product-listing-empty::before,
.listing-page .product-listing-empty::after {
    border: 1px solid rgba(109, 40, 217, 0.1);
    border-radius: 50%;
    content: "";
    height: 190px;
    position: absolute;
    width: 190px;
}

.listing-page .product-listing-empty::before {
    inset-block-start: -105px;
    inset-inline-end: -65px;
}

.listing-page .product-listing-empty::after {
    inset-block-end: -125px;
    inset-inline-start: -45px;
}

.product-listing-empty-icon {
    align-items: center;
    background: linear-gradient(135deg, rgba(4, 205, 252, 0.14), rgba(147, 42, 252, 0.16));
    border: 1px solid rgba(109, 40, 217, 0.18);
    border-radius: 50%;
    color: var(--noventra-violet-deep);
    display: inline-flex;
    font-size: 2.25rem;
    height: 76px;
    justify-content: center;
    margin-bottom: 1.1rem;
    width: 76px;
}

.product-listing-empty-title {
    color: var(--noventra-navy);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    margin-bottom: 1.15rem;
}

.product-listing-empty-action {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    min-width: 170px;
}

/* Keep seller ratings centred and prevent the SVG star artwork from bleeding
 * into the neighbouring icon boxes. Only the grid card is centre-aligned. */
.seller-listing-page .card > .rating,
.seller-listing-page .product-content > .rating {
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1;
    margin: 0.9rem auto 0;
    min-height: 20px;
    width: 100%;
}

/* List view: the rating sits directly under the seller name, so it follows the
   text alignment of the column rather than being centred. flex-start keeps it
   on the correct side under RTL too. */
.seller-listing-page .product-content > .rating {
    justify-content: flex-start;
    margin: 0.35rem 0 0.5rem;
}

/* Seller logos are wide marks, not photos: object-fit: cover was scaling them
   up to fill the square box and cropping the edges. Fit the whole logo instead. */
.seller-listing-page .fig_seller_image {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* The theme sets object-fit: cover !important on the details-page logo, which
   crops wide marks, so this has to match that weight. */
.seller-profile-card img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain !important;
}

/* The theme gives this wrapper a fixed 280px, wider than the column it sits in,
   which is what pushed the logo past the column edge. */
.seller-listing-page .product-image-container {
    max-width: 100%;
    width: 100%;
}

/* List view: bind the logo to the column width rather than an unconstrained
   wrapper, so wide marks cannot spill into the text column, and give every row
   the same logo height. */
.seller-listing-page .product-list-image {
    display: block;
    height: 150px;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.seller-listing-page .rating-container,
.seller-listing-page .rating-container .rating-stars {
    display: inline-flex !important;
    line-height: 1;
    vertical-align: middle;
}

.seller-listing-page .rating-container .rating-stars {
    overflow: hidden;
    position: relative;
}

.seller-listing-page .rating-container .star {
    line-height: 1;
    margin: 0 2px !important;
}

.seller-listing-page .theme-krajee-svg.rating-xs .krajee-icon,
.seller-listing-page .theme-krajee-svg.rating-xs .krajee-icon-clear {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    display: block;
    height: 16px !important;
    width: 16px !important;
}

.seller-listing-page .rating-container .filled-stars {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

.listing-page .filter-sidebar-view {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--noventra-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 11, 41, 0.07);
    padding: 1.25rem !important;
}

.listing-page .filter-sidebar-view .filter_brands,
.listing-page .filter-sidebar-view .filter_categories {
    border-bottom: 1px solid var(--noventra-border);
    margin: 0 0 1.25rem !important;
    padding-bottom: 1.25rem;
}

.listing-page .filter-sidebar-view .brand_filter,
.listing-page .filter-sidebar-view .category_filter {
    margin-bottom: 0 !important;
    max-height: none;
    overflow: visible;
    scrollbar-width: none;
}

.listing-page .filter-sidebar-view .brand_filter {
    gap: 0.9rem !important;
}

.listing-page .filter-sidebar-view .product_filter_btn:not(.btn) {
    background: var(--noventra-violet-tint);
    border-radius: 999px;
    color: var(--noventra-violet-deep) !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
}

@media (max-width: 991.98px) {
    .listing-page .product-listing-empty {
        min-height: 320px;
    }
}

#spotlight-input-row:hover .sp-icon,
#spotlight-input-row:focus-within .sp-icon,
#search_items .search_btn:hover,
#search_items .search_btn:focus {
    color: var(--noventra-violet-deep) !important;
}

/* Keep a single results scroller and only show it when results overflow. */
#spotlight-results {
    overflow-y: auto !important;
}

#spotlight-results #search_items {
    max-height: none !important;
    overflow: visible !important;
}

.offcanvas-nav .offcanvas-header {
    background: var(--noventra-navy);
}

/* Shared Noventra dialog treatment for Bootstrap and SweetAlert surfaces. */
.modal-backdrop.show {
    background: var(--noventra-navy);
    opacity: 0.58;
}

.modal-content {
    background: #fff;
    border: 1px solid rgba(109, 40, 217, 0.18);
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(0, 11, 41, 0.2),
        0 8px 22px rgba(109, 40, 217, 0.1);
    overflow: hidden;
}

.modal-header {
    background: var(--noventra-violet-surface);
    border-bottom: 1px solid var(--noventra-border);
}

.modal-title,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5 {
    color: var(--noventra-navy);
}

.modal-content .form-control,
.modal-content .form-select {
    border-color: var(--noventra-border);
    border-radius: 10px;
}

.modal-content .form-control:focus,
.modal-content .form-select:focus {
    border-color: var(--noventra-violet-deep);
    box-shadow: 0 0 0 3px var(--noventra-violet-focus);
}

.modal-content .btn-primary {
    background: var(--noventra-violet-deep) !important;
    border-color: var(--noventra-violet-deep) !important;
    box-shadow: 0 6px 14px rgba(109, 40, 217, 0.16) !important;
}

.modal-content .btn-primary:hover,
.modal-content .btn-primary:focus {
    background: #5b21b6 !important;
    border-color: #5b21b6 !important;
    box-shadow: 0 0 0 3px var(--noventra-violet-focus) !important;
}

.modal-content .btn-soft-dark,
.modal-content .btn-secondary {
    background: #fff !important;
    border: 1px solid var(--noventra-navy) !important;
    color: var(--noventra-navy) !important;
}

.modal-content .btn-soft-dark:hover,
.modal-content .btn-secondary:hover {
    background: var(--noventra-navy) !important;
    color: #fff !important;
}

.iziModal {
    border: 1px solid rgba(109, 40, 217, 0.18) !important;
    border-radius: 18px !important;
    box-shadow:
        0 24px 60px rgba(0, 11, 41, 0.22),
        0 8px 22px rgba(109, 40, 217, 0.1) !important;
    overflow: hidden !important;
}

.iziModal-overlay {
    background: rgba(0, 11, 41, 0.58) !important;
}

.iziModal .iziModal-header {
    background: var(--noventra-navy) !important;
}

.iziModal .icon-close {
    background: var(--noventra-violet-surface) !important;
    border: 1px solid var(--noventra-border) !important;
    color: var(--noventra-navy) !important;
}

.swal2-popup:not(.swal2-toast) {
    background: #fff !important;
    border: 1px solid rgba(109, 40, 217, 0.18) !important;
    border-radius: 18px !important;
    box-shadow:
        0 24px 60px rgba(0, 11, 41, 0.24),
        0 8px 22px rgba(109, 40, 217, 0.12) !important;
    max-width: min(430px, calc(100vw - 28px)) !important;
    padding: 1.5rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    color: var(--noventra-navy) !important;
    font-size: 1.55rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container,
.swal2-popup:not(.swal2-toast) .swal2-content {
    color: var(--noventra-ink) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon {
    height: 4.5rem !important;
    margin: 0.8rem auto 1rem !important;
    width: 4.5rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions {
    gap: 0.55rem;
}

.swal2-popup:not(.swal2-toast) .swal2-styled {
    border-radius: 10px !important;
    box-shadow: none !important;
    min-width: 100px;
    padding: 0.65rem 1.15rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-confirm {
    background: var(--noventra-violet-deep) !important;
    border: 1px solid var(--noventra-violet-deep) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-confirm:hover,
.swal2-popup:not(.swal2-toast) .swal2-confirm:focus {
    background: #5b21b6 !important;
    border-color: #5b21b6 !important;
    box-shadow: 0 0 0 3px var(--noventra-violet-focus) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-cancel {
    background: #fff !important;
    border: 1px solid var(--noventra-navy) !important;
    color: var(--noventra-navy) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-deny {
    background: var(--noventra-danger, #dc3545) !important;
}

.swal2-popup.swal2-toast {
    border: 1px solid rgba(109, 40, 217, 0.16) !important;
    border-radius: 14px !important;
    box-shadow:
        0 14px 34px rgba(0, 11, 41, 0.14),
        0 4px 12px rgba(109, 40, 217, 0.08) !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
    padding: 0.7rem 0.85rem !important;
}

.swal2-popup.swal2-toast .swal2-title {
    color: var(--noventra-navy) !important;
    font-size: 0.92rem !important;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0.65rem !important;
    text-align: start;
}

.swal2-popup.swal2-toast .swal2-icon {
    flex: 0 0 2em;
    height: 2em !important;
    margin: 0 !important;
    min-width: 2em;
    width: 2em !important;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar {
    background: linear-gradient(90deg, var(--noventra-cyan), var(--noventra-violet)) !important;
}

@media (max-width: 991.98px) {
    .noventra-navbar:has(.offcanvas-nav.show),
    .noventra-navbar:has(.offcanvas-nav.showing) {
        z-index: 1060;
    }

    .brand-logo-link {
        max-width: 190px;
    }

    .noventra-action-tray {
        box-shadow:
            0 7px 16px rgba(0, 11, 41, 0.1),
            0 3px 8px rgba(109, 40, 217, 0.08);
    }

    .offcanvas-nav,
    .offcanvas-nav .offcanvas-body {
        background: var(--noventra-navy) !important;
    }

    .offcanvas-nav .pharma-nav .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .offcanvas-nav .pharma-nav .nav-link:hover,
    .offcanvas-nav .pharma-nav .nav-link:focus,
    .offcanvas-nav .pharma-nav .nav-link.active {
        color: var(--noventra-violet) !important;
    }
}

@media (max-width: 575.98px) {
    .noventra-topbar {
        padding-inline: 0.5rem !important;
        font-size: 0.82rem !important;
    }

    .noventra-topbar-inner {
        gap: 0.35rem;
        padding-inline: 0 !important;
        padding-block: 0.2rem !important;
    }

    .noventra-topbar-inner > .navbar-nav {
        display: none !important;
    }

    .noventra-topbar-auth,
    .noventra-topbar-controls {
        width: 100%;
    }

    .noventra-topbar-controls {
        gap: 0.4rem !important;
        justify-content: space-between;
    }

    .noventra-register-control {
        display: none !important;
    }

    .noventra-topbar .language-select {
        margin-inline: 0.2rem !important;
    }

    .noventra-topbar .language-select .dropdown-toggle {
        font-size: 0.82rem !important;
    }

    .noventra-account-trigger {
        --bs-btn-line-height: 1;
        border-radius: 9px;
        height: 30px !important;
        line-height: 1 !important;
        max-height: 30px;
        min-height: 30px;
        padding: 0 0.42rem !important;
        white-space: nowrap;
    }

    .noventra-account-trigger .fs-16 {
        align-items: center;
        display: inline-flex;
        font-size: 0.8rem !important;
        line-height: 1 !important;
    }

    .noventra-account-greeting {
        display: none;
    }

    .noventra-account-trigger > .uil {
        font-size: 0.78rem;
        line-height: 1;
    }

    .noventra-account-trigger .fa-angle-down {
        font-size: 0.65rem;
        margin-inline-start: 0.15rem;
    }

    .noventra-account-dropdown {
        left: auto !important;
        right: 0 !important;
        top: calc(100% + 0.35rem) !important;
        transform: none !important;
        position: absolute !important;
        width: min(230px, calc(100vw - 24px));
    }

    .noventra-account-dropdown-rtl {
        left: 0 !important;
        right: auto !important;
    }

    .noventra-navbar {
        padding-block: 0.4rem !important;
    }

    .noventra-navbar .container {
        gap: 0.45rem;
    }

    .brand-logo-link {
        max-height: 38px !important;
        max-width: 112px;
    }

    .noventra-navbar .navbar-brand {
        flex: 0 1 112px;
        height: 42px !important;
        margin-inline-end: 0 !important;
        min-width: 0;
    }

    .noventra-navbar .navbar-other {
        flex: 0 1 auto;
        min-width: 0;
    }

    .noventra-action-tray {
        gap: 0 !important;
        padding: 0.1rem 0.5rem !important;
    }

    .noventra-action-tray > .nav-item {
        flex: 0 0 30px;
        margin: 0 !important;
        width: 30px;
    }

    .noventra-action-tray .nav-link {
        align-items: center;
        display: flex;
        height: 30px;
        justify-content: center;
        padding: 0 !important;
        width: 30px;
    }

    .noventra-action-icon {
        font-size: 16px !important;
    }

    .noventra-action-tray .offcanvas-nav-btn {
        align-items: center;
        display: flex;
        font-size: 16px !important;
        height: 30px;
        justify-content: center;
        line-height: 1;
        width: 30px;
    }

    .mobile-searchbar {
        padding-bottom: 0.35rem !important;
    }

    .mobile-searchbar .mobile-search {
        margin-bottom: 0 !important;
    }

    .mobile-searchbar .select2-selection {
        min-height: 30px !important;
    }

    .mobile-searchbar .select2-selection__rendered {
        font-size: 0.82rem;
        line-height: 28px !important;
        padding-block: 0 !important;
    }
}