.product__monobank {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0%;
    vertical-align: middle;
    margin-left: auto;
}

.product__monobank::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: calc(100% + 20px);
}

.product__monobank .monobank-icon {
    width: 48px;
    height: 48px;
    display: flex;
    background: #F2F6F8;
    border-radius: 50%;
}

.product__monobank .monobank-icon img {
    width: 100%;
    height: 100%;
}

.product__monobank .monobank-info {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.product__monobank .monobank-title {
    font-size: 16px;
}

.product__monobank .monobank-text {
    font-size: 12px;
    opacity: .6;
}

.monobank-popup {
    display: none;
    position: absolute;
    z-index: 1;
    right: 3px;
    top: calc(100% + 12px);
    width: 287px;
    height: 230px;
    background: #FFFFFF;
    border: 1px solid #B0BEC5;
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    padding: 8px 24px 8px 8px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #d9e0e3 #F2F6F8;
}

.product__monobank:hover .monobank-popup {
    display: block;
}

.monobank-popup::-webkit-scrollbar {
    width: 4px;
}

.monobank-popup::-webkit-scrollbar-track {
    background: #F2F6F8;
    border-radius: 4px;
}

.monobank-popup::-webkit-scrollbar-thumb {
    background: #d9e0e3;
    border-radius: 4px;
}

.monobank-popup::-webkit-scrollbar-thumb:hover {
    background: #b0bec5;
}


.monobank-popup h4 {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}

.monobank-popup ol {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 18px;
    color: #555555;
}

@media (max-width: 1400px) and (min-width: 1200px) {
    .product__price-wrap:has(.product__monobank) .product__middle-btn .btn {
        width: 200px;
        padding: 15px 15px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .product__price-wrap:has(.product__monobank) .product-price.product__price {
        margin-right: auto;
    }

    .product__price-wrap:has(.product__monobank) .product__middle-btn .btn {
        width: 160px;
        padding: 15px 15px;
    }
}

@media (max-width:767px) {
    .product__monobank {
        margin: 20px auto 0;
    }

    .product__monobank .monobank-icon {
        background: #FFFFFF;
    }

    .monobank-popup {
        width: 290px;
        right: calc(50% - 145px);
        top: calc(100% + 12px);
    }
}

#simplecheckout_payment .form-group label {
    width: 100%;
}

#simplecheckout_payment .radio .custom-checkbox:has(input[disabled]) {
    cursor: default;
}

#simplecheckout_payment .radio .custom-checkbox:has(input[disabled]) i {
    border-color: #9DACB3;
    background: #F8FAFA;
}

.monobank-unavailable {
    display: block;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.2;
    color: #9DACB3;
    padding-left: 32px;
    margin-top: -1px;
}

.monobank-parts-calculator .calculator-subtitle {
    display: block;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.2;
    color: #9DACB3;
    padding-left: 32px;
    margin-top: -1px;
    margin-bottom: 15px;
}

.monobank-parts-calculator .calculator-form {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    width: 100%;
    padding: 4px 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    color: #555555;
}

.calculator-form select.form-control {
    width: 100%;
    height: 38px;
    background: #F8FAFA;
    color: #555555;
    border: 1px solid rgba(157, 172, 179, 0.5);
    border-radius: 2px 0px 0px 2px !important;
    box-shadow: none;

    background-image: url("data:image/svg+xml,%3Csvg width='32' height='38' viewBox='0 0 32 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='38' transform='matrix(1 0 0 -1 0 38)' fill='%23FF0000'/%3E%3Cpath d='M19.8516 17.1484C19.8516 17.1484 19.8763 17.1732 19.9258 17.2227C19.9753 17.2721 20 17.3646 20 17.5C20 17.6354 19.9505 17.7526 19.8516 17.8516L16.3516 21.3516C16.2526 21.4505 16.1354 21.5 16 21.5C15.8646 21.5 15.7474 21.4505 15.6484 21.3516L12.1484 17.8516C12.0495 17.7526 12 17.6354 12 17.5C12 17.3646 12.0495 17.2474 12.1484 17.1484C12.2474 17.0495 12.3646 17 12.5 17H19.5C19.6354 17 19.7526 17.0495 19.8516 17.1484Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top right;
}

.calculator-form .calculator-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.calculator-form .calculator-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 8px;
}

.calculator-form .calculator-row__name {
    width: 100%;
}

.calculator-form .calculator-row__value {
    width: auto;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 13px;
    color: #FF0000;
}

/* ============================================================
   Ortosmart — expandable header search (dropdown + overlay)
   Front-end stage. All classes are prefixed with `oss-`.
   Geometry of the expanding bar is set inline by
   catalog/view/javascript/ortosmart-search.js; this section
   provides the look, the transitions and the responsive rules.
   ============================================================ */

.oss-wrap {
    position: relative;
    width: 100%;
}

/* Expanded content: constrained to the header container width; the white
   full-window background is drawn separately by .oss-bg. */
body.oss-active .oss-wrap {
    padding: 10px 0 16px;
    z-index: 1050;
}

/* Full-window white background with shadow (Figma "Overlay+Shadow").
   top/height are set inline by ortosmart-search.js to wrap the content. */
.oss-bg {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background: #FFFFFF;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.23);
    opacity: 0;
    z-index: 1045;
    transition: opacity 0.24s ease;
}

body.oss-active .oss-bg {
    display: block;
}

body.oss-active.oss-panel-visible .oss-bg {
    opacity: 1;
}

.oss-wrap,
.oss-wrap #search {
    transition: top 0.28s ease, left 0.28s ease, right 0.28s ease, width 0.28s ease;
}
/* Clear-field button (×) — shown on the right of the field when the field is
   active (expanded) and holds text. Visibility is driven by the .oss-has-text
   class toggled from ortosmart-search.js. */
.oss-clear {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
}

.oss-clear__icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: opacity 0.15s ease;
    position: relative;
}


.oss-clear__icon:after,
.oss-clear__icon:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 1px;
    background: #555555;
    opacity: 0.6;
}

.main-slider__item img {
    width: 100%;
    object-fit: cover;
}

.oss-clear__icon:after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.oss-clear__icon:before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.oss-clear:hover .oss-clear__icon {
    opacity: 1;
}

body.oss-active .search.oss-has-text .oss-clear,
.mobile-search .search.oss-has-text .oss-clear {
    display: flex;
}

/* Keep typed text clear of the × button. */
body.oss-active .search__input,
.mobile-search .search__input {
    padding-right: 40px;
}

/* Dropdown panel */
.oss-panel {
    display: none;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    max-height: 75vh;
    overflow: auto;
}

@media (min-width: 992px) {
    .oss-panel {
        min-width: 930px;
    }
}

@media (min-width: 1200px) {
    .oss-panel {
        min-width: 1140px;
    }
}

@media (min-width: 1335px) {
    .oss-panel {
        min-width: 1275px;
    }
}

body.oss-active .oss-panel {
    display: block;
}

body.oss-active.oss-panel-visible .oss-panel {
    opacity: 1;
    transform: translateY(0);
}

/* Search history */
.oss-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.oss-history__title {
    font-size: 12px;
    line-height: 1.36;
    color: #9DACB3;
}

.oss-history__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.oss-chip {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    height: 26px;
    padding: 4px 9px;
    background: #F3F4F6;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1;
    color: #555555;
    cursor: pointer;
}

#bingc-phone-button.bingc-phone-button {
    z-index: 1 !important;
}

.oss-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #9DACB3;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}

.oss-chip__remove-icon {
    width: 18px;
    height: 18px;
    background-image: url('../image/sr-remove.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.oss-chip__remove:hover {
    color: #555555;
}

.oss-history__clear {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    color: #9DACB3;
    cursor: pointer;
    transition: color 0.15s ease;
    margin-left: auto;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 7%; /* 0.98px */
    text-underline-offset: 25%; /* 3.5px */
    text-underline-position: from-font;
}

.oss-history__clear:hover {
    color: #555555;
}

/* Two columns: popular categories + popular products */
.oss-cols {
    display: flex;
    align-items: flex-start;
    gap: 36px;
}

.oss-cats {
    flex: 0 0 36%;
    max-width: 36%;
}

.oss-cats__wrap:not(:last-child) {
    margin-bottom: 16px;
}

.oss-blog-wrap {
    .oss-cats__title {
        margin-bottom: 16px;
        border-bottom: 0;
        padding-bottom: 0;
    }

    .oss-cats__all {
        margin-top: 16px;
    }
}

.oss-blog-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oss-blog-item:hover {
    color: #000;
    text-decoration: none;

    .oss-blog-item__title {
        color: #000;
    }

    .oss-blog-item__more {
        color: red;
    }
}

.oss-blog-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.oss-blog-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oss-blog-item__title {
    overflow: hidden;
    color: #555;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.oss-blog-item__more {
    color: #555;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.oss-blog-item__pct {
    width: 56px;
    height: 56px;
    flex-shrink: 0;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.oss-prods {
    flex: 1 1 auto;
    min-width: 0;
}

.oss-cats__title,
.oss-prods__title {
    padding: 8px 0 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(176, 190, 197, 0.4);
    font-size: 12px;
    line-height: 1.36;
    color: rgba(85, 85, 85, 0.6);
}

.oss-cats__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.oss-cats__item {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.36;
    color: #555555;
}

.search-wrap + * {
    margin-left: auto;
}

.oss-cats__item:hover,
.oss-cats__all:hover {
    color: #FF0000;
    text-decoration: none;
}

.oss-cats__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.36;
    color: #555555;
    text-decoration: none;

    span {
        text-decoration: underline;
    }
}

/* Popular products list (scrollable) */
.oss-prods__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 364px;
    overflow-y: auto;
    padding-right: 24px;
    margin-top: 16px;
}

.oss-prods__list::-webkit-scrollbar {
    width: 4px;
}

.oss-prods__list::-webkit-scrollbar-track {
    background: #f2f6f8;
    border-radius: 2px;
}

.oss-prods__list::-webkit-scrollbar-thumb {
    background: #d8e0e4;
    border-radius: 2px;
}

.oss-prod {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.oss-prod:hover {
    color: #000;

    .oss-prod__name {
        color: #000;
    }
}

.oss-prod__img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.oss-prod__info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.oss-prod__name {
    font-size: 14px;
    line-height: 1.36;
    color: #555555;
    transition: 0.15s ease-in-out;
}

.oss-prod__price {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.36;
    color: #555555;
    white-space: nowrap;
}

.oss-prod__price--new {
    color: #FF0000;
}

.oss-prod__price--old {
    color: #B0BEC5;
    font-weight: 400;
    text-decoration: line-through;
}

/* Dimmed backdrop */
.oss-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    z-index: 1040;
    transition: opacity 0.24s ease;
}

body.oss-active .oss-backdrop {
    display: block;
}

body.oss-active.oss-panel-visible .oss-backdrop {
    opacity: 1;
}

/* Keep the overlay from being clipped by the header band while active */
body.oss-active .header__bottom,
body.oss-active .header__bottom .container {
    overflow: visible;
}

.oss-wrap[style] .search {
    flex-direction: row-reverse;
    background-color: #F3F4F6;

    input {
        background-color: #F3F4F6;
        padding-left: 2px;
    }

    .search__btn {
        color: #555555;
        transform: scaleX(-1);
    }
}

/* Tablet: stack the two columns, categories take full width */
@media (max-width: 992px) {
    .oss-cols {
        flex-direction: column;
        gap: 20px;
    }

    .oss-cats,
    .oss-prods {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .oss-wrap .search {
        top: 12px;
        position: sticky;
        display: flex;
        flex-direction: row-reverse;

        input {
            padding-left: 2px;
        }
    }

    .oss-prods__list {
        max-height: none;
    }
}


@media (max-width: 991px) {

    .mobile-search {
        position: relative !important;
        overflow: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        z-index: 9 !important;

        .oss-panel {
            position: absolute !important;
            left: 0;
            top: 100%;
            display: none !important;
            width: 100%;
        }

        &.active {
            .oss-panel {
                display: block !important;
                background-color: #fff !important;
                padding: 0 16px 16px;
                box-shadow: -1px 10px 11px #00000038;
                margin-top: 0 !important;


            }
        }

    }
}

/* Mobile: full-screen panel */
@media (max-width: 767px) {
    body.oss-active .oss-wrap {
        padding: 12px 0;
    }

    .oss-panel {
        margin-top: 12px;
    }

    .oss-history {
        margin-bottom: 16px;
    }

    .oss-prods__list {
        max-height: 220px;
    }

    .oss-prod__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .oss-history__clear {
        margin-left: 0;
    }
}

/* Mobile/tablet: the search markup is duplicated inside .mobile-search (a fixed
   slide-down panel). There the dropdown is shown in flow directly under the
   field — no full-window overlay, background or backdrop. Scoped by
   .mobile-search so it only applies where that block is rendered. */
.mobile-search {
    pointer-events: none;
}

.mobile-search .oss-bg,
.mobile-search .oss-backdrop {
    display: none !important;
}

.mobile-search .oss-wrap {
    position: static;
    width: auto;
    padding: 12px;
}

.mobile-search .oss-panel {
    display: block;
    position: static;
    margin-top: 12px;
    opacity: 1;
    transform: none;
}

.mobile-search.open {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
}
/* === /Ortosmart search === */