/*
 * medlayn: site-wide UI in one style with header and product cards
 * (white blocks, 16px radius, light border, brand gradient #1F05B4 -> #325AFB).
 * Catalog menu, sidebar blocks (product of the day, navigation, text block, banner), cookie message,
 * inner pages (main/shop.tpl): breadcrumbs, faceted filter, product list toolbar.
 * Figma reference: _dev/figma-medline/spec.md
 */

:root {
    --ml-c1: #1F05B4;
    --ml-c2: #325AFB;
    --ml-grad: linear-gradient(90deg, #1F05B4 0%, #325AFB 100%);
    --ml-tint: rgba(50, 90, 251, .06);
    --ml-border: rgba(233, 233, 233, 1);
    --ml-text: rgba(64, 64, 64, 1);
    --ml-muted: rgba(154, 154, 154, 1);
}

/* ---------- Catalog menu ----------
 * Catalog with subcatalogs (div.item-button.has-sub): click on row toggles submenu,
 * click on title text (a.item-title) opens catalog. Catalog without subcatalogs: whole row is a link.
 */

ul.menu .item-button:hover,
ul.menu .submenu .submenu .item-button:hover {
    background-color: #F9F9F9;
}

.menu .item-button.has-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 15px;
    cursor: pointer;
}

.submenu .item-button.has-sub {
    padding: 7px 10px 7px 15px;
}

.submenu .submenu .item-button.has-sub {
    padding: 6px 10px 6px 30px;
}

/* 3rd level: a bit higher than 3px from custom.css */
ul.menu .submenu .submenu .item-button {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Catalog without subcatalogs: whole row is a link, title is underlined on row hover */
ul.menu a.item-button:hover .item-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

ul.menu > li > a.item-button:hover .item-title {
    text-decoration-color: var(--ml-c2);
}

.menu .item-button.has-sub > .item-title {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.menu .item-button.has-sub > .item-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--ml-c2);
    text-underline-offset: 3px;
}

/* toggler: ".menu button { background: none }" from custom.css drops the icon, set it explicitly */
.menu .item-button > button.toggler-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent url('../assets/icons/plus.svg') no-repeat center / 16px;
    display: block;
    cursor: pointer;
}

.menu .item-button.active > button.toggler-icon {
    background-image: url('../assets/icons/minus.svg');
}

.menu .item-button > button.toggler-icon:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 1px;
    opacity: 1;
}

/* current catalog (custom.js: a.current, row .is-current) */
.menu a.current,
.menu a.current .item-title,
.menu a.item-title.current {
    color: var(--ml-c2) !important;
    -webkit-text-fill-color: var(--ml-c2);
}

ul.menu .item-button.is-current,
ul.menu .item-button.is-current:hover {
    background-color: var(--ml-tint);
    box-shadow: inset 3px 0 0 var(--ml-c2);
}

ul.menu .item-button.is-current .item-title {
    font-weight: 600;
}

/* ---------- Sidebar blocks ---------- */

.sidebar .panel,
.sidebar .left-block {
    background: #fff;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 20px;
}

.sidebar .panel > .panel-heading,
.sidebar .left-block > .list-group-item.active {
    background: none;
    border: none;
    border-radius: 0;
    padding: 14px 16px 6px;
    color: var(--ml-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: none;
}

.sidebar .panel > .panel-heading .panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ml-text);
}

.sidebar .panel > .panel-body {
    padding: 8px 16px 16px;
    color: var(--ml-text);
    font-size: 14px;
}

.sidebar .panel > .panel-body p:last-child {
    margin-bottom: 0;
}

/* Product of the day */
.sidebar .product-day .product-day-link img {
    border-radius: 12px;
    margin-bottom: 12px;
}

.sidebar .product-day .media-heading {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
}

.sidebar .product-day .media-heading a {
    color: var(--ml-text);
    text-decoration: none;
}

.sidebar .product-day .media-heading a:hover {
    color: var(--ml-c2);
}

.sidebar .product-day .product-price {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 500;
    color: var(--ml-text);
}

/* Navigation (pages) */
.sidebar .left-block > .left-block-list > li {
    border-bottom: 1px solid var(--ml-border);
}

.sidebar .left-block > .left-block-list > li:last-child {
    border-bottom: none;
}

.sidebar .left-block a {
    padding: 9px 16px;
    color: var(--ml-text);
    font-size: 14px;
    text-decoration: none;
    transition: background-color 200ms, color 200ms;
}

.sidebar .left-block a:hover,
.sidebar .left-block a:focus {
    background: #F9F9F9;
    color: var(--ml-c2);
}

.sidebar .left-block a.active {
    background: var(--ml-tint);
    color: var(--ml-c1);
}

/* Banner */
.sidebar .banner .block-dark {
    border-radius: 16px;
    overflow: hidden;
}

.banner .banner-list .otz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    background: var(--ml-grad);
    background-size: 100%;
    background-position: left;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 250ms;
}

.banner .banner-list .otz:hover {
    background-size: 300%;
    color: #fff;
}

/* ---------- Cookie message ---------- */

.cookie-message {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 16px;
    z-index: 100000;
    width: calc(100% - 32px);
    max-width: 960px;
    transform: translateX(-50%);
    padding: 14px 20px;
    background: #fff;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ml-text);
}

.cookie-message:not(.hide) {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cookie-message p {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
}

/* same size as text ("a { font-size: 16px }" in style.css is for button) */
.cookie-message p a {
    color: var(--ml-c2);
    font-size: inherit;
    text-decoration: underline;
}

.cookie-message > a {
    flex: 0 0 auto;
    min-width: 120px;
    font-size: 16px;
}

@media (max-width: 767px) {
    .cookie-message {
        bottom: 8px;
        width: calc(100% - 16px);
        padding: 12px 14px;
    }

    .cookie-message:not(.hide) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cookie-message p {
        font-size: 13px;
    }
}

/* ---------- Breadcrumbs (main/shop.tpl, Figma Desktop-5 / Desktop-14) ----------
 * ol.breadcrumb from page content is moved into #ml-breadcrumbs above sidebar and content.
 * Home is an icon, separators are chevrons, text 18px #404040.
 */

.ml-breadcrumbs:empty {
    display: none;
}

/* Figma: 64px from search field to breadcrumbs and to page content - reduced at the user's request:
 * ~35px from search field, 28px to content */
.ml-breadcrumbs {
    margin: 10px 0 28px;
}

.ml-breadcrumbs .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 18px;
    line-height: 24px;
    color: var(--ml-text);
}

.ml-breadcrumbs .breadcrumb > li {
    display: inline-flex;
    align-items: center;
    color: var(--ml-text);
}

/* separator: icon from Figma (assets/icons/breadcrumb-chevron.png, 6x11), gaps 23px / 21px as in mockup */
.ml-breadcrumbs .breadcrumb > li + li:before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 11px;
    margin: 0 21px 0 23px;
    padding: 0;
    background-color: var(--ml-text);
    -webkit-mask: url("../assets/icons/breadcrumb-chevron.png") no-repeat center / 6px 11px;
    mask: url("../assets/icons/breadcrumb-chevron.png") no-repeat center / 6px 11px;
    color: transparent;
}

.ml-breadcrumbs .breadcrumb a {
    color: var(--ml-text);
    text-decoration: none;
    transition: color 200ms;
}

.ml-breadcrumbs .breadcrumb a:hover,
.ml-breadcrumbs .breadcrumb a:focus {
    color: var(--ml-c2);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* last item (current page) is plain text of the same color as in Figma */
.ml-breadcrumbs .breadcrumb > .active,
.ml-breadcrumbs .breadcrumb > li:last-child:not(:first-child) {
    color: var(--ml-text);
}

/* home link: house icon from Figma (assets/icons/breadcrumb-home.svg, 25x22) instead of text */
.ml-breadcrumbs .breadcrumb > li:first-child > a[href="/"] {
    display: inline-block;
    width: 25px;
    height: 22px;
    font-size: 0;
    line-height: 0;
    background-color: var(--ml-text);
    -webkit-mask: url("../assets/icons/breadcrumb-home.svg") no-repeat center / 25px 22px;
    mask: url("../assets/icons/breadcrumb-home.svg") no-repeat center / 25px 22px;
    transition: background-color 200ms;
}

.ml-breadcrumbs .breadcrumb > li:first-child > a[href="/"]:hover,
.ml-breadcrumbs .breadcrumb > li:first-child > a[href="/"]:focus {
    background-color: var(--ml-c2);
}

.ml-breadcrumbs .breadcrumb > li:first-child > a[href="/"] * {
    font-size: 0;
}

/* ---------- Faceted filter (main/shop.tpl #faset-filter, Figma Desktop-6) ----------
 * Groups: title 16px/24px with chevron, divider #B5B5B5; checkbox 16px with brand gradient;
 * price: inputs 38px, radius 10, gradient border; slider with gradient range and handles.
 */

.sidebar #faset-filter > .faset-filter-block-wrapper {
    padding: 4px 16px 16px;
}

#faset-filter h4,
#faset-filter-body h4:first-child {
    position: relative;
    margin: 0;
    padding: 12px 0 12px 34px;
    border-top: none;
    border-bottom: 1px solid rgba(181, 181, 181, .6);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .03em;
    color: var(--ml-text);
}

#faset-filter h4 i {
    display: none;
}

/* chevron: up when group is open, down when collapsed */
#faset-filter-body h4[data-toggle="collapse"]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background-color: var(--ml-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E") no-repeat center / 24px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E") no-repeat center / 24px;
    transition: transform 200ms;
}

#faset-filter-body h4.collapsed:before {
    transform: rotate(180deg);
}

#faset-filter-body h4[data-toggle="collapse"]:hover {
    color: var(--ml-c2);
}

#faset-filter-body h4[data-toggle="collapse"]:hover:before {
    background-color: var(--ml-c2);
}

#faset-filter .collapse,
#faset-filter .collapse.in,
#faset-filter .collapsing {
    padding: 8px 0;
}

/* checkbox rows */
#faset-filter .faset-filter-block-wrapper .checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 4px 0;
}

#faset-filter .faset-filter-block-wrapper .checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding-left: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: var(--ml-text);
}

#faset-filter .faset-filter-block-wrapper .checkbox span {
    margin: 0;
}

#faset-filter .faset-filter-block-wrapper .checkbox label:hover .filter-item {
    color: var(--ml-c2);
}

#faset-filter .faset-filter-block-wrapper .checkbox input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    position: static;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #B5B5B5;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    transition: border-color 200ms;
}

#faset-filter .faset-filter-block-wrapper .checkbox input[type=checkbox]:hover {
    border-color: var(--ml-c2);
}

#faset-filter .faset-filter-block-wrapper .checkbox input[type=checkbox]:checked {
    border-color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") no-repeat center / 14px, var(--ml-grad);
}

#faset-filter .faset-filter-block-wrapper .checkbox input[type=checkbox]:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

#faset-filter .checkbox small {
    flex: 0 0 auto;
    font-size: 12px;
    color: #929292;
}

/* price */
#faset-filter #price-filter-form {
    margin: 16px 0 0;
}

#faset-filter #price-filter-form .row {
    display: flex;
    gap: 20px;
    margin: 0;
}

#faset-filter #price-filter-form .row:before,
#faset-filter #price-filter-form .row:after {
    display: none;
}

#faset-filter #price-filter-val-min,
#faset-filter #price-filter-val-max {
    flex: 1 1 0;
    float: none;
    width: auto;
    min-width: 0;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    font-size: 15px;
    color: rgba(55, 37, 128, .5);
}

#faset-filter #price-filter-val-min.has-error,
#faset-filter #price-filter-val-max.has-error {
    background: linear-gradient(#fff, #fff) padding-box, #d9534f border-box;
}

#faset-filter #price-filter-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    color: var(--ml-text);
}

#faset-filter #slider-range.ui-slider-horizontal {
    height: 4px;
    margin: 24px 8px 4px;
    border: none;
    border-radius: 32px;
    background: #E9E9E9;
}

#faset-filter #slider-range .ui-slider-range {
    border-radius: 32px;
    background: var(--ml-grad);
}

#faset-filter #slider-range .ui-slider-handle {
    top: -6px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border: none;
    border-radius: 50%;
    background: var(--ml-grad);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    cursor: grab;
}

#faset-filter #slider-range .ui-slider-handle:focus-visible {
    outline: 2px solid var(--ml-c2) !important;
    outline-offset: 2px;
}

/* reset */
#faset-filter #faset-filter-reset {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin-top: 24px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    font-size: 15px;
    font-weight: 500;
    color: var(--ml-text);
    text-decoration: none;
    transition: color 200ms, background 200ms;
}

#faset-filter #faset-filter-reset:hover,
#faset-filter #faset-filter-reset:focus {
    background: var(--ml-grad) border-box;
    color: #fff;
}

/* ---------- Product list toolbar (product/product_page_list.tpl #filter-well) ----------
 * Was blue: ".well" from custom.css is the footer style. Now a light block like other site blocks.
 */

#filter-well {
    padding: 12px 16px;
    margin: 20px 0;
    background: #fff;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: none;
    color: var(--ml-text);
    font-size: 15px;
    font-weight: 500;
}

#filter-well .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#filter-well .row:before,
#filter-well .row:after {
    display: none;
}

#filter-well .btn-group {
    margin-left: 8px;
    vertical-align: middle;
}

#filter-well .btn-group + .btn-group {
    margin-left: 6px;
}

#filter-well .btn-group > .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 38px;
    border: 1px solid var(--ml-border);
    background: #fff;
    box-shadow: none;
    color: var(--ml-text);
    text-shadow: none;
}

#filter-well .btn-group > .btn:first-child {
    border-radius: 10px 0 0 10px;
}

#filter-well .btn-group > .btn:last-child {
    border-radius: 0 10px 10px 0;
}

#filter-well .btn-group > .btn:hover {
    background: #F9F9F9;
    color: var(--ml-c2);
}

#filter-well .btn-group > .btn.active {
    border-color: transparent;
    background: var(--ml-grad);
    color: #fff;
}

/* ---------- Inner pages: basic buttons and form fields in .main (main/shop.tpl) ----------
 * Only colors, radius and focus: page layouts are kept as they are (pages will be redone by Figma later).
 */

.main .btn {
    border-radius: 10px;
}

.main .btn-primary {
    border: none;
    background: var(--ml-grad);
    background-size: 100%;
    color: #fff;
    text-shadow: none;
    box-shadow: none;
    transition: background-size 250ms;
}

.main .btn-primary:hover,
.main .btn-primary:focus,
.main .btn-primary:active {
    background: var(--ml-grad);
    background-size: 300%;
    color: #fff;
}

.main .btn-default {
    border-color: var(--ml-border);
    background: #fff;
    color: var(--ml-text);
    box-shadow: none;
    text-shadow: none;
}

.main .btn-default:hover,
.main .btn-default:focus {
    border-color: var(--ml-c2);
    background: #fff;
    color: var(--ml-c2);
}

/* not .counter-input: quantity field of product cards keeps its own style (custom.css) */
.main .form-control:not(.counter-input) {
    border-color: var(--ml-border);
    border-radius: 10px;
    box-shadow: none;
    color: var(--ml-text);
}

.main .form-control:not(.counter-input):focus {
    border-color: var(--ml-c2);
    box-shadow: 0 0 0 3px rgba(50, 90, 251, .12);
}

/* ---------- Layout by page type (main/shop.tpl, body.ml-layout-*) ----------
 * Figma: inner pages have no left column; catalog has only the filter column (+ catalog menu by request).
 * full    - sidebar is not shown (class "hidden" in template), content col-md-12;
 * catalog - sidebar keeps only catalog menu and faceted filter;
 * product - unchanged.
 */

.ml-layout-catalog .sidebar > :not(.menu):not(#faset-filter) {
    display: none !important;
}

/* without sidebar: content edge in line with search and breadcrumbs (custom.css: .main padding-left 10px) */
.ml-layout-full .main {
    padding-left: 15px;
}

/* ---------- Search field (header, Figma: Mulish Light 18, field 51px with 2px gradient border) ---------- */

.search-input-wrapper input,
.search-input-wrapper .search-submit {
    height: 47px;
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
}

.search-input-wrapper input {
    padding: 0 14px 0 51px;
}

.search-input-wrapper input::placeholder {
    color: #2830D7;
    opacity: 1;
}

.search-input-wrapper .search-icon {
    left: 19px;
    width: 22px;
    height: 22px;
}

.search-input-wrapper .search-submit {
    padding: 0 22px;
}

/* ---------- Header text (Figma: menu, favorites, cart - Mulish Light 18) ---------- */

.nav__link,
.nav__link:visited,
.header__fav span,
.header__cart span {
    font-size: 18px;
    font-weight: 300;
}

.nav__link {
    white-space: nowrap;
}

/* narrower screens: 18px menu (4 items) fits in one line - smaller logo, gaps and round icons */
@media (max-width: 1299px) {
    .header__logo img {
        max-width: 190px;
        margin-left: 0;
    }

    .header__nav {
        margin-left: 18px;
    }

    .nav__list {
        gap: 12px;
    }

    .header__right {
        gap: 12px;
        margin-left: 12px;
    }

    .header__contacts,
    .header__socials {
        gap: 6px;
    }

    .blue-cycle {
        width: 32px;
        height: 32px;
    }

    .header__fav,
    .header__cart {
        gap: 8px;
    }

    /* custom.css: header plate and top banner are 60px wider than the container on each side -
       on screens narrower than 1300px that gave a horizontal scroll */
    .header__inner {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .top-banner {
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* ---------- Pages /page/ (page/page_page_list.tpl, page_catalog_list.tpl; Figma Desktop-10/11/12) ----------
 * Title Mulish Medium 40 (box 50px), no divider; 50px to text.
 * Text Mulish Medium 16/24, letter-spacing 3%, #404040; links underlined in text color.
 */

body[data-path="page"] .main .page-header {
    margin: 0 0 50px;
    padding: 0;
    border: none;
}

body[data-path="page"] .main .page-header h1,
body[data-path="page"] .main .page-header h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: var(--ml-text);
}

body[data-path="page"] .main .page-list,
body[data-path="page"] .main .page-list p,
body[data-path="page"] .main .page-list li,
body[data-path="page"] .main .page-list td {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .03em;
    color: var(--ml-text);
}

body[data-path="page"] .main .page-list p {
    margin: 0 0 24px;
}

/* template wraps page text in <p>: block tags inside it leave empty paragraphs */
body[data-path="page"] .main .page-list p:empty {
    display: none;
}

body[data-path="page"] .main .page-list h2,
body[data-path="page"] .main .page-list h3,
body[data-path="page"] .main .page-list h4 {
    margin: 32px 0 12px;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    color: var(--ml-text);
}

body[data-path="page"] .main .page-list a {
    color: var(--ml-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-path="page"] .main .page-list a:hover {
    color: var(--ml-c2);
}

/* "Interesting to read" (other pages of the section): not in the mockup, kept in the same type scale */
body[data-path="page"] .main > hr {
    margin: 32px 0 0;
    border-top-color: var(--ml-border);
}

body[data-path="page"] .main > h3 {
    margin: 32px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    color: var(--ml-text);
}

/* empty block of related products (@productOdnotip@) under page text */
body[data-path="page"] .main .page-header:has(> h3:empty) {
    display: none;
}

/* catalog: title in line with the top of the left column (Figma Desktop-5/6) */
.ml-layout-catalog .main .page-header:has(> h1) {
    margin-top: 0;
}

.ml-layout-catalog .main .page-header:has(> h1) h1 {
    margin-top: 0;
}

/* ---------- Header counters: badge on icon (users/wishlist/wishlist_top_enter.tpl, #cartlink in main/*.tpl) ----------
 * Number in a gradient bubble at the top right of the icon, hidden at 0 (custom.js: .is-empty, .is-ready, .is-bump).
 */

.header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.header__fav .header__icon img,
.header__cart .header__icon img {
    width: 24px;
    height: 24px;
}

.header__fav .header__badge,
.header__cart .header__badge {
    position: absolute;
    top: -8px;
    right: -11px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ml-grad);
    box-shadow: 0 0 0 2px #fff;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.header__fav .header__badge:not(.is-ready),
.header__cart .header__badge:not(.is-ready),
.header__fav .header__badge.is-empty,
.header__cart .header__badge.is-empty {
    display: none;
}

.header__badge.is-bump {
    animation: ml-badge-bump 400ms ease-out;
}

@keyframes ml-badge-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.header__fav,
.header__cart {
    gap: 15px;
}

/* ---------- Cart popover (#cart .popover, modules/visualcart/templates/*.tpl) ---------- */

#cart .popover {
    width: 340px;
    max-width: 340px;
    padding: 0;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    font-family: 'Mulish', Arial, sans-serif;
}

#cart .popover > .arrow {
    border-bottom-color: var(--ml-border);
}

#cart .popover-content {
    padding: 12px;
}

#cart #visualcart {
    max-height: 312px;
    margin: 0;
    overflow-y: auto;
}

#cart .visualcart-item {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px;
    border: none;
    border-radius: 10px;
    background: none;
    transition: opacity 200ms ease;
}

#cart .visualcart-item-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--ml-text);
    text-decoration: none;
}

/* delete button (custom.js): grey icon, brand color on hover */
#cart .visualcart-item-del {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ml-muted);
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease;
}

#cart .visualcart-item-del:hover,
#cart .visualcart-item-del:focus-visible {
    background: var(--ml-tint);
    color: var(--ml-c1);
}

#cart .visualcart-item-del:focus {
    outline: none;
}

#cart .visualcart-item-del:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 1px;
}

#cart .visualcart-item.is-removing {
    opacity: .4;
    pointer-events: none;
}

/* !important: style.css has "#visualcart .list-group-item { background: #fff !important }" */
#cart .visualcart-item:hover,
#cart .visualcart-item:focus {
    background: #F9F9F9 !important;
}

/* style.css: "#visualcart .list-group-item :hover { opacity: .7 }" */
#cart .visualcart-item :hover {
    opacity: 1;
}

#cart .visualcart-item-img {
    margin: 0; /* style.css: "#visualcart img { margin: auto }" */
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #F6F6F6;
    object-fit: contain;
}

#cart .visualcart-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#cart .visualcart-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ml-text);
}

#cart .visualcart-item-link:hover .visualcart-item-name {
    color: var(--ml-c2);
}

#cart .visualcart-item-meta {
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

#cart .visualcart-empty {
    padding: 16px 8px 12px;
    text-align: center;
}

#cart #visualcart_content:has(#visualcart .visualcart-item) .visualcart-empty {
    display: none;
}

#cart .visualcart-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ml-text);
}

#cart .visualcart-empty-text {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ml-muted);
}

#cart #visualcart_order {
    margin-top: 12px;
}

/* module leaves the button visible for an empty cart on first render */
#cart #visualcart_content:not(:has(#visualcart .visualcart-item)) #visualcart_order {
    display: none !important;
}

#cart #visualcart_order .gradient-solid-button {
    width: 100%;
    color: #fff;
    text-decoration: none;
}

/* ---------- Search suggestions (#search popover inside .search-input-wrapper) ----------
 * Aligned to the left edge of the field, arrow near the left (not centered); products list in site style.
 */

.search-input-wrapper > .popover {
    left: 0 !important;
    width: 560px;
    max-width: 100%;
    margin-top: 8px;
    padding: 0;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    font-family: 'Mulish', Arial, sans-serif;
}

.search-input-wrapper > .popover > .arrow {
    left: 40px !important;
    border-bottom-color: var(--ml-border);
}

.search-input-wrapper > .popover .popover-content {
    max-height: 440px;
    padding: 8px;
    overflow-y: auto;
}

.search-input-wrapper .news-list {
    margin: 0;
}

.search-input-wrapper .news-list a {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--ml-text);
    text-decoration: none;
}

.search-input-wrapper .news-list a:hover,
.search-input-wrapper .news-list a:focus {
    background: #F9F9F9;
}

/* style.css: ".template-pad { padding: 10px }" */
.search-input-wrapper .news-list .template-pad {
    padding: 0;
}

.search-input-wrapper .news-list .media {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.search-input-wrapper .news-list .media-left {
    padding: 0;
}

.search-input-wrapper .news-list .media-object {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #F6F6F6;
    object-fit: contain;
}

.search-input-wrapper .news-list .media-heading {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ml-text);
}

.search-input-wrapper .news-list a:hover .media-heading {
    color: var(--ml-c2);
}

.search-input-wrapper .news-list .media-body > span {
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

/* ---------- Login modal (#userModal in main/*.tpl) ---------- */

#userModal .modal-dialog {
    width: 400px;
    max-width: calc(100% - 20px);
}

#userModal .modal-content {
    padding: 0;
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    font-family: 'Mulish', Arial, sans-serif;
}

/* style.css: form[name="user_forma"] { width: 306px; margin-left: 15px } */
#userModal form {
    max-width: none;
    width: auto;
    margin: 0;
}

#userModal .modal-header {
    position: relative;
    padding: 24px 24px 8px;
    border-bottom: none;
}

#userModal .modal-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: var(--ml-text);
}

#userModal .modal-header .close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: #F6F6F6;
    color: var(--ml-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    transition: background 200ms, color 200ms;
}

#userModal .modal-header .close:hover {
    background: var(--ml-tint);
    color: var(--ml-c2);
}

#userModal .modal-body {
    padding: 12px 24px 8px;
}

#userModal .modal-body br {
    display: none;
}

#userModal .form-control {
    height: 44px;
    margin-bottom: 12px;
    padding: 0 14px;
    border: 1px solid var(--ml-border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 15px;
    color: var(--ml-text);
}

#userModal .form-control:focus {
    border-color: var(--ml-c2);
    box-shadow: 0 0 0 3px rgba(50, 90, 251, .12);
}

#userModal .has-error .form-control {
    border-color: #d9534f;
}

#userModal .flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

#userModal .checkbox {
    margin: 0;
}

#userModal .checkbox label {
    font-size: 14px;
    color: var(--ml-text);
}

#userModal .pass,
#userModal .modal-footer a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ml-c2);
    text-decoration: none;
}

#userModal .pass:hover,
#userModal .modal-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#userModal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px 24px;
    border-top: none;
}

#userModal .modal-footer:before,
#userModal .modal-footer:after {
    display: none;
}

#userModal .modal-footer .btn-primary {
    height: 44px;
    padding: 0 36px;
    border: none;
    border-radius: 10px;
    background: var(--ml-grad);
    background-size: 100%;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-shadow: none;
    box-shadow: none;
    transition: background-size 250ms;
}

#userModal .modal-footer .btn-primary:hover,
#userModal .modal-footer .btn-primary:focus {
    background-size: 300%;
}

/* ---------- Search page: products only ----------
 * Suggestions: catalog template disabled (search_ajax_catalog_forma.tpl.off), page template empty, phpshop.js shows only
 * answers with products. Page /search/: core counts matched pages as "found" but lists only products, so a query
 * matching pages only gives an empty list - show the core message text ("Nothing found") for that case.
 */
body[data-path="search"] .main:has(input[name="words"]:not([value=""])) .template-product-list:empty:before {
    content: "\041D\0438\0447\0435\0433\043E  \043D\0435  \043D\0430\0439\0434\0435\043D\043E";
    display: block;
    padding: 0 15px;
    font-size: 20px;
    font-weight: 500;
    color: var(--ml-text);
}

/* ---------- Top banner (sticker in header, main/*.tpl .top-banner) ----------
 * Brand gradient strip, white text 14px, link underlined, round close button on the right.
 */

.top-banner {
    min-height: 40px;
    padding: 0 52px;
    border-radius: 0;
    background: var(--ml-grad);
    color: #fff;
}

.top-banner .sticker-text {
    position: static;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
}

.top-banner .sticker-text a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .6);
    text-underline-offset: 3px;
    transition: text-decoration-color 200ms;
}

.top-banner .sticker-text a:hover,
.top-banner .sticker-text a:focus {
    color: #fff;
    text-decoration-color: #fff;
}

.top-banner .sticker-close {
    position: absolute;
    top: 50%;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    line-height: 0;
    text-shadow: none;
    opacity: 1;
    float: none;
    cursor: pointer;
    transition: background 200ms;
}

/* same svg cross as the login window close (.ml-modal-close) */
.top-banner .sticker-close svg {
    display: block;
}

.top-banner .sticker-close:hover {
    background: rgba(255, 255, 255, .35);
    color: #fff;
    opacity: 1;
}

/* ---------- Header round icons (.blue-cycle: contacts, socials) ----------
 * Smooth hover: gradient fills the circle (pseudo-element fades in), icon goes from gradient to white (filter transition).
 * custom.css switched "background" on hover - that cannot be animated, so the circle keeps its look and ::before fades.
 */

.blue-cycle,
.blue-cycle:hover {
    border: double 1px transparent;
    background-image: linear-gradient(white, white), var(--ml-grad);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.blue-cycle::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

.blue-cycle:hover::before,
.blue-cycle:focus-visible::before {
    opacity: 1;
}

.blue-cycle img {
    filter: brightness(1) invert(0);
    transition: filter 250ms ease;
}

.blue-cycle:hover img,
.blue-cycle:focus-visible img {
    filter: brightness(0) invert(1);
}

/* ---------- Links: no "pale" state after click ----------
 * style.css: "a:focus { opacity: .6 }" - after a click (also middle click) the link keeps focus and stays pale.
 * Keyboard focus is shown with an outline instead.
 */

a:focus {
    opacity: 1;
}

a:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

/* ---------- Wishlist heart in product cards ----------
 * custom.css animates "all" 300ms: when the button gets .in-wishlist under the cursor, the outline went from hover blue
 * to turquoise (blue flash). Color switches to the "in wishlist" state at once; hover keeps a smooth change.
 */

.wishlist-btn.in-wishlist .wishlist-icon {
    transition: none;
}

/* ---------- Wishlist heart in product cards: site style ----------
 * Hover: no blue outline (custom.css), only the button scale. In wishlist: brand gradient fill and outline
 * (url(#ml-grad) - hidden <svg> with the gradient at the top of main/index.tpl and main/shop.tpl).
 */

.wishlist-btn:hover .wishlist-icon {
    stroke: rgba(64, 64, 64, .8);
}

.wishlist-btn.in-wishlist .wishlist-icon,
.wishlist-btn.in-wishlist .wishlist-icon.active,
.wishlist-btn.in-wishlist:hover .wishlist-icon {
    stroke: url(#ml-grad);
    fill: url(#ml-grad);
}

/* ---------- Product card: "add to cart" button and quantity counter 36px (were 43 / 42px) ---------- */

.pc-card .cart-control > button.addToCartList {
    min-height: 36px;
    padding: 7px 16px;
    font-size: 15px;
    line-height: 22px;
}

.pc-card .cart-counter {
    height: 36px;
}

.pc-card .cart-counter .counter-btn {
    width: 56px;
    height: 36px;
    font-size: 20px;
}

.pc-card .cart-counter .counter-input {
    height: 36px;
    font-size: 16px;
}

/* ---------- Smooth hover for gradient buttons and slider dots ----------
 * custom.css switched "background" (gradient) on hover - not animatable, so it was instant.
 * Now the gradient fill is a layer that fades in (opacity), text color changes smoothly.
 */

/* outline button "Podrobnee" (.gradient-button: slider, info blocks) */
.gradient-button {
    isolation: isolate;
    transition: color 250ms ease;
}

.gradient-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 25px;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

.gradient-button:hover,
.gradient-button:focus {
    background: #fff;
    color: #fff;
}

.gradient-button:hover::before {
    display: block;
}

.gradient-button:hover::after,
.gradient-button:focus-visible::after {
    opacity: 1;
}

/* slider dots */
.carousel-indicators li {
    position: relative;
    border: 1px solid var(--ml-text);
    background: transparent;
    transition: border-color 250ms ease, transform 250ms ease;
}

.carousel-indicators li::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

.carousel-indicators li:hover {
    border-color: var(--ml-c2);
    transform: scale(1.1);
}

.carousel-indicators li:hover::after {
    opacity: .25;
}

.carousel-indicators .active,
.carousel-indicators li.active:hover {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid transparent;
    background: transparent;
    transform: none;
}

.carousel-indicators .active::after,
.carousel-indicators li.active:hover::after {
    opacity: 1;
}

/* active dot is not clickable: no hover change (li:hover::after above would make it pale) */
.carousel-indicators li.active {
    cursor: default;
}

/* ---------- Home: "Spetspredlozheniya / Novinki / Rasprodazha" links near the block title ---------- */

.main .page-header .pull-right > .btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin-left: 6px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    box-shadow: none;
    color: var(--ml-c1);
    font-size: 14px;
    font-weight: 500;
    text-shadow: none;
    transition: color 250ms ease;
}

.main .page-header .pull-right > .btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 18px;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

.main .page-header .pull-right > .btn:hover,
.main .page-header .pull-right > .btn:focus {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    color: #fff;
}

.main .page-header .pull-right > .btn:hover::after,
.main .page-header .pull-right > .btn:focus-visible::after {
    opacity: 1;
}

.main .page-header .pull-right > .btn .glyphicon {
    top: 0;
    font-size: 13px;
}

/* ---------- Horizontal banner ("Rasprodazha" at the bottom, @banersDispHorizontal@) ----------
 * Card with radius 16, brand gradient over the banner picture, white text; slight lightening on hover.
 */

.banner .bg-img-hero-center {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.banner .bg-img-hero-center::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ml-grad);
    opacity: .92;
    transition: opacity 250ms ease;
}

.banner .bg-img-hero-center:hover::before {
    opacity: .85;
}

.banner .bg-img-hero-center > a {
    position: relative;
    display: block;
    padding: 28px 40px;
    color: #fff;
    text-decoration: none;
}

.banner .bg-img-hero-center .banner-align {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.banner .bg-img-hero-center .banner-title {
    margin: 0 0 6px;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: #fff;
}

.banner .bg-img-hero-center .m-2,
.banner .bg-img-hero-center .banner-image p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, .9);
}

/* ---------- Footer (Figma: footer of Desktop-10/11/12) ----------
 * #13069E, no radius (user request, Figma has top radius 10), padding 59px top; headings Mulish Medium 20 white, 14px to the list;
 * items Montserrat Regular 12/16, 24px step, white, no icons.
 */

@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

footer.footer.well {
    margin: 40px 0 0;
    padding: 59px 0 61px;
    border: none;
    border-radius: 0;
    background: #13069E;
    box-shadow: none;
}

footer.footer h5 {
    margin: 0 0 14px;
    font-family: 'Mulish', Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    color: #fff;
}

footer.footer ul:not(.social-menu) {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer.footer ul:not(.social-menu) > li {
    margin: 0 0 8px;
    font-family: 'Montserrat', 'Mulish', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #fff;
}

footer.footer ul:not(.social-menu) > li a {
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    transition: opacity 200ms;
}

footer.footer ul:not(.social-menu) > li a:hover {
    color: #fff;
    opacity: .75;
    text-decoration: underline;
    text-underline-offset: 3px;
}

footer.footer ul:not(.social-menu) > li > .fa {
    display: none;
}

footer.footer h4 {
    margin: 0;
}

/* social icons above the first column: no gap when all of them are hidden (__hide) */
footer.footer .social-menu {
    margin: 0;
}

footer.footer h4:has(.social-menu > li:not(.hide)) {
    margin-bottom: 14px;
}

/* ---------- Inner pages: vertical rhythm (user request: Figma 64px gaps were too big) ----------
 * breadcrumbs: see "Breadcrumbs" section; first title of the content without top margin,
 * /page/ title -> text 24px.
 */

body[class*="ml-layout-"] .main > .page-header:first-of-type {
    margin-top: 0;
}

body[class*="ml-layout-"] .main > .page-header:first-of-type > h1,
body[class*="ml-layout-"] .main > .page-header:first-of-type > h2 {
    margin-top: 0;
}

body[data-path="page"] .main .page-header {
    margin-bottom: 24px;
}

/* ---------- Search page (search/search_page_list.tpl) ----------
 * Query is typed in the header search field; under the title - options (section, where to search) in site style.
 * custom.js: options submit the form at once, the header form carries the chosen options.
 */

.ml-search-title {
    margin-bottom: 20px;
    padding: 0;
    border: none;
}

.ml-search-title h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    color: var(--ml-text);
}

.ml-search-query {
    color: var(--ml-c1);
}

.ml-search-query:not(:empty)::before {
    content: "\00AB";
}

.ml-search-query:not(:empty)::after {
    content: "\00BB";
}

.ml-search-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
    margin: 0 0 28px;
}

.ml-search-options__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ml-search-options__label {
    font-size: 14px;
    color: var(--ml-muted);
}

/* section: pill with gradient border and dropdown list */
.ml-search-select__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 440px;
    height: 40px;
    padding: 0 16px 0 18px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    color: var(--ml-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 200ms ease;
}

.ml-search-select__toggle:hover,
.ml-search-select.open .ml-search-select__toggle {
    box-shadow: 0 4px 14px rgba(50, 90, 251, .18);
}

.ml-search-select__toggle:focus {
    outline: none;
}

.ml-search-select__toggle:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

.ml-search-select__toggle #catSearchSelect {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ml-search-select__toggle svg {
    flex: 0 0 12px;
    color: var(--ml-c1);
    transition: transform 200ms ease;
}

.ml-search-select.open .ml-search-select__toggle svg {
    transform: rotate(180deg);
}

.ml-search-select__menu {
    min-width: 100%;
    max-height: 320px;
    margin-top: 6px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--ml-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

.ml-search-select__menu > li > a {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--ml-text);
    transition: background-color 150ms ease, color 150ms ease;
}

.ml-search-select__menu > li > a:hover,
.ml-search-select__menu > li > a:focus {
    background: #F3F5FF;
    color: var(--ml-c1);
}

/* where to search: segmented switch */
.ml-search-switch {
    display: inline-flex;
    gap: 2px;
    height: 40px;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
}

.ml-search-switch__opt {
    position: relative;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.ml-search-switch__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ml-search-switch__opt span {
    display: block;
    height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 32px;
    color: var(--ml-c1);
    transition: color 200ms ease, background-color 200ms ease;
}

.ml-search-switch__opt:hover span {
    background: #F3F5FF;
}

.ml-search-switch__opt input:checked + span {
    background: var(--ml-grad);
    color: #fff;
}

.ml-search-switch__opt input:focus-visible + span {
    outline: 2px solid var(--ml-c2);
    outline-offset: 1px;
}

/* nothing found (core puts <h3> into the products row) */
.template-product-list > h3:only-child {
    flex: 1 1 100%;
    margin: 0 15px 32px;
    padding: 48px 24px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    color: var(--ml-text);
}

/* "Try another query or section" */
.template-product-list > h3:only-child::after {
    content: "\041F\043E\043F\0440\043E\0431\0443\0439\0442\0435\0020\0438\0437\043C\0435\043D\0438\0442\044C\0020\0437\0430\043F\0440\043E\0441\0020\0438\043B\0438\0020\0440\0430\0437\0434\0435\043B\0020\043F\043E\0438\0441\043A\0430";
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--ml-muted);
}

/* ---------- Pagination (paginator/paginator_main.tpl): catalog, search, news etc. ----------
 * Round 40px buttons, current page - brand gradient, arrows instead of "<<" / "Next >>".
 */

.ml-pagination-wrap {
    margin: 32px 0 8px;
}

.pagination.ml-pagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.pagination.ml-pagination > li {
    display: block;
}

.pagination.ml-pagination > li > a,
.pagination.ml-pagination > li > span {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--ml-border);
    border-radius: 20px;
    background: #fff;
    font-family: 'Mulish', Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--ml-text);
    text-decoration: none;
    transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.pagination.ml-pagination > li > a:hover,
.pagination.ml-pagination > li > a:focus {
    z-index: auto;
    border-color: var(--ml-c2);
    background: #F3F5FF;
    color: var(--ml-c1);
}

.pagination.ml-pagination > li.active > a,
.pagination.ml-pagination > li.active > a:hover,
.pagination.ml-pagination > li.active > a:focus {
    z-index: auto;
    border-color: transparent;
    background: var(--ml-grad);
    color: #fff;
    cursor: default;
}

.pagination.ml-pagination > .ml-pagination__arrow > a {
    width: 40px;
    padding: 0;
    color: var(--ml-c1);
}

/* first / last page (custom.js) */
.pagination.ml-pagination > li.disabled > a {
    opacity: .35;
    pointer-events: none;
}

/* ---------- Header search: grey at rest, brand blue when focused ----------
 * Placeholder and magnifier are grey while the field is not active, turn blue smoothly on focus.
 */

.search-input-wrapper input::placeholder {
    color: #9A9A9A;
    transition: color 250ms ease;
}

.search-input-wrapper:focus-within input::placeholder {
    color: #2830D7;
}

/* magnifier.svg is drawn with the brand gradient: grey = desaturated */
.search-input-wrapper .search-icon {
    opacity: .55;
    filter: grayscale(1);
    transition: filter 250ms ease, opacity 250ms ease;
}

.search-input-wrapper:focus-within .search-icon {
    opacity: 1;
    filter: none;
}

/* ---------- Header "Log in" (users/users_forma.tpl - button, no login page) and user menu (users_forma_enter.tpl) ----------
 * Pill 51px like the search field: gradient border, gradient fill fades in on hover.
 */

.user_entrance {
    display: flex;
    align-items: center;
}

.header-login {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 51px;
    padding: 0 22px 0 18px;
    border: 2px solid transparent;
    border-radius: 26px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    font-family: 'Mulish', Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--ml-text);
    white-space: nowrap;
    cursor: pointer;
    transition: color 250ms ease;
}

.header-login::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 26px;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

.header-login__icon {
    flex: 0 0 20px;
    color: var(--ml-c1);
    transition: color 250ms ease;
}

.header-login:hover,
.header-user.is-open .header-login {
    color: #fff;
}

.header-login:hover::after,
.header-user.is-open .header-login::after {
    opacity: 1;
}

.header-login:hover .header-login__icon,
.header-user.is-open .header-login__icon {
    color: #fff;
}

.header-login:focus {
    outline: none;
}

.header-login:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

.header-user__name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user__caret {
    transition: transform 200ms ease;
}

.header-user.is-open .header-user__caret {
    transform: rotate(180deg);
}

/* User menu (iteration 38): card like the cart popover (#cart .popover) - white, radius 16, light border, soft shadow.
 * Opened by custom.js (.is-open); fades in 8px below the button, the ::before strip covers the gap for the mouse. */
.header-user {
    position: relative;
}

.header-user__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    width: 290px;
    padding: 8px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    font-family: 'Mulish', Arial, sans-serif;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.header-user__menu::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    height: 10px;
}

.header-user.is-open .header-user__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

.header-user__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    padding: 8px 8px 14px;
    border-bottom: 1px solid var(--ml-border);
}

.header-user__avatar {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ml-grad);
    color: #fff;
}

.header-user__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header-user__title,
.header-user__mail {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header-user__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ml-text);
}

.header-user__mail {
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.header-user__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 20px;
    color: var(--ml-text);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.header-user__item svg {
    flex: 0 0 20px;
    color: var(--ml-muted);
    transition: color 150ms ease;
}

.header-user__item:hover,
.header-user__item:focus {
    background: #F9F9F9;
    color: var(--ml-c1);
    text-decoration: none;
    outline: none;
}

.header-user__item:hover svg,
.header-user__item:focus svg {
    color: var(--ml-c2);
}

.header-user__item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ml-c2);
}

.header-user__sep {
    height: 1px;
    margin: 6px 0;
    background: var(--ml-border);
}

.header-user__item--logout:hover,
.header-user__item--logout:focus,
.header-user__item--logout:hover svg,
.header-user__item--logout:focus svg {
    color: #D93036;
}

/* "Log in" in the footer list and inline links on forms: buttons that look like links */
.footer-link-btn,
.ml-link-btn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

footer.footer .footer-link-btn {
    font-family: 'Montserrat', 'Mulish', Arial, sans-serif;
    font-size: 12px;
    color: #fff;
    transition: opacity 200ms;
}

footer.footer .footer-link-btn:hover {
    opacity: .75;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ml-link-btn {
    color: var(--ml-c1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ml-link-btn:hover {
    color: var(--ml-c2);
}

/* ---------- Login modal: vertically centered ---------- */

#userModal .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
    margin-top: 30px;
    margin-bottom: 30px;
}

#userModal .modal-content {
    width: 100%;
}

/* ---------- Registration / password recovery (users/register.tpl, users/sendpassword.tpl) ---------- */

.ml-auth-form {
    max-width: 480px;
    padding: 32px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

/* style.css: narrow forms (template-sm) */
form.ml-auth-form.template-sm,
form.ml-auth-form {
    width: auto;
    margin-left: 0;
}

.ml-auth-form__hint {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-muted);
}

.ml-auth-form .form-group {
    margin-bottom: 12px;
}

.main .ml-auth-form .form-control {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
}

.ml-auth-form br {
    display: none;
}

.ml-auth-form__rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 20px;
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-text);
}

.ml-auth-form__rule input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ml-c1);
}

.ml-auth-form__rule a {
    color: var(--ml-c1);
}

.main .ml-auth-form .btn {
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 500;
}

.main .ml-auth-form .btn + .btn {
    margin-left: 8px;
}

.main form[name="userpas_forma"] .btn-primary {
    width: 100%;
}

.ml-auth-form__alt {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ml-border);
    font-size: 14px;
    color: var(--ml-muted);
}

/* ---------- Wishlist page (php/hook/phpshopusers.hook.php, users/wishlist/*.tpl) ---------- */

.ml-wishlist-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
}

.ml-wishlist-bar__count {
    font-size: 16px;
    color: var(--ml-muted);
}

.ml-wishlist-bar__count b {
    font-weight: 600;
    color: var(--ml-text);
}

.ml-wishlist-clear-form {
    margin: 0;
}

.ml-wishlist-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--ml-border);
    border-radius: 20px;
    background: #fff;
    font-size: 15px;
    color: var(--ml-text);
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.ml-wishlist-clear:hover {
    border-color: #E5484D;
    background: #FFF5F5;
    color: #D93036;
}

.ml-wishlist-grid .pc-card {
    transition: opacity 250ms ease, transform 250ms ease;
}

.ml-wishlist-grid .pc-card.is-removing {
    opacity: 0;
    transform: scale(.96);
}

/* empty state (wishlist, etc.) */
.ml-empty-state {
    padding: 56px 24px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    text-align: center;
}

.ml-empty-state__icon {
    margin-bottom: 16px;
}

.ml-empty-state__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: var(--ml-text);
}

.ml-empty-state__text {
    margin: 8px auto 24px;
    max-width: 420px;
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-muted);
}

.ml-empty-state__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    padding: 0 28px;
    border-radius: 22px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

/* ---------- Content blocks of pages (Delivery, Payment: page content in admin) ---------- */

.ml-article {
    max-width: 980px;
}

body[data-path="page"] .main .page-list .ml-lead {
    font-size: 18px;
    line-height: 28px;
}

body[data-path="page"] .main .page-list .ml-article h3 {
    margin: 40px 0 14px;
    font-size: 24px;
    line-height: 30px;
}

body[data-path="page"] .main .page-list .ml-article > h3:first-child {
    margin-top: 0;
}

.ml-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

body[data-path="page"] .main .page-list .ml-chips li {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    font-size: 15px;
    line-height: 20px;
    color: var(--ml-c1);
}

.ml-callout {
    margin: 24px 0;
    padding: 18px 24px;
    border-radius: 16px;
    background: var(--ml-grad);
    color: #fff;
}

.ml-callout__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
}

.ml-callout--warning {
    border: 1px solid #F5C2C4;
    background: #FFF5F5;
    color: #B42318;
}

.ml-info-card {
    margin: 24px 0;
    padding: 24px 28px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.ml-info-card__title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    color: var(--ml-text);
}

body[data-path="page"] .main .page-list .ml-info-card p {
    margin: 0 0 6px;
}

body[data-path="page"] .main .page-list .ml-info-card .ml-info-card__muted {
    color: var(--ml-muted);
}

/* numbered steps: gradient circles */
.ml-steps {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: ml-step;
}

body[data-path="page"] .main .page-list .ml-steps li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 48px;
    counter-increment: ml-step;
}

.ml-steps li::before {
    content: counter(ml-step);
    position: absolute;
    top: -3px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ml-grad);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
}

/* requisites: label / value table */
.ml-requisites dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px 24px;
    margin: 16px 0 0;
}

.ml-requisites dt {
    font-size: 15px;
    font-weight: 400;
    color: var(--ml-muted);
}

.ml-requisites dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--ml-text);
    letter-spacing: .03em;
}

@media (max-width: 767px) {
    .ml-requisites dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ml-requisites dd {
        margin-bottom: 10px;
    }
}

/* ---------- Contacts (Figma Desktop-10: company, contacts + map card, departments card) ---------- */

/* the company name is the page title (as in Figma), default title hidden */
.main:has(.ml-contacts) > .page-header {
    display: none;
}

.ml-contacts__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 697px);
    gap: 40px;
    align-items: start;
}

body[data-path="page"] .main .page-list .ml-contacts__company {
    margin: 0 0 32px;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: 0;
    color: var(--ml-text);
}

.ml-contacts__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-path="page"] .main .page-list .ml-contacts__item {
    position: relative;
    margin: 0 0 20px;
    padding-left: 36px;
}

.ml-contacts__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--ml-grad);
    -webkit-mask: var(--ml-ico) center / 22px no-repeat;
    mask: var(--ml-ico) center / 22px no-repeat;
}

.ml-contacts__item--address { --ml-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.ml-contacts__item--phone,
.ml-dept__link--phone { --ml-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.ml-contacts__item--mail,
.ml-dept__link--mail { --ml-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ml-contacts__item--time { --ml-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

body[data-path="page"] .main .page-list .ml-contacts a {
    color: var(--ml-text);
    text-decoration: none;
    transition: color 200ms ease;
}

body[data-path="page"] .main .page-list .ml-contacts a:hover {
    color: var(--ml-c2);
}

.ml-contacts__map {
    overflow: hidden;
    height: 344px;
    border-radius: 16px;
    background: #F3F5FF;
    box-shadow: 4px 5px 25px rgba(0, 0, 0, .15);
}

.ml-contacts__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ml-contacts__departments {
    margin-top: 40px;
    padding: 8px 31px;
    border-radius: 16px;
    box-shadow: 4px 5px 25px rgba(0, 0, 0, .15);
}

.ml-dept {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px 240px;
    gap: 8px 32px;
    align-items: center;
    padding: 28px 0;
}

.ml-dept + .ml-dept {
    border-top: 1px solid var(--ml-border);
}

.ml-dept__name {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    color: var(--ml-text);
}

.ml-dept__desc {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .03em;
    color: var(--ml-muted);
}

body[data-path="page"] .main .page-list .ml-dept__link {
    position: relative;
    padding-left: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .03em;
    white-space: nowrap;
}

.ml-dept__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--ml-grad);
    -webkit-mask: var(--ml-ico) center / 20px no-repeat;
    mask: var(--ml-ico) center / 20px no-repeat;
}

@media (max-width: 991px) {
    .ml-contacts__top {
        grid-template-columns: 1fr;
    }

    .ml-dept {
        grid-template-columns: 1fr;
    }
}

/* ---------- Blog (/page/: themes, articles; page/page_mini.tpl) and news (/news/) ---------- */

.ml-posts {
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
}

.ml-posts::before,
.ml-posts::after {
    display: none;
}

.ml-post-col {
    display: flex;
}

.ml-post,
.ml-news-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    color: var(--ml-text);
    text-decoration: none;
    transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.ml-post:hover,
.ml-post:focus,
.ml-news-item:hover,
.ml-news-item:focus {
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(31, 5, 180, .12);
    color: var(--ml-text);
    text-decoration: none;
    transform: translateY(-2px);
}

.ml-post__img {
    aspect-ratio: 27 / 13;
    overflow: hidden;
    background: #F3F5FF;
}

.ml-post__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.ml-post:hover .ml-post__img img {
    transform: scale(1.04);
}

.ml-post__body,
.ml-news-item__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px 22px;
}

.ml-post__date {
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-post__title,
.ml-news-item__title {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ml-text);
    transition: color 200ms ease;
}

.ml-post:hover .ml-post__title,
.ml-news-item:hover .ml-news-item__title {
    color: var(--ml-c1);
}

.ml-post__text,
.ml-news-item__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-muted);
}

.ml-post__text p,
.ml-news-item__text p {
    margin: 0;
}

.ml-post__text:empty {
    display: none;
}

.ml-post__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ml-c1);
}

.ml-post__more svg {
    transition: transform 200ms ease;
}

.ml-post:hover .ml-post__more svg,
.ml-news-item:hover .ml-post__more svg {
    transform: translateX(3px);
}

/* blog root lists themes: no date */
body[data-path="page"][data-subpath=""] .ml-post__date {
    display: none;
}

/* "Interesting to read" / recommended products under a page */
.ml-related {
    margin-top: 48px;
}

/* service pages (top menu section 1000 / no section: Delivery, Payment, Contacts...) - no blog posts, as in Figma */
.ml-related--cat-1000,
.ml-related--cat-0,
.ml-related--cat- {
    display: none;
}

body[data-path="page"] .main .ml-section-title,
.ml-section-title {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: var(--ml-text);
}

/* news list: horizontal cards */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ml-news-item {
    flex-direction: row;
}

.ml-news-item__img {
    flex: 0 0 280px;
    overflow: hidden;
    background: #F3F5FF;
}

.ml-news-item__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .ml-news-item {
        flex-direction: column;
    }

    .ml-news-item__img {
        flex-basis: auto;
        aspect-ratio: 27 / 13;
    }
}

/* news page */
body[data-path="news"] .main .page-header {
    margin: 0 0 8px;
    padding: 0;
    border: none;
}

body[data-path="news"] .main .page-header h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: var(--ml-text);
}

.ml-news-full__date {
    margin-bottom: 24px;
}

.ml-news-full__lead,
.ml-news-full__text {
    max-width: 980px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .03em;
    color: var(--ml-text);
}

.ml-news-full__lead {
    font-size: 18px;
    line-height: 28px;
}

.ml-news-full__lead p,
.ml-news-full__text p {
    margin: 0 0 20px;
}

.ml-news-full__text a {
    color: var(--ml-c1);
}

.ml-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    font-size: 15px;
    font-weight: 500;
    color: var(--ml-c1);
    text-decoration: none;
}

.ml-back-link:hover,
.ml-back-link:focus {
    color: var(--ml-c2);
    text-decoration: none;
}

/* breadcrumbs with "visible-lg" (blog, news templates): Bootstrap sets display:block !important on lg */
@media (min-width: 1200px) {
    .ml-breadcrumbs .breadcrumb.visible-lg {
        display: flex !important;
    }
}

/* personal account pages (registration, password, wishlist): title as on other inner pages */
body[data-path="users"] .main .page-header {
    margin: 0 0 24px;
    padding: 0;
    border: none;
}

body[data-path="users"] .main .page-header h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: var(--ml-text);
}

/* ---------- Header counters: badge at the top LEFT of the icon, small gap icon -> text ----------
 * (on the right it took the space between the icon and the label)
 */

.header__fav .header__badge,
.header__cart .header__badge {
    right: auto;
    left: -11px;
}

.header__fav,
.header__cart {
    gap: 8px;
}

/* ---------- Header search: typed text blue, placeholder dimmer than the text ---------- */

.search-input-wrapper input {
    color: #2830D7;
}

.search-input-wrapper:focus-within input::placeholder {
    color: rgba(40, 48, 215, .4);
}

/* ---------- Modals: no page jump on open ----------
 * style.css "body.modal-open { margin-right: -17px }" shifted the page when the scrollbar disappeared.
 * The scrollbar place is reserved instead, Bootstrap compensation is not needed.
 */

html {
    scrollbar-gutter: stable;
}

body.modal-open {
    margin-right: 0;
    padding-right: 0 !important;
}

/* close button: even cross centered in the circle (main/*.tpl: .ml-modal-close with svg) */
#userModal .modal-header .close.ml-modal-close,
.modal .close.ml-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.modal .close.ml-modal-close svg {
    display: block;
}

/* ---------- Page title with an action button (reviews) ---------- */

.ml-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ml-page-head::before,
.ml-page-head::after {
    display: none;
}

.ml-page-head__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

.ml-page-head__btn:hover,
.ml-page-head__btn:focus {
    color: #fff;
    text-decoration: none;
}

/* ---------- Reviews (/gbook/: gbook/*.tpl) ---------- */

body[data-path="gbook"] .main .page-header {
    margin: 0 0 24px;
    padding: 0;
    border: none;
}

body[data-path="gbook"] .main .page-header h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: var(--ml-text);
}

.ml-reviews {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 980px;
}

.ml-review {
    padding: 24px 28px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
}

.ml-review__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ml-review__avatar {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ml-grad);
    color: #fff;
}

.ml-review__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--ml-text);
}

.ml-review__date {
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-review__title,
.ml-review__title:visited {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ml-text);
    text-decoration: none;
    transition: color 200ms ease;
}

.ml-review__title:hover,
.ml-review__title:focus {
    color: var(--ml-c1);
    text-decoration: none;
}

.ml-review__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .03em;
    color: var(--ml-text);
}

.ml-review__answer {
    margin-top: 18px;
    padding: 16px 20px;
    border-left: 3px solid var(--ml-c2);
    border-radius: 0 12px 12px 0;
    background: #F3F5FF;
}

.ml-review__answer-title {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ml-c1);
}

.ml-review__answer-text {
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-text);
}

.main .ml-gbook-form {
    max-width: 640px;
}

.main .ml-gbook-form textarea.form-control {
    height: auto;
    min-height: 140px;
    padding: 12px 14px;
    resize: vertical;
}

.main .ml-gbook-form .btn-default {
    display: inline-flex;
    align-items: center;
}

/* ---------- Blog: empty theme / no themes (page/page_catalog_list.tpl) ---------- */

.ml-posts:not(:empty) + .ml-posts-empty {
    display: none;
}

/* ---------- About (page content): features grid, call to action ---------- */

.ml-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 32px;
}

.ml-feature {
    padding: 22px 24px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    transition: box-shadow 250ms ease, border-color 250ms ease;
}

.ml-feature:hover {
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(31, 5, 180, .12);
}

.ml-feature__title {
    position: relative;
    margin-bottom: 8px;
    padding-left: 18px;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--ml-text);
}

.ml-feature__title::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ml-grad);
}

body[data-path="page"] .main .page-list .ml-feature p {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-muted);
}

body[data-path="page"] .main .page-list .ml-callout--cta p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .9);
}

body[data-path="page"] .main .page-list .ml-callout--cta a {
    color: #fff;
    text-decoration: underline;
}

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

@media (max-width: 575px) {
    .ml-features {
        grid-template-columns: 1fr;
    }
}

/* modal open: the page under it does not scroll (style.css "body { overflow-y: scroll }" beat Bootstrap's .modal-open) */
body.modal-open {
    overflow: hidden !important;
}

/* breadcrumbs: current page (last item) in the brand gradient
 * (breadcrumbs/last.tpl wraps it in .ml-crumb-current, custom.js - hardcoded crumbs of page templates) */
.ml-breadcrumbs .ml-crumb-current {
    background: var(--ml-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ml-breadcrumbs .ml-crumb-current a,
.ml-breadcrumbs .ml-crumb-current a:hover {
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

/* ---------- Empty catalog / nothing found by filters (product/product_page_list.tpl templates, custom.js) ----------
 * The core h4.empty_product_list (font 18px, row -15px margins, catalog-block bottom line) is replaced by a card:
 * floating box / magnifier with twinkling sparkles, title, text, links to other catalogs, gradient button.
 */

/* empty virtual-catalog block: only an extra bottom line (style.css .catalog-block border-bottom) */
.catalog-block:empty {
    display: none;
}

.template-product-list:has(.ml-catalog-empty),
.template-product-list:has(.empty_product_list) {
    border-bottom: 0;
}

/* section has no products: sorting bar and side filter are of no use */
body.ml-catalog-is-empty #filter-well,
body.ml-catalog-is-empty .filter-btn,
body.ml-catalog-is-empty #faset-filter {
    display: none !important;
}

/* fallback before custom.js (and for other pages printing the core text) */
.empty_product_list {
    flex: 1 1 100%;
    margin: 0 15px;
    padding: 40px 24px;
    border: 1px dashed var(--ml-border);
    border-radius: 16px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--ml-muted);
}

.ml-catalog-empty {
    position: relative;
    flex: 1 1 100%;
    margin: 0 15px;
    padding: 48px 24px 52px;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 18%, rgba(50, 90, 251, .08) 0, transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(31, 5, 180, .07) 0, transparent 38%),
        #fff;
    text-align: center;
}

.ml-catalog-empty__art {
    display: block;
    margin: 0 auto 12px;
    overflow: visible;
}

.ml-catalog-empty__box,
.ml-catalog-empty__glass {
    animation: ml-empty-float 3.2s ease-in-out infinite;
}

.ml-catalog-empty__glass {
    transform-origin: 58px 52px;
    animation-name: ml-empty-search;
}

.ml-catalog-empty__shadow {
    transform-origin: 66px 110px;
    animation: ml-empty-shadow 3.2s ease-in-out infinite;
}

.ml-catalog-empty__spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: ml-empty-twinkle 2.4s ease-in-out infinite;
}

.ml-catalog-empty__spark--2 {
    animation-delay: .8s;
}

.ml-catalog-empty__spark--3 {
    animation-delay: 1.6s;
}

@keyframes ml-empty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes ml-empty-shadow {
    0%, 100% { transform: scaleX(1); opacity: .12; }
    50% { transform: scaleX(.82); opacity: .07; }
}

@keyframes ml-empty-search {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(-5px, -3px) rotate(-6deg); }
    75% { transform: translate(5px, -3px) rotate(6deg); }
}

@keyframes ml-empty-twinkle {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    50% { transform: scale(.55) rotate(45deg); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .ml-catalog-empty__box,
    .ml-catalog-empty__glass,
    .ml-catalog-empty__shadow,
    .ml-catalog-empty__spark {
        animation: none;
    }
}

.ml-catalog-empty__badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ml-tint);
    color: var(--ml-c2);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .02em;
}

.ml-catalog-empty__title {
    max-width: 560px;
    margin: 0 auto;
    font-size: 26px;
    font-weight: 600;
    line-height: 34px;
    color: var(--ml-text);
}

.ml-catalog-empty__text {
    max-width: 520px;
    margin: 10px auto 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--ml-muted);
}

.ml-catalog-empty__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* capsule with gradient border, gradient fill on hover (as the home page tabs) */
.ml-catalog-empty__link {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 18px;
    background: var(--ml-grad);
    color: var(--ml-c1);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 250ms;
}

.ml-catalog-empty__link::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: #fff;
    transition: opacity 250ms;
}

.ml-catalog-empty__link:hover,
.ml-catalog-empty__link:focus {
    color: #fff;
    text-decoration: none;
}

.ml-catalog-empty__link:hover::before,
.ml-catalog-empty__link:focus::before {
    opacity: 0;
}

.ml-catalog-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    padding: 0 28px;
    border-radius: 22px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

.ml-catalog-empty__btn:hover,
.ml-catalog-empty__btn:focus {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .ml-catalog-empty {
        padding: 36px 16px 40px;
    }

    .ml-catalog-empty__title {
        font-size: 21px;
        line-height: 28px;
    }

    .ml-catalog-empty__text {
        font-size: 15px;
        line-height: 22px;
    }
}

/* ======================================================================
 * Iteration 29: slider arrows, catalog head (price link), subcategory tiles,
 * product labels, price list page.
 * ====================================================================== */

/* ---------- Home slider arrows (slider/slider_main.tpl .ml-slider-arrow) ----------
 * style.css hides .carousel-control (visibility: hidden) and Bootstrap makes it a 15% wide side strip with a shadow gradient.
 * Here: two round 44px buttons at the bottom right, on the line of the dots; white with a gradient border,
 * gradient fill on hover (as the site capsules). Hidden when there is only one slide.
 */
#carousel-example-generic .carousel-control.ml-slider-arrow {
    visibility: visible;
    position: absolute;
    top: auto;
    bottom: 18px;
    left: auto;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(31, 5, 180, .12);
    color: var(--ml-c1);
    font-size: 0;
    text-shadow: none;
    opacity: 1;
    isolation: isolate;
    transition: color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

#carousel-example-generic .carousel-control.ml-slider-arrow.left {
    right: 82px;
}

#carousel-example-generic .carousel-control.ml-slider-arrow.right {
    right: 28px;
}

/* gradient ring (style.css: .carousel-control.left/.right { background-image: none !important }) */
#carousel-example-generic .carousel-control.ml-slider-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1.5px;
    background: var(--ml-grad);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

#carousel-example-generic .carousel-control.ml-slider-arrow svg {
    position: relative;
    z-index: 1;
}

#carousel-example-generic .carousel-control.ml-slider-arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

#carousel-example-generic .carousel-control.ml-slider-arrow:hover,
#carousel-example-generic .carousel-control.ml-slider-arrow:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(31, 5, 180, .22);
}

#carousel-example-generic .carousel-control.ml-slider-arrow:hover::after,
#carousel-example-generic .carousel-control.ml-slider-arrow:focus-visible::after {
    opacity: 1;
}

#carousel-example-generic .carousel-control.ml-slider-arrow:active {
    transform: scale(.94);
}

/* a:focus { opacity: .6 } from style.css */
#carousel-example-generic .carousel-control.ml-slider-arrow:focus {
    opacity: 1;
}

#carousel-example-generic .carousel-inner:has(> .item:only-child) ~ .carousel-control {
    display: none;
}

/* dots on the same line as the arrows (centre 40px from the bottom) */
#carousel-example-generic .carousel-indicators {
    bottom: 31px;
}

@media (max-width: 767px) {
    #carousel-example-generic .carousel-control.ml-slider-arrow {
        bottom: 12px;
        width: 36px;
        height: 36px;
    }

    #carousel-example-generic .carousel-control.ml-slider-arrow.left {
        right: 60px;
    }

    #carousel-example-generic .carousel-control.ml-slider-arrow.right {
        right: 16px;
    }

    #carousel-example-generic .carousel-indicators {
        bottom: 21px;
    }
}

/* ---------- Catalog head: title + "Price list" capsule (product_catalog_content.tpl, catalog_info_forma.tpl) ----------
 * Before: plain glyphicon link floated right, only for catalogs without subcatalogs.
 */
.main .page-header.ml-catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.main .page-header.ml-catalog-head h1 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.ml-price-link,
.ml-price-action,
.ml-price-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    color: var(--ml-c1);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 250ms ease;
}

.ml-price-link::after,
.ml-price-action::after,
.ml-price-chip::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--ml-grad);
    opacity: 0;
    transition: opacity 250ms ease;
}

.ml-price-link:hover,
.ml-price-link:focus,
.ml-price-action:hover,
.ml-price-action:focus,
.ml-price-chip:hover,
.ml-price-chip:focus,
.ml-price-chip.is-current {
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

.ml-price-link:hover::after,
.ml-price-link:focus-visible::after,
.ml-price-action:hover::after,
.ml-price-action:focus-visible::after,
.ml-price-chip:hover::after,
.ml-price-chip:focus-visible::after,
.ml-price-chip.is-current::after {
    opacity: 1;
}

.ml-price-link svg,
.ml-price-action svg {
    flex: 0 0 auto;
}

/* catalog description under the title (category "content" in admin) */
.ml-catalog-desc {
    max-width: 900px;
    margin-bottom: 8px;
    color: var(--ml-muted);
    font-size: 15px;
    line-height: 24px;
}

.ml-catalog-desc p {
    margin: 0 0 8px;
}

.ml-catalog-desc:empty {
    display: none;
}

/* ---------- Subcatalog tiles (catalog/cid_category.tpl inside .ml-subcats) ----------
 * Cards: 410x200 picture + name; style.css .catalog-wrap widths / .catalog-img grey box are replaced.
 */
.catalog-block.ml-subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin: 8px 0 24px;
    padding: 0;
    border-bottom: 0;
}

.catalog-block.ml-subcats:empty {
    display: none;
}

.ml-subcats .catalog-wrap.ml-subcat {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: none;
}

.ml-subcat__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    color: var(--ml-text);
    text-decoration: none;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.ml-subcat__link:hover,
.ml-subcat__link:focus {
    border-color: rgba(50, 90, 251, .45);
    box-shadow: 0 10px 24px rgba(31, 5, 180, .10);
    color: var(--ml-c2);
    text-decoration: none;
    transform: translateY(-2px);
    opacity: 1;
}

.ml-subcats .ml-subcat__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 41 / 20;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.ml-subcats .ml-subcat__img img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    transition: transform 400ms ease;
}

.ml-subcat__link:hover .ml-subcat__img img {
    transform: scale(1.04);
}

.ml-subcat__name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-height: 56px;
    padding: 12px 16px;
    border-top: 1px solid var(--ml-border);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    transition: color 250ms ease;
}

/* ---------- Product labels (.sale-icon-content: product/specIcon.tpl, newtipIcon.tpl, promoIcon.tpl, hit) ----------
 * custom.css: transparent background (unreadable on photos), "Hit" got a dull blue Bootstrap .label background.
 * Now: frosted light background (white 82% + blur), dark text, own border colour per label.
 */
.sale-icon-content .label,
.sale-icon-content span.sale-icon,
.sale-icon-content span.newtip-icon,
.sale-icon-content span.hit-icon,
.sale-icon-content span.promo-icon,
.sale-icon-content span.gift-icon {
    float: none;
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 0;
    padding: 0 10px;
    border: 1.5px solid var(--ml-label, #9A9A9A);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: 0 2px 8px rgba(20, 20, 40, .08);
    color: #1F1F24;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    text-shadow: none;
    white-space: nowrap;
}

.sale-icon-content span.sale-icon {
    --ml-label: #E5484D;
}

.sale-icon-content span.newtip-icon {
    --ml-label: #22A06B;
}

.sale-icon-content span.hit-icon {
    --ml-label: #F59E0B;
}

.sale-icon-content span.promo-icon {
    --ml-label: #6D4AFF;
}

.sale-icon-content span.gift-icon {
    --ml-label: #E0479E;
}

.sale-icon-content .label:empty {
    display: none;
}

/* ---------- Price list page (price/price_page_list.tpl, php/hook/phpshopprice.hook.php) ---------- */
.ml-price-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
}

.ml-price-head__title {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: var(--ml-text);
}

.ml-price-head__cat {
    background: var(--ml-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ml-c2);
}

.ml-price-head__meta {
    margin-top: 6px;
    color: var(--ml-muted);
    font-size: 15px;
    line-height: 22px;
}

.ml-price-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

button.ml-price-action {
    font-family: inherit;
}

.ml-price-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ml-price-chips--sub {
    margin-bottom: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--ml-border);
}

.ml-price-chips:not(.ml-price-chips--sub):has(+ .ml-price-chips--sub.hide) {
    margin-bottom: 24px;
}

.ml-price-chip--sm {
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
}

.ml-price-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ml-price-section {
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
}

.ml-price-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    background: var(--ml-tint);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.ml-price-section__title a {
    color: var(--ml-text);
    text-decoration: none;
}

.ml-price-section__title a:hover {
    color: var(--ml-c2);
}

.ml-price-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--ml-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.ml-price-table {
    width: 100%;
    border-collapse: collapse;
}

.ml-price-table th {
    padding: 10px 20px;
    border-bottom: 1px solid var(--ml-border);
    color: var(--ml-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.ml-price-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ml-border);
    vertical-align: middle;
}

.ml-price-table tbody tr:last-child td {
    border-bottom: 0;
}

.ml-price-table tbody tr {
    transition: background 200ms ease;
}

.ml-price-table tbody tr:hover {
    background: rgba(50, 90, 251, .03);
}

.ml-price-table th:nth-child(3),
.ml-price-table__price {
    text-align: right;
    white-space: nowrap;
}

.ml-price-table__stock {
    width: 140px;
}

.ml-price-table__action {
    width: 150px;
    text-align: right;
}

.ml-price-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ml-text);
    text-decoration: none;
}

.ml-price-item:hover,
.ml-price-item:focus {
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-price-item__img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 10px;
    background: #F6F6F6;
}

.ml-price-item__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-price-noimg {
    display: block;
    width: 100%;
    height: 100%;
}

.ml-price-item__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ml-price-item__name {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.ml-price-item__sku {
    color: var(--ml-muted);
    font-size: 13px;
    line-height: 16px;
}

.ml-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
}

.ml-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ml-stock--in {
    color: #1E8E5A;
}

.ml-stock--order {
    color: #B7791F;
}

.ml-stock--out {
    color: var(--ml-muted);
}

.ml-price-value {
    display: block;
    color: var(--ml-text);
    font-size: 17px;
    font-weight: 600;
}

.ml-price-old {
    display: block;
    color: var(--ml-muted);
    font-size: 13px;
}

.ml-price-unit {
    display: block;
    color: var(--ml-muted);
    font-size: 12px;
}

.ml-price-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    background: var(--ml-grad);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 250ms ease, transform 250ms ease;
}

.ml-price-btn:hover,
.ml-price-btn:focus {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(31, 5, 180, .25);
    opacity: 1;
}

.ml-price-btn:active {
    transform: scale(.97);
}

.ml-price-btn--ghost {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    color: var(--ml-c1);
}

.ml-price-btn--ghost:hover,
.ml-price-btn--ghost:focus {
    background: var(--ml-grad) padding-box, var(--ml-grad) border-box;
    color: #fff;
}

.ml-price-btn.ml-busy {
    opacity: .6;
    pointer-events: none;
}

.ml-price-btn.is-added {
    background: #E8F6EF;
    color: #1E8E5A;
    box-shadow: none;
}

.ml-price-login {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ml-c2);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .ml-price-head__title {
        font-size: 28px;
        line-height: 36px;
    }

    .ml-price-table thead {
        display: none;
    }

    .ml-price-table,
    .ml-price-table tbody,
    .ml-price-table tr,
    .ml-price-table td {
        display: block;
        width: 100%;
    }

    .ml-price-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--ml-border);
    }

    .ml-price-table tbody tr:last-child {
        border-bottom: 0;
    }

    .ml-price-table td {
        padding: 0;
        border: 0;
        text-align: left;
    }

    .ml-price-table__item {
        grid-column: 1 / -1;
    }

    .ml-price-table__price {
        text-align: left;
    }

    .ml-price-table__action {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: center;
        width: auto;
    }
}

/* print: only the list */
@media print {
    header, footer, .header, .footer, .sidebar, .top-banner, .breadcrumb,
    .ml-price-head__actions, .ml-price-chips, .ml-price-table__action, .ml-price-table th:last-child,
    .cookie-message, #cookie-message {
        display: none !important;
    }

    .ml-price-section {
        break-inside: avoid-page;
        border-color: #ccc;
    }

    .ml-price-section__title {
        background: none;
    }

    .ml-price-head__cat {
        -webkit-text-fill-color: currentColor;
        background: none;
    }
}

/* ======================================================================
 * Iteration 30: slider arrows ring, price links hidden, filled labels,
 * card paddings (photo edge to edge), fixed header plate.
 * ====================================================================== */

/* ---------- Slider arrows: crisp ring, no movement on hover ----------
 * The 1.5px masked ring (iteration 29) rendered uneven. Now two discs: gradient (::before) and white 2px smaller (::after);
 * on hover the white disc fades out - the button fills with the gradient. No transform / shadow change on hover or click.
 */
#carousel-example-generic .carousel-control.ml-slider-arrow,
#carousel-example-generic .carousel-control.ml-slider-arrow:hover,
#carousel-example-generic .carousel-control.ml-slider-arrow:focus,
#carousel-example-generic .carousel-control.ml-slider-arrow:active {
    background-color: transparent;
    box-shadow: 0 4px 14px rgba(31, 5, 180, .14);
    transform: none;
    opacity: 1;
    transition: color 250ms ease;
}

#carousel-example-generic .carousel-control.ml-slider-arrow::before {
    inset: 0;
    z-index: -1;
    padding: 0;
    background: var(--ml-grad);
    -webkit-mask: none;
    mask: none;
}

#carousel-example-generic .carousel-control.ml-slider-arrow::after {
    inset: 2px;
    z-index: -1;
    background: #fff;
    opacity: 1;
}

#carousel-example-generic .carousel-control.ml-slider-arrow:hover::after,
#carousel-example-generic .carousel-control.ml-slider-arrow:focus-visible::after {
    opacity: 0;
}

/* ---------- "Price list" capsule in catalog heads: hidden (markup kept in product_catalog_content.tpl /
 * catalog_info_forma.tpl - remove this rule to show it again). The price list page itself stays at /price/.
 */
.ml-price-link {
    display: none !important;
}

/* ---------- Labels: background in the border colour, text colour chosen for contrast (WCAG >= 4.5) ----------
 * sale #D92D3A / white 4.8, new #17855A / white 4.6, hit #FFC53D / black 10.4, promo #6D4AFF / white 5.2, gift #C22A78 / white 5.4
 */
.sale-icon-content .label,
.sale-icon-content span.sale-icon,
.sale-icon-content span.newtip-icon,
.sale-icon-content span.hit-icon,
.sale-icon-content span.promo-icon,
.sale-icon-content span.gift-icon {
    border: 0;
    background: var(--ml-label, #6B6B6B) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 2px 6px rgba(20, 20, 40, .14);
    color: var(--ml-label-text, #fff);
}

.sale-icon-content span.sale-icon {
    --ml-label: #D92D3A;
}

.sale-icon-content span.newtip-icon {
    --ml-label: #17855A;
}

.sale-icon-content span.hit-icon {
    --ml-label: #FFC53D;
    --ml-label-text: #1F1F24;
}

.sale-icon-content span.promo-icon {
    --ml-label: #6D4AFF;
}

.sale-icon-content span.gift-icon {
    --ml-label: #C22A78;
}

/* ---------- Product card paddings (grid cards; list view .pc-list keeps its layout) ----------
 * Before: .thumbnail padding 10px + .caption 10px = photo and text 20px from the border.
 * Now: photo edge to edge at the top (square, rounded top corners), text and hover panel 14px from the border.
 */
.pc-card:not(.pc-list) > .thumbnail {
    padding: 0;
}

.pc-card:not(.pc-list) .thumbnail .caption.caption-main-part {
    padding: 0 14px 12px;
}

.pc-card:not(.pc-list) .product-image {
    display: block;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0 -14px 12px;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    background: #F6F6F6;
    line-height: 0;
}

.pc-card:not(.pc-list) .product-image > img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
}

.pc-card:not(.pc-list) .product-image .sale-icon-content {
    top: 10px;
    left: 10px;
    line-height: normal;
}

@media (hover: hover) {
    .pc-card:not(.pc-list) .pc-hover {
        padding: 0 14px;
    }

    .pc-card:not(.pc-list):hover .pc-hover,
    .pc-card:not(.pc-list).pc-open .pc-hover {
        padding: 2px 14px 14px;
    }
}

/* ---------- Header plate always fixed at the top, with the top banner (custom.js: body.ml-header-fixed) ----------
 * header.container holds the plate (.header__inner) and the search row, so position: sticky would only work inside it.
 * js measures the plate in its place (left / width; it is wider than the container) and fixes it there;
 * the placeholder .ml-header-ph keeps its height in the flow.
 */
.ml-header-ph {
    display: none;
}

body.ml-header-fixed .ml-header-ph {
    display: block;
}

body.ml-header-fixed header .header__inner {
    position: fixed;
    top: 0;
    z-index: 1030;
    box-sizing: border-box;
    margin: 0;
    background: #fff;
}

/* anchors and focused fields are not hidden under the fixed plate */
html {
    scroll-padding-top: calc(var(--ml-header-h, 120px) + 16px);
}

/* ======================================================================
 * Iteration 31: product of the day, list view cards.
 * ====================================================================== */

/* ---------- Product of the day (modules/productday/templates/product_day.tpl, .ml-pday) ----------
 * As a product card: square photo edge to edge with a "Product of the day" badge, name, 2 lines of description,
 * price with the old one, countdown tiles (custom.js; FlipClock is not used any more), gradient button.
 */
.sidebar .panel.ml-pday {
    padding: 0;
}

.ml-pday__img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F6F6F6;
}

.ml-pday__img img,
.sidebar .product-day .ml-pday__img img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    transition: transform 400ms ease;
}

.ml-pday__img:hover img {
    transform: scale(1.04);
}

.ml-pday__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px 0 10px;
    border-radius: 14px;
    background: var(--ml-grad);
    box-shadow: 0 4px 12px rgba(31, 5, 180, .25);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.ml-pday__body {
    padding: 14px 16px 16px;
}

.ml-pday__name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ml-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}

.ml-pday__name:hover,
.ml-pday__name:focus {
    color: var(--ml-c2);
    text-decoration: none;
}

.ml-pday__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    color: var(--ml-muted);
    font-size: 13px;
    line-height: 19px;
}

.ml-pday__desc p {
    display: inline;
    margin: 0;
}

.ml-pday__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 12px;
}

.ml-pday__now {
    color: var(--ml-text);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.ml-pday__old {
    color: var(--ml-muted);
    font-size: 14px;
}

/* no old price: the module leaves only the currency span */
.ml-pday__old:has(.rubznak:empty) {
    display: none;
}

.ml-pday-timer {
    margin-top: 14px;
    padding: 10px 12px 12px;
    border-radius: 12px;
    background: var(--ml-tint);
}

.ml-pday-timer[hidden] {
    display: none;
}

.ml-pday-timer__title {
    margin-bottom: 8px;
    color: var(--ml-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    text-align: center;
}

.ml-pday-timer__cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ml-pday-timer__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 5px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 5, 180, .08);
}

.ml-pday-timer__cell b {
    background: var(--ml-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ml-c1);
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    font-variant-numeric: tabular-nums;
}

.ml-pday-timer__cell small {
    color: var(--ml-muted);
    font-size: 11px;
    line-height: 13px;
}

.ml-pday__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    margin-top: 14px;
    border-radius: 21px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.ml-pday__btn:hover,
.ml-pday__btn:focus {
    color: #fff;
    text-decoration: none;
}

/* ---------- List view cards (product/main_product_forma_1.tpl, .pc-list), desktop ----------
 * The photo sat in a grid "row 1 / span 8" - its box grew below the picture (empty space under the photo,
 * the "in cart" badge ended up under the picture), the card height did not follow the content.
 * Now: photo column 240px edge to edge (left, top, bottom) and as tall as the card (min. square),
 * text in the middle, purchase panel on the right; the card is as tall as its tallest part.
 */
@media (hover: hover) {
    .pc-card.pc-list > .thumbnail {
        padding: 0;
        gap: 0;
    }

    .pc-card.pc-list .thumbnail .caption.caption-main-part {
        position: relative;
        display: block;
        flex: 1 1 0;
        min-width: 0;
        min-height: 240px;
        padding: 18px 20px 18px 260px;
    }

    /* the text column may shrink (flex min-width: auto pushed the purchase panel 12px out of the card) */
    .pc-card.pc-list > .thumbnail {
        box-sizing: border-box;
        min-width: 0;
        overflow: visible;
    }

    .pc-card.pc-list .pc-hover {
        box-sizing: border-box;
        border-radius: 0 15px 15px 0;
    }

    .pc-card.pc-list .caption-main-part > .product-image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 240px;
        min-height: 0;
        height: auto;
        aspect-ratio: auto;
        margin: 0;
        overflow: hidden;
        border-radius: 15px 0 0 15px;
        background: #F6F6F6;
        line-height: 0;
    }

    .pc-card.pc-list .caption-main-part > .product-image > img {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        object-fit: cover;
    }

    .pc-card.pc-list .product-image .sale-icon-content {
        top: 10px;
        left: 10px;
        line-height: normal;
    }

    .pc-card.pc-list .caption-main-part > .pc-qty-discount {
        display: inline-block;
    }

    .pc-card.pc-list .pc-hover,
    .pc-card.pc-list:hover .pc-hover,
    .pc-card.pc-list.pc-open .pc-hover {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: stretch;
        padding: 18px 18px 18px 20px;
    }
}

/* ======================================================================
 * Iteration 32: banner close animation, product-of-the-day old price, article links,
 * form error icons, sitemap, contact form, special pages toolbar, list cards panel, search suggestions.
 * ====================================================================== */

/* ---------- Top banner close: banner collapses, the placeholder under the fixed header shrinks with it (custom.js) ---------- */
.ml-header-ph {
    transition: height 300ms ease;
}

.top-banner.is-closing {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 300ms ease, opacity 200ms ease;
}

/* ---------- Product of the day: old price - one straight line through the number and the rouble sign ----------
 * <s> drew the line of the ALSRubl font lower under the rouble sign (looked like an underline).
 */
.ml-pday__old {
    position: relative;
    text-decoration: none;
}

.ml-pday__old::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: 1px;
    background: currentColor;
}

/* ---------- Article in cards is a link to the product (product/main_product_forma_*.tpl) ---------- */
a.product-article,
a.product-article:visited {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}

a.product-article:hover,
a.product-article:focus {
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

/* ---------- Form error / success icon (Bootstrap .form-control-feedback, 34px) centred on our 44px fields ---------- */
#userModal .has-feedback .form-control-feedback,
.ml-auth-form .has-feedback .form-control-feedback {
    top: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
}

/* ---------- Contact form (forma/page_forma_list.tpl) = registration form card ---------- */
.main .ml-auth-form textarea.form-control {
    height: auto;
    min-height: 130px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.ml-contact-form .btn-primary {
    width: 100%;
}

/* ---------- Special pages toolbar (/newtip/, /spec/, /newprice/: product/product_page_spec_list.tpl #filter-selection-well)
 * The same light block as the catalog toolbar #filter-well (was the blue ".well" footer style).
 */
#filter-selection-well {
    padding: 12px 16px;
    margin: 20px 0;
    background: #fff;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    box-shadow: none;
    color: var(--ml-text);
    font-size: 15px;
    font-weight: 500;
}

#filter-selection-well .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#filter-selection-well .row:before,
#filter-selection-well .row:after {
    display: none;
}

#filter-selection-well .btn-group {
    margin-left: 8px;
    vertical-align: middle;
}

#filter-selection-well .btn-group + .btn-group {
    margin-left: 6px;
}

#filter-selection-well .btn-group > .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 38px;
    border: 1px solid var(--ml-border);
    background: #fff;
    box-shadow: none;
    color: var(--ml-text);
    text-shadow: none;
}

#filter-selection-well .btn-group > .btn:first-child {
    border-radius: 10px 0 0 10px;
}

#filter-selection-well .btn-group > .btn:last-child {
    border-radius: 0 10px 10px 0;
}

#filter-selection-well .btn-group > .btn:hover {
    background: #F9F9F9;
    color: var(--ml-c2);
}

#filter-selection-well .btn-group > .btn.active {
    border-color: transparent;
    background: var(--ml-grad);
    color: #fff;
}

/* ---------- List cards: purchase panel aligned to the top (like the title on the left) ----------
 * Centred, a product without variants / tiers had a lot of empty space above and below "Sum + To cart".
 */
@media (hover: hover) {
    .pc-card.pc-list .pc-hover,
    .pc-card.pc-list:hover .pc-hover,
    .pc-card.pc-list.pc-open .pc-hover {
        justify-content: flex-start;
    }
}

/* ---------- Search suggestions: 8px lower, the arrow no longer covers the blue border of the field ---------- */
.search-input-wrapper > .popover {
    margin-top: 16px;
}

/* ---------- Sitemap (map/map_page_list.tpl, php/hook/phpshopmap.hook.php) ---------- */
.ml-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ml-border);
}

.ml-map-head__title {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    color: var(--ml-text);
}

.ml-map-head__meta {
    color: var(--ml-muted);
    font-size: 15px;
}

.ml-map-head__meta b {
    color: var(--ml-text);
    font-weight: 600;
}

.ml-map-subtitle {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 500;
    color: var(--ml-text);
}

.ml-map-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 36px;
}

.ml-map-cat {
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
}

.ml-map-cat__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ml-tint);
    color: var(--ml-text);
    text-decoration: none;
}

.ml-map-cat__head:hover,
.ml-map-cat__head:focus {
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-map-cat__img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.ml-map-cat__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-map-cat__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ml-map-cat__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    transition: color 200ms ease;
}

.ml-map-cat__count {
    color: var(--ml-muted);
    font-size: 13px;
}

/* tree: level 2 - links with count, level 3+ - indented with a guide line */
.ml-map-tree {
    margin: 0;
    padding: 8px 8px 10px;
    list-style: none;
}

.ml-map-tree .ml-map-tree {
    margin: 0 0 4px 18px;
    padding: 0 0 0 10px;
    border-left: 2px solid rgba(50, 90, 251, .15);
}

.ml-map-tree a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--ml-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
}

.ml-map-tree .ml-map-tree a {
    font-size: 14px;
    font-weight: 400;
}

.ml-map-tree a:hover,
.ml-map-tree a:focus {
    background: var(--ml-tint);
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-map-count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #F2F3F7;
    color: var(--ml-muted);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.ml-map-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    align-items: start;
}

.ml-map-box {
    padding: 16px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
}

.ml-map-box__title {
    margin-bottom: 8px;
    color: var(--ml-text);
    font-size: 17px;
    font-weight: 600;
}

.ml-map-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ml-map-links a {
    display: block;
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--ml-text);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
}

.ml-map-links a:hover,
.ml-map-links a:focus {
    background: var(--ml-tint);
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

@media (max-width: 767px) {
    .ml-map-head__title {
        font-size: 28px;
        line-height: 36px;
    }
}

/* special pages: no ?gridChange - the core marks neither button; the grid (default view) is shown as current */
#filter-selection-well .col-md-6:first-child .btn-group:not(:has(> .btn.active)) > .btn:last-child {
    border-color: transparent;
    background: var(--ml-grad);
    color: #fff;
}

/* ======================================================================
 * Iteration 33: compact header on scroll, card hover colours, consent row, list panel at the bottom.
 * ====================================================================== */

/* ---------- Compact header (custom.js: body.ml-header-compact, desktop >= 992px) ----------
 * Smaller paddings, logo, banner and menu; round contact / social icons hidden; favourites and cart - icons with badges;
 * the search row (.lower__group: search field + "Sign in") sits inside the plate between the menu and the icons.
 */
.ml-header-ph.is-instant {
    transition: none !important;
}

header .main__group {
    transition: padding 300ms ease, gap 300ms ease;
}

header .header__logo img {
    transition: max-width 300ms ease, margin 300ms ease;
}

header .top-banner {
    transition: min-height 300ms ease;
}

header .top-banner .sticker-text {
    transition: padding 300ms ease, font-size 300ms ease;
}

@media (min-width: 992px) {
    body.ml-header-compact header .main__group {
        gap: 18px;
        padding: 7px 0;
    }

    body.ml-header-compact header .header__logo img {
        max-width: 140px;
        margin-left: 0;
    }

    body.ml-header-compact header .top-banner {
        min-height: 28px;
    }

    body.ml-header-compact header .top-banner .sticker-text {
        padding: 4px 0;
        font-size: 13px;
        line-height: 20px;
    }

    body.ml-header-compact header .top-banner .sticker-text a {
        font-size: 13px;
    }

    body.ml-header-compact header .top-banner .sticker-close {
        width: 22px;
        height: 22px;
        margin-top: -11px;
    }

    body.ml-header-compact header .header__nav {
        margin-left: 18px;
    }

    body.ml-header-compact header .nav__list {
        gap: 14px;
    }

    body.ml-header-compact header .nav__link {
        font-size: 16px;
    }

    body.ml-header-compact header .header__right {
        gap: 18px;
    }

    body.ml-header-compact header .header__contacts,
    body.ml-header-compact header .header__socials,
    body.ml-header-compact header .header__fav .header__label,
    body.ml-header-compact header .header__cart .header__label {
        display: none;
    }

    /* search row inside the plate */
    body.ml-header-compact header .main__group > .lower__group {
        flex: 1 1 auto;
        min-width: 0;
        gap: 12px;
        margin: 0;
    }

    body.ml-header-compact header .main__group > .header__left {
        flex: 0 0 auto;
    }

    body.ml-header-compact header .main__group > .header__right {
        flex: 0 0 auto;
    }

    body.ml-header-compact header .main__group .search-input-wrapper input,
    body.ml-header-compact header .main__group .search-input-wrapper .search-submit {
        height: 38px;
        font-size: 16px;
    }

    body.ml-header-compact header .main__group .search-input-wrapper input {
        padding-left: 42px;
    }

    body.ml-header-compact header .main__group .search-input-wrapper .search-icon {
        left: 15px;
        width: 18px;
        height: 18px;
    }

    body.ml-header-compact header .main__group .search-input-wrapper .search-submit {
        padding: 0 16px;
    }

    body.ml-header-compact header .main__group .header-login {
        height: 42px;
        padding: 0 16px 0 14px;
        font-size: 16px;
    }

    /* the suggestions list: not wider than the field */
    body.ml-header-compact header .main__group .search-input-wrapper > .popover {
        width: 100%;
        min-width: 360px;
    }
}

/* narrow desktops: the menu does not fit next to the search in the compact header */
@media (min-width: 992px) and (max-width: 1199px) {
    body.ml-header-compact header .header__nav {
        display: none;
    }
}

@keyframes ml-header-search-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    header .main__group,
    header .header__logo img,
    header .top-banner,
    header .top-banner .sticker-text {
        transition: none;
    }

    header .lower__group,
    header .lower__group.is-showing {
        transition: none;
        animation: none;
    }
}

/* ---------- Product cards: photo, article and name are one link area ----------
 * Before: the article turned bright blue (--ml-c2) and the name dark blue (custom.css #13069E), each only under the mouse.
 * Now hovering the photo, the article or the name colours both the article and the name in the site link colour.
 */
.pc-card .caption-main-part .product-article,
.pc-card .caption-main-part h5 a {
    transition: color 200ms ease;
}

.pc-card .caption-main-part:has(.product-image:hover, .product-article:hover, h5 a:hover) .product-article,
.pc-card .caption-main-part:has(.product-image:hover, .product-article:hover, h5 a:hover) h5 a,
.pc-card .caption-main-part:has(.product-image:focus-visible, .product-article:focus-visible, h5 a:focus-visible) .product-article,
.pc-card .caption-main-part:has(.product-image:focus-visible, .product-article:focus-visible, h5 a:focus-visible) h5 a {
    color: var(--ml-c2);
}

/* ---------- Consent row (registration, password, contact form: .ml-auth-form__rule) ----------
 * Was a flex row: "I agree" and the link were two flex items - a wide gap when the link wrapped.
 * Now plain text with the checkbox on the left; the link in the site link colour (as text links: underline on hover).
 */
.ml-auth-form__rule {
    position: relative;
    display: block;
    padding-left: 28px;
}

.ml-auth-form__rule input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
}

.ml-auth-form__rule a,
.ml-auth-form__rule a:visited {
    color: var(--ml-c1);
    text-decoration: underline;
    text-decoration-color: rgba(31, 5, 180, .3);
    text-underline-offset: 3px;
    transition: color 200ms ease, text-decoration-color 200ms ease;
}

.ml-auth-form__rule a:hover,
.ml-auth-form__rule a:focus {
    color: var(--ml-c2);
    text-decoration-color: var(--ml-c2);
}

/* ---------- List cards: purchase panel at the bottom of the card ---------- */
@media (hover: hover) {
    .pc-card.pc-list .pc-hover,
    .pc-card.pc-list:hover .pc-hover,
    .pc-card.pc-list.pc-open .pc-hover {
        justify-content: flex-end;
    }
}

@media (min-width: 992px) {
    /* Bootstrap .navbar-nav > li > a has 15px top / bottom padding - the cart made the compact plate 56px high */
    body.ml-header-compact header #cart > li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ======================================================================
 * Iteration 34: header measured without transitions, cookie message show / hide animation.
 * ====================================================================== */

/* custom.js measures the full plate with this class: no transitions, otherwise a mid-animation height is taken */
body.ml-header-measuring header,
body.ml-header-measuring header *,
body.ml-header-measuring .ml-header-ph {
    transition: none !important;
    animation: none !important;
}

/* ---------- Cookie message: slides up on show, slides down and fades out on "Ok" (custom.js .is-leaving) ----------
 * phpshop.js used jQuery slideToggle - it animated the height of the flex block in steps (text jumped, corners cut).
 */
.cookie-message:not(.hide) {
    animation: ml-cookie-in 450ms cubic-bezier(.2, .8, .2, 1) both;
}

.cookie-message.is-leaving {
    animation: ml-cookie-out 380ms cubic-bezier(.4, 0, .6, 1) both;
    pointer-events: none;
}

@keyframes ml-cookie-in {
    from { opacity: 0; transform: translate(-50%, 24px) scale(.98); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes ml-cookie-out {
    from { opacity: 1; transform: translate(-50%, 0) scale(1); }
    to { opacity: 0; transform: translate(-50%, 32px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-message:not(.hide),
    .cookie-message.is-leaving {
        animation-duration: 1ms;
    }
}

/* ======================================================================
 * Iteration 35: search row fade on header mode change, banner collapse in the compact header, icon spacing.
 * ====================================================================== */

/* Search row (search + "Sign in") on header mode change (custom.js): fades out where it is, moves, fades in */
header .lower__group {
    transition: opacity 150ms ease, transform 150ms ease;
}

header .lower__group.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
}

header .lower__group.is-showing {
    animation: ml-header-row-in 300ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ml-header-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Banner close in the compact header: "min-height: 28px" of the compact mode kept the banner until it was removed
 * (it vanished at once after 320ms - the plate jumped up). Now it collapses smoothly in both modes. */
header .top-banner.is-closing,
body.ml-header-compact header .top-banner.is-closing {
    min-height: 0 !important;
    overflow: hidden;
    opacity: 0;
    transition: height 300ms ease, opacity 200ms ease !important;
}

/* Compact header: favourites and cart close together (Bootstrap .navbar-nav > li > a 15px side padding,
 * ul margin-right -15px - 33px between the icons) */
@media (min-width: 992px) {
    body.ml-header-compact header #cart {
        margin-right: 0;
    }

    body.ml-header-compact header #cart > li > a {
        padding-left: 0;
        padding-right: 0;
    }

    body.ml-header-compact header .header__right {
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    header .lower__group,
    header .lower__group.is-showing {
        transition: none;
        animation: none;
    }
}

/* ---------- Iteration 37: faster header transformation (fast scrolling up caught the header mid-animation) ----------
 * plate 300 -> 180ms, search row fade out 150 -> 90ms (custom.js timer 90ms), fade in 300 -> 200ms. */
header .main__group {
    transition: padding 180ms ease, gap 180ms ease;
}

header .header__logo img {
    transition: max-width 180ms ease, margin 180ms ease;
}

header .top-banner {
    transition: min-height 180ms ease;
}

header .top-banner .sticker-text {
    transition: padding 180ms ease, font-size 180ms ease;
}

header .lower__group {
    transition: opacity 90ms ease, transform 90ms ease;
}

header .lower__group.is-showing {
    animation-duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
    header .main__group,
    header .header__logo img,
    header .top-banner,
    header .top-banner .sticker-text,
    header .lower__group {
        transition: none;
    }

    header .lower__group.is-showing {
        animation: none;
    }
}

/* ---------- Iteration 38: cart popover 8px under the cart link, right edge in line with it ----------
 * Bootstrap put the popover 5px ABOVE the link bottom (style.css margins): in the full header it fell on the empty
 * part of the link, in the compact header (link 34px high) it covered the cart icon. Popover is a child of #cart
 * (data-container), so its place is set from #cart, inline top / left of Bootstrap are overridden.
 * ::before covers the gap for the mouse (custom.js keeps the popover open while the mouse is inside #cart). */
#cart {
    position: relative;
}

#cart > .popover.bottom {
    top: calc(100% + 8px) !important;
    right: 15px; /* full header: link padding 15px, #cart margin-right -15px (Bootstrap .navbar-right) */
    left: auto !important;
    margin-top: 0;
}

body.ml-header-compact #cart > .popover.bottom {
    top: calc(100% + 12px) !important; /* same line as the user menu (under the 43px name button) */
    right: 0; /* compact header: the link is just the icon */
}

#cart > .popover.bottom > .arrow {
    display: none;
}

#cart > .popover.bottom::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    height: 10px;
}

/* ==================== Iteration 38: personal account (/users/*) ====================
 * users/users_page_list.tpl: .ml-cabinet; for a logged-in user php/hook/phpshopcore.hook.php adds the side menu
 * (.ml-cabinet__nav) and the class .ml-cabinet--nav (two columns). Pages: personal data (users/users_page_info.tpl),
 * orders and order details, notices, dialogs, wishlist (php/hook/phpshopusers.hook.php).
 * Cards as everywhere on the site: white, 1px light border, radius 16. */

.ml-cabinet--nav {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.ml-cabinet__main > .page-header {
    margin-top: 0;
}

/* side menu */
.ml-cabinet__nav {
    position: sticky;
    top: 110px; /* under the fixed compact header */
    padding: 12px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    font-family: 'Mulish', Arial, sans-serif;
}

.ml-cabinet__user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    padding: 8px 8px 16px;
    border-bottom: 1px solid var(--ml-border);
}

.ml-cabinet__avatar {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ml-grad);
    color: #fff;
}

.ml-cabinet__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ml-cabinet__name,
.ml-cabinet__mail {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ml-cabinet__name {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ml-text);
}

.ml-cabinet__mail {
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-cabinet__menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ml-cabinet__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 20px;
    color: var(--ml-text);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.ml-cabinet__link svg {
    flex: 0 0 20px;
    color: var(--ml-muted);
    transition: color 150ms ease;
}

.ml-cabinet__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ml-cabinet__link:hover,
.ml-cabinet__link:focus {
    background: #F9F9F9;
    color: var(--ml-c1);
    text-decoration: none;
}

.ml-cabinet__link:hover svg,
.ml-cabinet__link:focus svg {
    color: var(--ml-c2);
}

.ml-cabinet__link.is-current {
    background: var(--ml-tint);
    color: var(--ml-c1);
    font-weight: 600;
}

.ml-cabinet__link.is-current svg {
    color: var(--ml-c2);
}

.ml-cabinet__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #F0F0F0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-cabinet__link.is-current .ml-cabinet__count {
    background: var(--ml-grad);
    color: #fff;
}

.ml-cabinet__link--logout {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ml-border);
    border-radius: 0 0 10px 10px;
}

.ml-cabinet__link--logout:hover,
.ml-cabinet__link--logout:focus,
.ml-cabinet__link--logout:hover svg,
.ml-cabinet__link--logout:focus svg {
    color: #D93036;
}

/* cards, buttons, fields */
.ml-card {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
}

.ml-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.ml-card__title {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ml-text);
}

.ml-card__head .ml-card__title {
    margin: 0;
}

.ml-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.ml-card__empty {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--ml-muted);
}

.ml-cab-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 24px;
}

.ml-cab-grid > .ml-card {
    margin: 0;
}

.ml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 22px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--ml-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-size 250ms ease, border-color 200ms ease, color 200ms ease;
}

.ml-btn:hover,
.ml-btn:focus {
    text-decoration: none;
}

.ml-btn:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

.ml-btn--primary {
    border: none;
    background: var(--ml-grad);
    background-size: 100%;
    color: #fff;
}

.ml-btn--primary:hover,
.ml-btn--primary:focus {
    background-size: 300%;
    color: #fff;
}

.ml-btn--ghost {
    border-color: var(--ml-border);
}

.ml-btn--ghost:hover,
.ml-btn--ghost:focus {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
}

.ml-btn--sm {
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
}

.ml-btn--block {
    width: 100%;
}

.ml-link {
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--ml-c1);
    cursor: pointer;
}

.ml-link:hover,
.ml-link:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ml-icon-btn {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ml-muted);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.ml-icon-btn:hover,
.ml-icon-btn:focus {
    background: #F9F9F9;
    color: var(--ml-c2);
}

.ml-icon-btn--danger:hover,
.ml-icon-btn--danger:focus {
    background: #FFF5F5;
    color: #D93036;
}

.ml-field {
    margin: 0 0 16px;
}

.ml-field__label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ml-text);
}

.ml-field__req {
    color: var(--ml-c2);
}

.main .ml-card .form-control {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
}

.main .ml-card .form-control[readonly] {
    background: #F9F9F9;
    color: var(--ml-muted);
}

.ml-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 16px;
}

.ml-field--full { grid-column: span 6; }
.ml-field--half { grid-column: span 3; }
.ml-field--third { grid-column: span 2; }

.ml-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--ml-text);
    cursor: pointer;
}

.ml-check input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--ml-c1);
}

/* messages after saving / form errors */
.ml-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    line-height: 20px;
}

.ml-alert svg {
    flex: 0 0 20px;
}

.ml-alert--success {
    border-color: #CBEFD6;
    background: #F0FBF3;
    color: #1E7B3A;
}

.ml-alert--error {
    border-color: #F7D4D4;
    background: #FFF5F5;
    color: #C0262D;
}

/* tiles: status, discount, bonuses, orders */
.ml-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin: 0 0 24px;
}

.ml-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    color: var(--ml-text);
    text-decoration: none;
}

.ml-stat__label {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-stat__value {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.ml-stat--link {
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ml-stat--link:hover,
.ml-stat--link:focus {
    border-color: var(--ml-c2);
    color: var(--ml-text);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(50, 90, 251, .1);
}

/* addresses */
.ml-adres {
    padding: 16px 0;
    border-top: 1px solid var(--ml-border);
}

.ml-adres:first-child {
    padding-top: 0;
    border-top: none;
}

.ml-adres__row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ml-adres__icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ml-tint);
    color: var(--ml-c2);
}

.ml-adres__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ml-adres__line {
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-text);
}

.ml-adres__who {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-adres__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.ml-adres__actions form {
    margin: 0;
}

.ml-adres__actions .ml-link {
    margin-right: 8px;
}

.ml-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--ml-tint);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: var(--ml-c1);
    vertical-align: 1px;
}

.ml-adres-form {
    margin-top: 16px;
    padding: 20px;
    border-radius: 12px;
    background: #F9F9F9;
}

.ml-adres-form[hidden] {
    display: none;
}

.main .ml-adres-form .form-control {
    background: #fff;
}

/* orders list */
.ml-orders {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ml-order {
    display: block;
    padding: 20px 24px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    color: var(--ml-text);
    text-decoration: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ml-order:hover,
.ml-order:focus {
    border-color: var(--ml-c2);
    color: var(--ml-text);
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(50, 90, 251, .1);
}

.ml-order__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0 0 16px;
}

.ml-order__num {
    font-size: 17px;
    font-weight: 600;
}

.ml-order__date {
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-order__head .ml-status {
    margin-left: auto;
}

.ml-order__body {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ml-order__thumbs {
    display: flex;
    gap: 8px;
}

.ml-order__thumb,
.ml-oitem__pic {
    display: inline-flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 10px;
    background: #F9F9F9;
    color: #C4C4C4;
}

.ml-order__thumb img,
.ml-oitem__pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.ml-order__thumb--more {
    font-size: 14px;
    font-weight: 600;
    color: var(--ml-muted);
}

.ml-order__meta {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-order__sum {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.ml-order__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    color: var(--ml-c1);
    white-space: nowrap;
}

/* status pill: --st = status colour from admin (Orders -> statuses), text darkened for contrast */
.ml-status {
    --st: #325AFB;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--st) 12%, #fff);
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--st) 60%, #000);
    white-space: nowrap;
}

.ml-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st);
}

.ml-status--lg {
    height: 34px;
    padding: 0 16px;
    border-radius: 17px;
    font-size: 15px;
}

/* order details */
.ml-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--ml-c1);
}

.ml-back:hover,
.ml-back:focus {
    color: var(--ml-c2);
    text-decoration: none;
}

.ml-order-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.ml-order-detail__note {
    display: flex;
    flex: 1 1 100%;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ml-tint);
    font-size: 14px;
    line-height: 20px;
}

.ml-order-detail__note svg {
    flex: 0 0 18px;
    margin-top: 1px;
    color: var(--ml-c2);
}

.ml-order-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.ml-order-detail__grid > .ml-card {
    margin: 0;
}

.ml-oitem {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ml-border);
}

.ml-oitem:first-child {
    padding-top: 0;
}

.ml-oitem__pic {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
}

.ml-oitem__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ml-oitem__name {
    font-size: 15px;
    line-height: 20px;
    color: var(--ml-text);
}

.ml-oitem__name:hover,
.ml-oitem__name:focus {
    color: var(--ml-c1);
}

.ml-oitem__price {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-oitem__sum {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.ml-totals {
    margin-top: 16px;
}

.ml-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-size: 15px;
    color: var(--ml-muted);
}

.ml-totals__row span:last-child {
    color: var(--ml-text);
    white-space: nowrap;
}

.ml-totals__row--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ml-border);
    font-size: 20px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-dl {
    margin: 0 0 8px;
}

.ml-dl__row {
    padding: 10px 0;
    border-bottom: 1px solid var(--ml-border);
}

.ml-dl__row:first-child {
    padding-top: 0;
}

.ml-dl dt {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ml-muted);
}

.ml-dl dd {
    margin: 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--ml-text);
}

.ml-dl dd img {
    max-height: 28px !important;
}

.ml-dl__muted {
    color: var(--ml-muted);
}

.ml-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 8px;
}

.ml-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ml-c1);
}

.ml-order-detail__info .ml-btn--block {
    margin-top: 16px;
}

/* notices list (core tables), dialogs (core form) inside the account */
.ml-cabinet__main .table {
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.ml-cabinet__main .table > tbody > tr > td,
.ml-cabinet__main .table > tbody > tr > th {
    border-color: var(--ml-border);
}

.ml-cabinet__main #message-edit textarea {
    min-height: 120px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
}

.ml-cabinet__main #message-edit .send-message {
    height: 44px;
    padding: 0 24px;
    border-radius: 22px;
    font-size: 15px;
}

.ml-cabinet__main #message-edit .btn-default {
    height: 44px;
    margin-right: 8px;
    border-radius: 22px;
}

@media (max-width: 1199px) {
    .ml-cab-grid,
    .ml-order-detail__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ml-cabinet--nav {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 24px;
    }
}

/* tablets / phones: the menu becomes a row of scrollable pills above the page */
@media (max-width: 991px) {
    .ml-cabinet--nav {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .ml-cabinet__nav {
        position: static;
        padding: 0;
        border: none;
        background: none;
    }

    .ml-cabinet__user,
    .ml-cabinet__link--logout {
        display: none;
    }

    .ml-cabinet__menu {
        flex-direction: row;
        gap: 8px;
        margin: 0 -15px;
        padding: 0 15px 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ml-cabinet__menu::-webkit-scrollbar {
        display: none;
    }

    .ml-cabinet__link {
        flex: 0 0 auto;
        padding: 8px 14px;
        border: 1px solid var(--ml-border);
        border-radius: 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    .ml-cabinet__link.is-current {
        border-color: transparent;
    }
}

@media (max-width: 767px) {
    .ml-card {
        padding: 18px 16px;
    }

    .ml-field--half,
    .ml-field--third {
        grid-column: span 3;
    }

    .ml-adres__row {
        flex-wrap: wrap;
    }

    .ml-adres__actions {
        width: 100%;
        padding-left: 54px;
    }

    .ml-order {
        padding: 16px;
    }

    .ml-order__head .ml-status {
        margin-left: 0;
    }

    .ml-order__body {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ml-order__meta {
        flex-basis: 100%;
        order: 3;
    }

    .ml-order__sum {
        margin-left: auto;
    }

    .ml-order__more {
        display: none;
    }
}

/* hidden username field for password managers (users/users_page_info.tpl): style.css gives inputs display:block */
.ml-card input[hidden] {
    display: none !important;
}

/* ==================== Iteration 39: product page (product/main_product_forma_full.tpl, Figma Desktop-14) ====================
 * Full width (no sidebar, main/shop.tpl). Top: title + meta, card "gallery + subtypes + key characteristics" and the
 * buy card (price, VAT, quantity tiers, cart, one click / compare / wishlist, delivery term), "answers" card.
 * Buy block = .pc-card.pc-page: product-card.js works in it (offers, tiers, counter), the hover panel / bottom sheet
 * of grid cards are not used here (no .pc-hover). Then tabs and "bought together" block with category chips. */

.ml-layout-product .main > div > .breadcrumb {
    margin-bottom: 8px;
}

.ml-pp__head {
    margin: 0 0 24px;
}

.ml-pp__title {
    margin: 0 0 12px;
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    color: var(--ml-text);
}

.ml-pp__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-pp__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ml-muted);
}

.ml-pp__rating b {
    font-weight: 600;
    color: var(--ml-text);
}

.ml-pp__rating:hover,
.ml-pp__rating:focus {
    color: var(--ml-c1);
    text-decoration: none;
}

.ml-pp__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ml-pp__stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ml-pp__stock.is-in { color: #1E8E3E; }
.ml-pp__stock.is-order { color: #B26A00; }
.ml-pp__stock.is-out { color: #C0262D; }

/* stars: grey row + gradient row cut by width */
.ml-stars {
    position: relative;
    display: inline-flex;
    line-height: 0;
    vertical-align: middle;
}

.ml-stars__bg,
.ml-stars__fg {
    display: inline-flex;
    gap: 2px;
}

.ml-stars__bg svg {
    fill: #E3E3E3;
}

.ml-stars__fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.ml-stars__fg svg {
    flex: 0 0 auto;
    fill: #FFB400;
}

/* top: main card + side column */
.ml-pp__top-wrap {
    display: block;
}

.pc-card.ml-pp__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
    width: 100%;
    margin: 0 0 48px;
    float: none;
}

.ml-pp__main {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    gap: 32px;
    margin: 0;
    padding: 24px;
}

/* gallery */
.ml-pp__gallery {
    position: relative;
    min-width: 0;
}

.ml-pp__gallery > .sale-icon-content {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    pointer-events: none;
}

.ml-gallery__main {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #F9F9F9;
}

.ml-gallery__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 0s linear 250ms;
    cursor: zoom-in;
}

.ml-gallery__slide.is-current {
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms ease, visibility 0s;
}

.ml-gallery__slide img,
.ml-gallery__slide video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ml-gallery__slide video {
    cursor: auto;
}

.ml-gallery__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C4C4C4;
}

.ml-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 1px solid var(--ml-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--ml-text);
    opacity: 0;
    transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ml-gallery__nav--prev { left: 12px; }
.ml-gallery__nav--next { right: 12px; }

.ml-gallery__main:hover .ml-gallery__nav,
.ml-gallery__nav:focus-visible {
    opacity: 1;
}

.ml-gallery__nav:hover {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
}

.ml-gallery__counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    font-size: 12px;
    color: var(--ml-muted);
}

.ml-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ml-gallery__thumb {
    display: inline-flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ml-muted);
    cursor: pointer;
    transition: border-color 200ms ease;
}

.ml-gallery__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ml-gallery__thumb:hover {
    border-color: rgba(50, 90, 251, .5);
}

.ml-gallery__thumb.is-current {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    border-width: 2px;
}

/* fullscreen view (custom.js) */
.ml-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 19, .92);
    opacity: 0;
    transition: opacity 200ms ease;
}

.ml-lightbox.is-open {
    opacity: 1;
}

.ml-lightbox__img {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.ml-lightbox__btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.ml-lightbox__btn:hover,
.ml-lightbox__btn:focus-visible {
    background: rgba(255, 255, 255, .25);
    outline: none;
}

.ml-lightbox__close { top: 20px; right: 20px; }
.ml-lightbox__prev { left: 24px; top: 50%; margin-top: -24px; }
.ml-lightbox__next { right: 24px; top: 50%; margin-top: -24px; }

.ml-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

/* info column: subtypes, short description, key characteristics */
.ml-pp__info {
    min-width: 0;
}

.ml-pp__info .pc-variants {
    margin: 0 0 20px;
}

.ml-pp__info .pc-variant-group + .pc-variant-group {
    margin-top: 14px;
}

.ml-pp__info .pc-block-title {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-pp__info .pc-variant-current {
    font-weight: 600;
    color: var(--ml-text);
}

.pc-card.pc-page .pc-variant-opt {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 15px;
}

.pc-card.pc-page .pc-variant-color {
    width: 16px;
    height: 16px;
}

/* subtypes of the core are shown only when the card logic could not (all subtypes out of stock) */
.pc-has-variants .ml-pp__core-parents {
    display: none;
}

.ml-pp__short {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 23px;
    color: var(--ml-text);
}

.ml-pp__short:empty {
    display: none;
}

.ml-pp__subtitle {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--ml-text);
}

.ml-specs {
    margin: 0;
}

.ml-specs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ml-border);
}

.ml-specs__name {
    font-size: 14px;
    font-weight: 400;
    color: var(--ml-muted);
}

.ml-specs__value {
    margin: 0;
    font-size: 14px;
    color: var(--ml-text);
}

.ml-specs__value a {
    color: var(--ml-c1);
}

.ml-pp__specs-more {
    margin-top: 16px;
}

.ml-pp__specs-more[hidden] {
    display: none;
}

/* buy card */
.ml-pp__side {
    position: sticky;
    top: 110px; /* under the fixed compact header */
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ml-pp__side .ml-card {
    margin: 0;
}

.ml-pp__buy {
    padding: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.ml-pp__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.pc-card.pc-page .product-price {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    color: var(--ml-text);
}

.pc-card.pc-page .product-price .rubznak {
    font-size: 28px;
}

.pc-card.pc-page .pc-price-qty {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 400;
    color: var(--ml-muted);
}

.ml-pp__price .price-old {
    font-size: 16px;
    color: var(--ml-muted);
}

.ml-pp__vat {
    margin: 4px 0 16px;
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-pp__tiers .pc-qty-discount {
    margin: 0 0 10px;
}

.pc-card.pc-page .package-options {
    gap: 6px;
}

.pc-card.pc-page .package-option {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
}

.pc-card.pc-page .pc-min-note,
.pc-card.pc-page .pc-summary {
    margin: 0 0 12px;
    font-size: 14px;
}

.ml-pp__cart .cart-control {
    margin: 0;
}

.ml-pp__cart .addToCartList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    border-radius: 26px;
    font-size: 17px;
}

.pc-card.pc-page .cart-counter {
    display: flex;
    align-items: center;
    height: 52px;
    border-radius: 26px;
}

.pc-card.pc-page .cart-counter .counter-btn {
    width: 52px;
    height: 52px;
    font-size: 22px;
}

.pc-card.pc-page .cart-counter .counter-input {
    flex: 1 1 auto;
    height: 52px;
    font-size: 18px;
}

.ml-pp__goto-cart {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    color: var(--ml-muted);
}

.ml-pp__goto-cart[hidden] {
    display: none;
}

.ml-pp__goto-cart b {
    font-weight: 500;
    color: var(--ml-c1);
}

.ml-pp__out .outStock {
    margin: 0 0 12px;
    font-size: 15px;
    color: #C0262D;
}

.ml-pp__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.ml-pp__oneclick {
    grid-column: 1 / -1;
}

/* one click (module oneclick): link with the modal next to it */
.ml-pp__oneclick > a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border: 1px solid var(--ml-border);
    border-radius: 22px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: var(--ml-text);
    box-shadow: none;
    transition: border-color 200ms ease, color 200ms ease;
}

.ml-pp__oneclick > a.btn:hover,
.ml-pp__oneclick > a.btn:focus {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
}

.ml-pp__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ml-border);
    border-radius: 22px;
    background: #fff;
    font-size: 14px;
    color: var(--ml-text);
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease;
}

.ml-pp__action svg {
    flex: 0 0 20px;
    color: var(--ml-muted);
    transition: color 200ms ease, fill 200ms ease;
}

.ml-pp__action:hover,
.ml-pp__action:focus-visible {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
    outline: none;
}

.ml-pp__action:hover svg {
    color: var(--ml-c2);
}

.ml-pp__action.addToWishList.in-wishlist svg {
    fill: url(#ml-grad);
    stroke: url(#ml-grad);
}

.ml-pp__bonus {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--ml-tint);
    font-size: 14px;
    color: var(--ml-text);
}

.ml-pp__bonus svg {
    color: var(--ml-c2);
}

/* delivery term */
.ml-deliv {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ml-border);
}

.ml-deliv__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-deliv__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.ml-deliv__icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ml-tint);
    color: var(--ml-c2);
}

.ml-deliv__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ml-deliv__name {
    font-size: 14px;
    color: var(--ml-text);
}

.ml-deliv__when {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-deliv__when.is-ok {
    font-weight: 500;
    color: #1E8E3E;
}

.ml-deliv__price {
    font-size: 13px;
    color: var(--ml-muted);
    text-align: right;
}

.ml-deliv__more {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ml-c1);
}

/* answers card (Figma mobile "answers to questions") */
.ml-pp__help {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px;
}

.ml-pp__help-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-pp__help-link {
    font-size: 14px;
    color: var(--ml-c1);
}

.ml-pp__help-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--ml-text);
}

.ml-pp__help-contact svg {
    color: var(--ml-c2);
}

.ml-pp__help-contact:hover,
.ml-pp__help-link:hover {
    color: var(--ml-c2);
    text-decoration: none;
}

/* tabs (Figma: centered tabs with gradient underline) */
.ml-pp__tabs {
    margin: 0 0 48px;
    scroll-margin-top: 110px;
}

.ml-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--ml-border);
}

.ml-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 0 16px;
    border: none;
    background: none;
    font-size: 18px;
    color: var(--ml-muted);
    cursor: pointer;
    transition: color 200ms ease;
}

.ml-tabs__tab[hidden] {
    display: none;
}

.ml-tabs__tab::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -1px;
    left: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--ml-grad);
    transform: scaleX(0);
    transition: transform 250ms ease;
}

.ml-tabs__tab:hover {
    color: var(--ml-text);
}

.ml-tabs__tab.is-current {
    color: var(--ml-text);
}

.ml-tabs__tab.is-current::after {
    transform: none;
}

.ml-tabs__tab:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: -2px;
    border-radius: 8px;
}

.ml-tabs__count {
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-tabs__count:empty {
    display: none;
}

.ml-tabs__print {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 15px;
    color: var(--ml-muted);
}

.ml-tabs__print:hover,
.ml-tabs__print:focus {
    color: var(--ml-c2);
    text-decoration: none;
}

.ml-tabs__pane {
    margin: 0;
    padding: 28px 32px;
}

.ml-tabs__pane[hidden] {
    display: none;
}

.ml-pp__desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--ml-text);
}

.ml-pp__desc > :first-child {
    margin-top: 0;
}

.ml-pp__desc h3 {
    margin: 24px 0 10px;
    font-size: 20px;
    font-weight: 600;
}

.ml-pp__specs-full {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 32px;
    align-items: start;
}

.ml-pp__specs-full .ml-specs__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    padding: 12px 0;
}

.ml-pp__specs-full .ml-specs__name,
.ml-pp__specs-full .ml-specs__value {
    font-size: 15px;
}

/* brand block of the core (brand_uid_description.tpl): white card with logo */
.ml-pp__brand .well {
    float: none !important;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--ml-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    text-align: center;
}

.ml-pp__brand img {
    max-width: 100%;
    max-height: 80px;
}

.ml-pp__brand:empty {
    display: none;
}

/* reviews */
.ml-prevs__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin: 0 0 24px;
}

.ml-prevs__big {
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    color: var(--ml-text);
}

.ml-prevs__count {
    margin-top: 6px;
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-prevs__write {
    margin-left: auto;
}

.ml-prevs__write[hidden] {
    display: none;
}

.ml-prev-form {
    margin: 0 0 24px;
    padding: 20px;
    border-radius: 12px;
    background: #F9F9F9;
}

.ml-prev-form[hidden] {
    display: none;
}

.ml-prev-form__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
}

.main .ml-prev-form textarea.form-control {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
}

.ml-prev-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.ml-prev-form__note {
    font-size: 13px;
    color: var(--ml-muted);
}

/* star input: radios in reverse order, hover / checked fill the stars to the left */
.ml-star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.ml-star-input input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ml-star-input label {
    width: 30px;
    height: 30px;
    margin: 0;
    background: #E3E3E3;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}

.ml-star-input input:checked ~ label,
.ml-star-input label:hover,
.ml-star-input label:hover ~ label {
    background: #FFB400;
}

.ml-star-input label:hover {
    transform: scale(1.1);
}

.ml-star-input input:focus-visible + label {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

/* review item (comment/main_comment_forma.tpl) */
.ml-prev {
    padding: 18px 0;
    border-top: 1px solid var(--ml-border);
}

.ml-prev__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
}

.ml-prev__avatar {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ml-tint);
    color: var(--ml-c2);
}

.ml-prev__who {
    display: flex;
    flex-direction: column;
}

.ml-prev__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-prev__date {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-prev__head .ml-stars {
    margin-left: auto;
}

.ml-prev__text {
    font-size: 15px;
    line-height: 23px;
    color: var(--ml-text);
}

.ml-prevs__list:empty::before {
    content: "\41e \442 \437 \44b \432 \43e \432  \43f \43e \43a \430  \43d \435 \442 . \421 \442 \430 \43d \44c \442 \435  \43f \435 \440 \432 \44b \43c , \43a \442 \43e  \440 \430 \441 \441 \43a \430 \436 \435 \442  \43e  \442 \43e \432 \430 \440 \435 .";
    display: block;
    padding: 18px 0 0;
    border-top: 1px solid var(--ml-border);
    font-size: 15px;
    color: var(--ml-muted);
}

/* files */
.ml-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ml-file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ml-border);
    border-radius: 12px;
    color: var(--ml-text);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ml-file-card:hover,
.ml-file-card:focus {
    border-color: var(--ml-c2);
    color: var(--ml-text);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(50, 90, 251, .1);
}

.ml-file-card__icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ml-tint);
    color: var(--ml-c2);
}

.ml-file-card__ext {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 3px;
    border-radius: 3px;
    background: var(--ml-c1);
    font-size: 8px;
    font-weight: 700;
    line-height: 12px;
    color: #fff;
}

.ml-file-card__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ml-file-card__name {
    overflow: hidden;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ml-file-card__meta {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-file-card__dl {
    color: var(--ml-muted);
}

.ml-file-card:hover .ml-file-card__dl {
    color: var(--ml-c2);
}

/* "bought together" block: chips (Figma: pills with gradient border) */
.ml-related {
    margin: 0 0 24px;
}

.ml-related .page-header {
    margin: 0 0 16px;
}

.ml-related .page-header h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 400;
}

.ml-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.ml-chips[hidden] {
    display: none;
}

.ml-chip {
    height: 38px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 19px;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    font-size: 15px;
    color: var(--ml-text);
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
}

.ml-chip:hover {
    color: var(--ml-c1);
}

.ml-chip.is-current {
    background: var(--ml-grad) border-box;
    color: #fff;
}

.ml-related .pc-card.is-filtered-out {
    display: none;
}

@media (max-width: 1299px) {
    .pc-card.ml-pp__top {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .ml-pp__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ml-gallery__main {
        max-height: 520px;
    }
}

@media (max-width: 991px) {
    .pc-card.ml-pp__top {
        grid-template-columns: minmax(0, 1fr);
    }

    .ml-pp__side {
        position: static;
    }

    .ml-pp__title {
        font-size: 28px;
        line-height: 34px;
    }

    .ml-pp__specs-full {
        grid-template-columns: minmax(0, 1fr);
    }

    .ml-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ml-tabs::-webkit-scrollbar {
        display: none;
    }

    .ml-tabs__tab {
        flex: 0 0 auto;
        font-size: 16px;
    }

    .ml-tabs__print {
        flex: 0 0 auto;
        padding: 0 12px;
    }
}

@media (max-width: 767px) {
    .ml-pp__title {
        font-size: 22px;
        line-height: 28px;
    }

    .ml-pp__main,
    .ml-pp__buy {
        padding: 16px;
    }

    .ml-tabs__pane {
        padding: 18px 16px;
    }

    .ml-specs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .ml-lightbox__img {
        max-width: 100vw;
        max-height: calc(100vh - 140px);
        border-radius: 0;
    }

    .ml-lightbox__prev,
    .ml-lightbox__next {
        top: auto;
        bottom: 16px;
        margin-top: 0;
    }
}

/* product page: "answers" card under the main card (left column), the buy column spans both rows */
.pc-card.ml-pp__top {
    grid-template-areas: "main side" "help side";
    grid-template-rows: auto 1fr;
    row-gap: 16px;
}

.ml-pp__main { grid-area: main; }
.ml-pp__side { grid-area: side; }

.ml-pp__help {
    grid-area: help;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: start;
    gap: 10px 28px;
    margin: 0;
}

.ml-pp__help-title {
    flex: 0 0 100%;
}

.ml-related__grid {
    margin-top: 0;
}

@media (max-width: 991px) {
    .pc-card.ml-pp__top {
        grid-template-areas: "main" "side" "help";
        grid-template-rows: auto;
    }
}

/* product page: file names wrap (2 lines) instead of being cut */
.ml-files-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ml-file-card__name {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px;
}

/* product reviews: list without extra paragraph spacing */
.ml-prev-list > p:empty {
    display: none;
}

/* "Buy in one click" modal (module oneclick): same look as the login modal (#userModal) */
.oneclick-modal .modal-dialog {
    width: 420px;
    max-width: calc(100% - 20px);
}

.oneclick-modal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    font-family: 'Mulish', Arial, sans-serif;
}

.oneclick-modal .modal-header {
    position: relative;
    padding: 24px 24px 8px;
    border-bottom: none;
}

.oneclick-modal .modal-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: var(--ml-text);
}

.oneclick-modal .modal-header .close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: #F6F6F6;
    color: var(--ml-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
}

.oneclick-modal .modal-header .close:hover {
    background: var(--ml-tint);
    color: var(--ml-c2);
}

.oneclick-modal .modal-body {
    padding: 12px 24px 4px;
}

.oneclick-modal .form-control {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ml-border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 15px;
}

.oneclick-modal .form-control:focus {
    border-color: var(--ml-c2);
    box-shadow: 0 0 0 3px rgba(50, 90, 251, .12);
}

.oneclick-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 24px 24px;
    border-top: none;
}

.oneclick-modal .modal-footer::before,
.oneclick-modal .modal-footer::after {
    display: none;
}

.oneclick-modal .modal-footer .btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 500;
}

.oneclick-modal .modal-footer .btn-primary {
    border: none;
    background: var(--ml-grad);
    background-size: 100%;
    color: #fff;
    transition: background-size 250ms;
}

.oneclick-modal .modal-footer .btn-primary:hover {
    background-size: 300%;
}

.oneclick-modal .modal-footer .btn-default {
    border: 1px solid var(--ml-border);
    background: #fff;
    color: var(--ml-text);
}

/* ==================== Iteration 39: cart and checkout (/order/, order/*.tpl, Figma Desktop-7) ====================
 * One form: left - steps (delivery cards, recipient, payment cards, comment), right - sticky summary with items,
 * totals, consent and the button. Delivery / payment radios of the core are styled as cards (markup comes from the
 * core and is re-rendered by ajax: java/jqfunc.js UpdateDeliveryJq), price / date captions - custom.js. */

.ml-checkout-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
}

.ml-checkout-page__title {
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    color: var(--ml-text);
}

.ml-checkout-page__clean {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-checkout-page__clean:hover,
.ml-checkout-page__clean:focus {
    color: #D93036;
    text-decoration: none;
}

/* empty cart: the clean link is not needed */
.ml-checkout-page:not(:has(.ml-co-item)) .ml-checkout-page__clean {
    display: none;
}

.ml-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 24px;
    align-items: start;
}

.ml-checkout__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ml-checkout__main > .ml-card {
    margin: 0;
}

.ml-co-step {
    padding: 24px 28px;
}

.ml-co-step__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--ml-text);
}

.ml-co-step__num {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ml-grad);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

/* delivery and payment: core radios as cards */
.ml-co-delivery #seldelivery,
.ml-co-payment > .radio,
.ml-co-delivery > .radio {
    margin: 0;
}

.ml-co-delivery #seldelivery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.ml-co-delivery .delivOneEl,
.ml-co-payment .paymOneEl {
    display: block;
    margin: 0;
}

.ml-co-payment .paymOneEl > div {
    float: none !important;
}

.ml-co-payment {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.ml-co-payment > .radio {
    display: contents;
}

.ml-co-delivery .delivOneEl label,
.ml-co-payment .paymOneEl label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 14px 48px 14px 16px;
    border: 1px solid var(--ml-border);
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ml-text);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.ml-co-delivery .delivOneEl label:hover,
.ml-co-payment .paymOneEl label:hover {
    border-color: rgba(50, 90, 251, .5);
}

.ml-co-delivery .delivOneEl:has(input:checked) label,
.ml-co-payment .paymOneEl:has(input:checked) label {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    box-shadow: 0 6px 20px rgba(50, 90, 251, .12);
}

.ml-co-delivery .delivOneEl:has(input:disabled) label,
.ml-co-payment .paymOneEl:has(input:disabled) label {
    opacity: .5;
    cursor: not-allowed;
}

/* radio: square check box at the right (Figma), filled with the gradient when chosen */
.ml-co-delivery .delivOneEl input[type="radio"],
.ml-co-payment .paymOneEl input[type="radio"] {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 22px;
    height: 22px;
    margin: -11px 0 0;
    border: 1.5px solid #C8C8C8;
    border-radius: 6px;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}

.ml-co-delivery .delivOneEl input[type="radio"]:checked,
.ml-co-payment .paymOneEl input[type="radio"]:checked {
    border-color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat, var(--ml-grad);
}

.ml-co-delivery .delivOneEl input[type="radio"]:focus-visible,
.ml-co-payment .paymOneEl input[type="radio"]:focus-visible {
    outline: 2px solid var(--ml-c2);
    outline-offset: 2px;
}

.ml-co-delivery .deliveryName {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ml-co-delivery .deliveryName img,
.ml-co-payment .paymOneEl img {
    flex: 0 0 auto;
    width: auto;
    max-width: 44px;
    height: 36px;
    margin: 0;
    object-fit: contain;
}

/* captions added by custom.js from #ml-delivery-info */
.ml-co-deliv__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ml-co-deliv__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ml-c1);
}

.ml-co-deliv__when {
    font-size: 13px;
    font-weight: 400;
    color: var(--ml-muted);
}

/* address fields (ajax, <p><input placeholder></p>) and saved address select */
.ml-co-address {
    margin-top: 16px;
}

.ml-co-address:not(:has(input, select, .ml-co-login)) {
    display: none;
}

#userAdresData {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

#userAdresData:empty {
    display: none;
}

#userAdresData > p {
    grid-column: span 2;
    margin: 0;
}

#userAdresData > p:has([name="city_new"]),
#userAdresData > p:has([name="street_new"]) {
    grid-column: span 3;
}

#userAdresData > p:has([name="delivtime_new"]) {
    grid-column: span 6;
}

.main .ml-checkout .form-control {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
}

.main .ml-checkout textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
}

.main .ml-checkout .form-control[readonly] {
    background: #F9F9F9;
    color: var(--ml-muted);
}

.main .ml-checkout .form-control.reqActiv {
    border-color: #E5484D;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}

.ml-co-address > b {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
}

.ml-co-address .bootstrap-select,
.ml-co-address select.form-control {
    width: 100% !important;
    margin-bottom: 8px;
}

.ml-co-address .bootstrap-select > .btn {
    height: 44px;
    border-radius: 10px;
}

.ml-co-address input[name="adres_this_default"] {
    margin: 0 6px 12px 0;
    accent-color: var(--ml-c1);
}

.ml-co-login {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #F9F9F9;
    font-size: 14px;
    color: var(--ml-text);
}

.ml-co-login svg {
    flex: 0 0 20px;
    color: var(--ml-c2);
}

/* notice (Figma: "works with legal entities") */
.ml-co-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--ml-tint);
    font-size: 15px;
    line-height: 22px;
    color: var(--ml-text);
}

.ml-co-notice svg {
    flex: 0 0 22px;
    color: var(--ml-c2);
}

/* recipient fields */
.ml-co-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.ml-co-error:empty {
    display: none;
}

.ml-co-error {
    margin: 0 0 12px;
    color: #C0262D;
}

/* company requisites file */
.ml-co-attach {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 0;
    padding: 14px 16px;
    border: 1.5px dashed #C8CFF8;
    border-radius: 14px;
    background: #FBFCFF;
    font-weight: 400;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.ml-co-attach:hover,
.ml-co-attach:focus-within {
    border-color: var(--ml-c2);
    background: var(--ml-tint);
}

.ml-co-attach input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ml-co-attach__icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--ml-c2);
}

.ml-co-attach__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ml-co-attach__title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ml-c1);
}

.ml-co-attach__hint {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-co-attach.has-file .ml-co-attach__title {
    color: var(--ml-text);
}

.ml-co-attach__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ml-muted);
}

.ml-co-attach__clear:hover {
    background: #FFF5F5;
    color: #D93036;
}

.ml-co-attach__clear[hidden] {
    display: none;
}

/* summary */
.ml-checkout__side {
    position: sticky;
    top: 110px;
    min-width: 0;
}

.ml-co-summary {
    margin: 0;
    padding: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.ml-co-summary--alone {
    max-width: 640px;
    margin: 0 0 24px;
}

.ml-co-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.ml-co-summary__title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--ml-text);
}

.ml-co-summary__num {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-co-items {
    max-height: 420px;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
    scrollbar-width: thin;
}

.ml-co-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 14px 32px 14px 0;
    border-bottom: 1px solid var(--ml-border);
    transition: opacity 200ms ease;
}

.ml-co-item.is-busy {
    opacity: .5;
    pointer-events: none;
}

.ml-co-item__pic {
    display: inline-flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--ml-border);
    border-radius: 10px;
    background: #fff;
}

.ml-co-item__pic img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ml-co-item__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ml-co-item__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 19px;
    color: var(--ml-text);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ml-co-item__name:hover {
    color: var(--ml-c1);
}

.ml-co-item__unit {
    font-size: 12px;
    color: var(--ml-muted);
}

.ml-co-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.ml-co-qty {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border: 1px solid var(--ml-border);
    border-radius: 17px;
    background: #fff;
}

.ml-co-qty__btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--ml-text);
    cursor: pointer;
}

.ml-co-qty__btn:hover {
    color: var(--ml-c2);
}

.ml-co-qty__input {
    width: 44px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--ml-text);
}

.ml-co-qty__input:focus {
    outline: none;
}

.ml-co-item__sum {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ml-text);
}

.ml-co-item__old {
    font-size: 12px;
    font-weight: 400;
    color: var(--ml-muted);
}

.ml-co-item__old:empty {
    display: none;
}

.ml-co-item__del {
    position: absolute;
    top: 10px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ml-muted);
    cursor: pointer;
}

.ml-co-item__del:hover,
.ml-co-item__del:focus-visible {
    background: #FFF5F5;
    color: #D93036;
}

.ml-co-totals {
    margin: 12px 0 16px;
}

.ml-co-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 15px;
    color: var(--ml-muted);
}

.ml-co-totals__row > span:last-child {
    color: var(--ml-text);
    white-space: nowrap;
    text-align: right;
}

.ml-co-totals__row--discount:has([data-discount="0"]),
.ml-co-totals__row--discount:has([data-discount="0.00"]) {
    display: none;
}

.ml-co-totals__minus {
    color: #1E8E3E !important;
}

.ml-co-totals__row--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ml-border);
    font-size: 22px;
    font-weight: 600;
    color: var(--ml-text);
}

#deliveryInfo:empty {
    display: none;
}

.ml-co-rule {
    margin: 0 0 16px;
}

.ml-co-submit {
    height: 52px;
    border-radius: 26px;
    font-size: 17px;
}

.ml-co-summary__note {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    color: var(--ml-muted);
}

/* messages: empty cart, order accepted (order/order_forma_mesage*.tpl) */
.ml-order-msg {
    padding: 56px 24px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    text-align: center;
}

.ml-order-msg h4,
.ml-order-msg .text-danger {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: var(--ml-text) !important;
}

.ml-order-msg .text-muted {
    font-size: 15px;
    color: var(--ml-muted) !important;
}

.ml-order-msg .phpshop-empty-cart::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    background: var(--ml-grad);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ml-order-msg__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

@media (max-width: 1199px) {
    .ml-checkout {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (max-width: 991px) {
    .ml-checkout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ml-checkout__side {
        position: static;
    }

    .ml-checkout-page__title {
        font-size: 28px;
        line-height: 34px;
    }
}

@media (max-width: 767px) {
    .ml-co-step,
    .ml-co-summary {
        padding: 18px 16px;
    }

    .ml-co-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    #userAdresData > p,
    #userAdresData > p:has([name="city_new"]),
    #userAdresData > p:has([name="street_new"]) {
        grid-column: span 3;
    }
}

/* checkout: saved address select of the core (bootstrap-select floats) - fields start on a new line;
 * delivery / payment cards a bit wider (two in a row in the left column) */
.ml-co-address #userAdresData {
    clear: both;
    padding-top: 4px;
}

.ml-co-address .bootstrap-select {
    float: none !important;
    padding: 0;
    margin-bottom: 10px;
}

.ml-co-address .bootstrap-select > .dropdown-toggle {
    padding-left: 14px;
    border-color: var(--ml-border);
    background: #fff;
    box-shadow: none;
}

.ml-co-delivery #seldelivery,
.ml-co-payment {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* bootstrap-select copies class form-control to its wrapper: the wrapper must not get field paddings / border */
.main .ml-checkout .bootstrap-select.form-control {
    height: auto;
    padding: 0;
    border: none;
    box-shadow: none;
}

.main .ml-checkout .bootstrap-select > .dropdown-toggle {
    height: 44px;
    border-radius: 10px;
}

/* product page: warranty tab (Figma "Garantiya") */
.ml-pp__warranty {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    font-size: 16px;
    line-height: 25px;
    color: var(--ml-text);
}

.ml-pp__warranty-icon {
    display: inline-flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ml-tint);
    color: var(--ml-c2);
}

.ml-pp__warranty-term {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
}

.ml-pp__warranty p {
    margin: 0 0 8px;
}

/* product page, phones: key characteristics are hidden (all of them are in the tab) - price and cart come right
 * after the photo and subtypes */
@media (max-width: 767px) {
    .ml-pp__info .ml-pp__specs {
        display: none;
    }

    .ml-pp__main {
        gap: 16px;
    }
}

/* ==================== Iteration 40: adaptive layout (all widths), mobile by Figma (Medline mobile screens) ====================
 * Breakpoints: >= 1300 desktop; 992-1299 desktop narrow (earlier rules); 768-991 tablet; < 768 phone (Figma mobile, 375).
 * < 992: bottom tab bar (.ml-tabbar: Glavnaya / Katalog / Korzina / Izbrannoe / Kabinet) and catalog panel (#ml-mcat);
 *        favourites / cart / "Log in" leave the header (they are in the bar).
 * < 768: header like Figma mobile - centered logo, tagline + phone, round icons, search; not fixed (custom.js). */

/* mobile-only parts are hidden on desktop */
.ml-mhead,
.ml-tabbar,
.bar-padding-fix {
    display: none;
}

.ml-mcat[hidden] {
    display: none;
}

/* ---------- bottom tab bar ---------- */
@media (max-width: 991px) {
    .bar-padding-fix {
        display: block;
        height: calc(64px + env(safe-area-inset-bottom));
    }

    .ml-tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 950;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 0 4px env(safe-area-inset-bottom);
        border-top: 1px solid var(--ml-border);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
        font-family: 'Mulish', Arial, sans-serif;
    }

    .ml-tabbar__item {
        position: relative;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 6px 2px 4px;
        border: none;
        background: none;
        font-size: 11px;
        line-height: 14px;
        color: var(--ml-text);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .ml-tabbar__item:hover,
    .ml-tabbar__item:focus {
        color: var(--ml-c1);
        text-decoration: none;
    }

    .ml-tabbar__item:focus-visible {
        outline: 2px solid var(--ml-c2);
        outline-offset: -4px;
        border-radius: 12px;
    }

    .ml-tabbar__item svg {
        color: var(--ml-muted);
        transition: color 150ms ease;
    }

    .ml-tabbar__item.is-current,
    .ml-tabbar__item[aria-expanded="true"] {
        color: var(--ml-c2);
    }

    .ml-tabbar__item.is-current svg,
    .ml-tabbar__item[aria-expanded="true"] svg {
        color: var(--ml-c2);
    }

    .ml-tabbar__label {
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ml-tabbar__icon {
        position: relative;
        display: inline-flex;
    }

    .ml-tabbar__badge {
        position: absolute;
        top: -5px;
        left: 14px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid #fff;
        border-radius: 9px;
        background: var(--ml-grad);
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        color: #fff;
        text-align: center;
    }

    .ml-tabbar__badge:empty,
    .ml-tabbar__badge.is-empty {
        display: none;
    }

    /* chat button and cookie message above the bar */
    .fabs {
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }

    .cookie-message {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    #toTop {
        display: none !important;
    }

    /* header: favourites, cart, "Log in" / user menu are in the bar */
    header .header__fav,
    header #cart,
    header .user_entrance {
        display: none !important;
    }

    header .lower__group {
        gap: 0;
    }

    header .header__search {
        flex: 1 1 auto;
    }
}

/* ---------- catalog panel (#ml-mcat), < 992 ---------- */
.ml-mcat {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.ml-mcat__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 19, .45);
    opacity: 0;
    transition: opacity 250ms ease;
}

.ml-mcat__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 16px calc(80px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .15);
    transform: translateX(-100%);
    transition: transform 280ms ease;
    font-family: 'Mulish', Arial, sans-serif;
}

.ml-mcat.is-open .ml-mcat__backdrop {
    opacity: 1;
}

.ml-mcat.is-open .ml-mcat__panel {
    transform: none;
}

.ml-mcat__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -16px 8px;
    padding: 16px;
    border-bottom: 1px solid var(--ml-border);
    background: #fff;
}

.ml-mcat__title {
    font-size: 22px;
    font-weight: 500;
    color: var(--ml-text);
}

.ml-mcat__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #F6F6F6;
    color: var(--ml-text);
}

.ml-mcat__close:hover {
    background: var(--ml-tint);
    color: var(--ml-c2);
}

/* the catalog menu keeps its look (Catalog menu section), only borders of the panel */
.ml-mcat .ml-mcat__menu {
    display: block !important;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    box-shadow: none;
}

.ml-mcat__links {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--ml-border);
    list-style: none;
}

.ml-mcat__links li {
    display: block;
}

.ml-mcat__links .nav__link {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    color: var(--ml-text);
}

.ml-mcat__links .nav__link:hover {
    color: var(--ml-c1);
}

html.ml-mcat-lock,
html.ml-mcat-lock body {
    overflow: hidden;
}

/* ---------- tablet header (768-991): plate = logo, menu, round icons; search row below ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    .header__inner {
        padding-right: 24px;
        padding-left: 24px;
        margin-right: -24px;
        margin-left: -24px;
    }

    .top-banner {
        width: calc(100% + 48px);
        margin-right: -24px;
        margin-left: -24px;
    }

    .header__logo img {
        max-width: 170px;
        margin-left: 0;
    }

    .header__nav {
        margin-left: 18px;
    }

    .nav__list {
        gap: 14px;
    }

    .header__right {
        gap: 12px;
    }

    .header__contacts,
    .header__socials {
        gap: 6px;
    }

    header .lower__group {
        margin-top: 16px;
    }
}

/* ---------- phone header (Figma mobile): centered column, not fixed ---------- */
@media (max-width: 767px) {
    header.container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .header__inner {
        margin-right: -16px;
        margin-left: -16px;
        padding-right: 16px;
        padding-left: 16px;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    }

    .top-banner {
        width: calc(100% + 32px);
        margin-right: -16px;
        margin-left: -16px;
    }

    .top-banner .sticker-text {
        padding: 8px 44px 8px 16px;
        font-size: 13px;
        line-height: 18px;
    }

    .main__group {
        flex-direction: column;
        gap: 12px;
        padding: 16px 0 14px;
    }

    .header__left {
        flex-direction: column;
        gap: 6px;
    }

    .header__logo img {
        max-width: 190px;
        margin: 0;
    }

    .header__nav {
        display: none;
    }

    .ml-mhead {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-family: 'Mulish', Arial, sans-serif;
        text-align: center;
    }

    .ml-mhead__tag {
        font-size: 14px;
        color: var(--ml-c1);
    }

    .ml-mhead__tel {
        font-size: 16px;
        font-weight: 500;
        color: var(--ml-c1);
    }

    .header__right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .header__contacts,
    .header__socials {
        gap: 8px;
    }

    header .lower__group {
        margin-top: 14px;
    }

    .search-input-wrapper input {
        font-size: 16px; /* no iOS zoom on focus */
    }
}

/* ---------- iteration 40: content on tablets and phones ---------- */

/* Breadcrumbs, catalog title / description: the old theme hid them on phones (.hidden-xs in many templates),
 * Figma mobile shows them. Breadcrumbs - one line, scrolled sideways when long. */
@media (max-width: 767px) {
    .ml-breadcrumbs .breadcrumb.hidden-xs,
    .main .breadcrumb.hidden-xs,
    .main .ml-catalog-head.hidden-xs,
    .main .ml-catalog-desc.hidden-xs,
    .main .page-header.hidden-xs {
        display: block !important;
    }

    .ml-breadcrumbs .breadcrumb.hidden-xs {
        display: flex !important;
    }

    .ml-breadcrumbs .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 16px 0 8px;
        padding-bottom: 4px;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .ml-breadcrumbs .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .ml-breadcrumbs .breadcrumb > li {
        flex: 0 0 auto;
        font-size: 14px;
    }

    /* "<- parent catalog" pager of the old theme: the breadcrumbs do it now */
    .main nav > .pager {
        display: none;
    }

    /* page titles */
    .main .page-header h1,
    .main .page-header h2,
    .ml-pp__title,
    .ml-checkout-page__title,
    .ml-cabinet__main > .page-header h2 {
        font-size: 26px !important;
        line-height: 32px !important;
    }

    .main .page-header {
        margin: 8px 0 16px;
    }

    .ml-catalog-desc {
        font-size: 14px;
        line-height: 21px;
    }
}

/* ---------- home: slider and info blocks ---------- */
@media (max-width: 991px) {
    #carousel-example-generic {
        height: 340px;
    }

    .carousel-caption h3 {
        font-size: 30px;
        line-height: 36px;
    }

    .carousel-caption p {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    #carousel-example-generic {
        height: auto;
    }

    .carousel-inner > .item {
        height: auto;
        padding: 0;
    }

    .item-inner {
        flex-direction: column-reverse;
        align-items: stretch;
        height: auto;
    }

    .carousel-image-wrapper {
        justify-content: center;
        width: 100%;
        height: 190px;
        padding: 16px 16px 0;
    }

    .carousel-image-wrapper img {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .carousel-caption-wrapper {
        max-width: none;
        padding: 12px 20px 76px;
    }

    .carousel-caption {
        margin-top: 0;
    }

    .carousel-caption h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .carousel-caption p {
        font-size: 15px;
    }

    .carousel-caption .gradient-button {
        font-size: 15px;
    }

    .info-blocks-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .info-image {
        width: 30%;
    }

    .info-content {
        width: auto;
        min-width: 0;
    }

    .info-title {
        font-size: 18px;
    }

    .info-description {
        font-size: 14px;
    }
}

/* ---------- product cards: one per row on phones (Figma mobile listing / favourites / search) ---------- */
@media (max-width: 575px) {
    .pc-grid > .pc-card,
    .template-product-list > .pc-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .pc-card .product-image {
        aspect-ratio: 4 / 3;
    }

    .pc-card .thumbnail {
        padding: 10px;
        border-radius: 16px;
    }

    .pc-card .thumbnail .caption h5 {
        font-size: 16px;
        line-height: 21px;
    }

    .pc-card .product-price {
        font-size: 22px;
    }

    .pc-card .pc-sheet-btn {
        height: 44px;
        margin: 8px 6px 6px;
        border-radius: 22px;
        font-size: 16px;
    }
}

/* ---------- catalog: filter button = Figma "Poisk po parametram" ---------- */
@media (max-width: 991px) {
    .filter-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        height: 44px;
        margin: 0 0 16px;
        padding: 0 20px;
        border: 1.5px solid transparent;
        border-radius: 22px;
        background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
        font-size: 15px;
        font-weight: 500;
        color: var(--ml-c1);
        cursor: pointer;
    }

    .filter-btn::before {
        content: "";
        width: 18px;
        height: 18px;
        background: var(--ml-grad);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* ---------- footer on phones: link groups two in a row ---------- */
@media (max-width: 767px) {
    .footer .row > [class*="col-"]:not(:first-child) {
        float: left;
        width: 50%;
    }

    .footer .row > [class*="col-"]:nth-child(4) {
        clear: left;
    }

    .footer h5 {
        margin-top: 18px;
        font-size: 18px;
    }

    .footer ul li,
    .footer ul li a {
        font-size: 14px;
    }
}

/* ---------- < 992: faceted filter opens as a full-screen panel ("Filtry" button, phpshop.js fadeIn / fadeOut) ---------- */
@media (max-width: 991px) {
    .cookie-message {
        z-index: 940;
    }

    #faset-filter {
        position: fixed;
        inset: 0;
        z-index: 1045;
        margin: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border: none !important;
        border-radius: 0 !important;
        background: #fff;
    }

    #faset-filter .faset-filter-name {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 16px 56px;
        border-bottom: 1px solid var(--ml-border);
        background: #fff;
        font-size: 20px;
        font-weight: 500;
    }

    #faset-filter .faset-filter-name .close {
        position: absolute;
        top: 50%;
        left: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        border-radius: 50%;
        background: #F6F6F6;
        font-size: 14px;
        color: var(--ml-text);
        opacity: 1;
        float: none;
    }

    #faset-filter .faset-filter-block-wrapper {
        padding: 8px 16px calc(96px + env(safe-area-inset-bottom)) !important;
    }

    #faset-filter .filter-close {
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 16px;
        z-index: 3;
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 52px;
        border-radius: 26px;
        background: var(--ml-grad);
        box-shadow: 0 6px 20px rgba(50, 90, 251, .3);
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
    }

    #faset-filter #faset-filter-reset {
        display: inline-block;
        margin-top: 16px;
    }
}

@media (max-width: 991px) {
    #faset-filter .filter-close {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* < 992: the filter panel is shown only after the "Filtry" button (phpshop.js shows it on load for the desktop sidebar) */
@media (max-width: 991px) {
    #faset-filter:not([style*="display"]) {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .ml-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .ml-stat {
        padding: 12px;
    }

    .ml-stat__value {
        font-size: 17px;
    }
}

/* narrow phones (320-400): the search field may shrink (input has an intrinsic width ~ 20 characters) */
@media (max-width: 767px) {
    header .header__search,
    header .header__search form,
    .search-input-wrapper {
        min-width: 0;
        width: 100%;
    }

    .search-input-wrapper input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 400px) {
    .search-input-wrapper .search-submit {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ml-tabbar__item {
        font-size: 10px;
    }
}

/* DaData suggestions (phpshop.js binds them to every e-mail field): not for read-only fields (cabinet, checkout) */
input[readonly] + .suggestions-wrapper {
    display: none !important;
}

input[readonly].suggestions-input {
    padding-right: 14px !important;
}

/* chat button is hidden under open catalog panel / product bottom sheet */
html.ml-mcat-lock .fabs,
html.pc-sheet-lock .fabs {
    display: none !important;
}


/* =====================================================================
 * Iteration 41 (20.10.2026)
 * ===================================================================== */

/* ---------- Quantity field of cart counters (product cards, product page): thin gray frame ----------
 * custom.css .counter-input has "border: none", Bootstrap .form-control left only an inset shadow on top -
 * the field looked cut off. Frame top and bottom (left / right are the green buttons).
 */
.cart-counter .counter-input,
.cart-counter .counter-input.form-control {
    border: 1px solid #DCDFE7;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.cart-counter .counter-input:focus,
.cart-counter .counter-input.form-control:focus {
    border-color: #C3C8D6;
    box-shadow: none;
}

/* ---------- Product page: "Item in cart / Go to checkout" (main_product_forma_full.tpl .ml-pp__goto-cart) ----------
 * Two lines: static note + link text. Hover highlights the whole block (tint layer + shadow, arrow moves),
 * not one of the texts (global a:hover / a:focus rules of style.css changed the color and opacity of the text).
 */
.pc-card a.ml-pp__goto-cart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    padding: 10px 12px;
    overflow: hidden;
    color: var(--ml-muted);
    text-decoration: none;
    opacity: 1;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.pc-card a.ml-pp__goto-cart[hidden] {
    display: none;
}

.pc-card a.ml-pp__goto-cart::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(31, 5, 180, .09) 0%, rgba(50, 90, 251, .09) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.pc-card a.ml-pp__goto-cart:hover,
.pc-card a.ml-pp__goto-cart:focus,
.pc-card a.ml-pp__goto-cart:focus-visible {
    color: var(--ml-muted);
    text-decoration: none;
    opacity: 1;
    outline: none;
    box-shadow: 0 6px 18px rgba(31, 5, 180, .12);
}

.pc-card a.ml-pp__goto-cart:hover::before,
.pc-card a.ml-pp__goto-cart:focus-visible::before {
    opacity: 1;
}

/* product-card.css paints every span of .pc-sheet-goto with gradient text - only the link line keeps it */
.pc-card a.ml-pp__goto-cart .ml-pp__goto-note {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ml-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.pc-card a.ml-pp__goto-cart .ml-pp__goto-note svg {
    color: #2E9E4F;
}

.pc-card a.ml-pp__goto-cart .ml-pp__goto-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

/* the arrow is outside the gradient text (background-clip: text does not paint svg) */
.pc-card a.ml-pp__goto-cart .ml-pp__goto-link svg {
    flex: 0 0 16px;
    color: var(--ml-c2);
    transition: transform 200ms ease;
}

.pc-card a.ml-pp__goto-cart:hover .ml-pp__goto-link svg {
    transform: translateX(3px);
}

/* ---------- Product page: "Compare" / "To favourites" buttons show their state ----------
 * .in-compare (php/inc/productpage.inc.php, custom.js after adding), .in-wishlist (phpshop.js addToWishList)
 */
.ml-pp__action .ml-pp__state-on,
.ml-pp__action.in-compare .ml-pp__state-off,
.ml-pp__action.in-wishlist .ml-pp__state-off {
    display: none;
}

.ml-pp__action.in-compare .ml-pp__state-on,
.ml-pp__action.in-wishlist .ml-pp__state-on {
    display: inline;
}

.ml-pp__action.in-compare,
.ml-pp__action.in-wishlist {
    border-color: rgba(50, 90, 251, .45);
    color: var(--ml-c1);
}

.ml-pp__action.addToCompareList.in-compare svg {
    color: var(--ml-c2);
}

/* ---------- Header popups: cart window and user menu (custom.js) ----------
 * The one opened last is on top; the other one closes at once with a short fade (.ml-pop-fast / .is-fast).
 */
body.ml-pop-cart #cart .popover {
    z-index: 1062;
}

body.ml-pop-user .header-user__menu {
    z-index: 1062;
}

#cart .popover.ml-pop-fast {
    transition-duration: 90ms;
}

.header-user.is-fast .header-user__menu {
    transition: opacity 90ms ease, transform 90ms ease, visibility 0s linear 90ms;
}

/* ---------- Header: "Compare" link (main/*.tpl .header__compare, iteration 41) ----------
 * Same look as favourites / cart; shown only while the compare list is not empty
 * (.is-empty-list from the template, custom.js toggles it when #numcompare changes).
 */
.header__compare {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.header__compare.is-empty-list {
    display: none;
}

.header__compare:hover,
.header__compare:focus {
    text-decoration: none;
    opacity: 1;
}

.header__compare .header__label {
    font-size: 18px;
    font-weight: 300;
    color: rgba(64, 64, 64, 1);
    transition: color 200ms ease;
}

.header__compare:hover .header__label {
    color: rgba(19, 6, 158, 1);
}

.header__compare .header__icon img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.header__compare .header__badge {
    position: absolute;
    top: -8px;
    left: -11px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ml-grad);
    box-shadow: 0 0 0 2px #fff;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.header__compare .header__badge:not(.is-ready),
.header__compare .header__badge.is-empty {
    display: none;
}

/* narrow desktop: icon only (the label does not fit next to favourites and cart) */
@media (max-width: 1299px) {
    .header__compare .header__label {
        display: none;
    }
}

@media (min-width: 992px) {
    body.ml-header-compact header .header__compare .header__label {
        display: none;
    }
}

/* tablet / phone: header icons are in the bottom bar and the catalog panel */
@media (max-width: 991px) {
    header .header__compare {
        display: none !important;
    }
}

/* ---------- Compare page (/compare/, php/inc/compare.inc.php, users/compare/compare_page_list.tpl) ----------
 * Bar: section tabs, "Only differences" switch, "Clear list". Table: product cards in the head, sticky first column,
 * rows with different values (.is-diff) slightly tinted; .is-diff-only hides equal rows (custom.js).
 */
.ml-cmp {
    margin: 8px 0 40px;
}

.ml-cmp__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.ml-cmp__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ml-cmp__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 8px 0 16px;
    border: 1px solid var(--ml-border);
    border-radius: 19px;
    background: #fff;
    font-size: 14px;
    color: var(--ml-text);
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
}

.ml-cmp__tab span {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: #F2F3F7;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: var(--ml-muted);
}

.ml-cmp__tab:hover,
.ml-cmp__tab:focus {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-cmp__tab.is-current {
    border-color: transparent;
    background: var(--ml-grad);
    color: #fff;
}

.ml-cmp__tab.is-current span {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.ml-cmp__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-left: auto;
}

.ml-cmp__switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--ml-text);
    cursor: pointer;
    user-select: none;
}

.ml-cmp__switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.ml-cmp__switch-ui {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #D9DCE5;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.ml-cmp__switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform 200ms ease;
}

.ml-cmp__switch input:checked + .ml-cmp__switch-ui {
    background: var(--ml-c2);
}

.ml-cmp__switch input:checked + .ml-cmp__switch-ui::after {
    transform: translateX(18px);
}

.ml-cmp__switch input:focus-visible + .ml-cmp__switch-ui {
    box-shadow: 0 0 0 3px rgba(50, 90, 251, .25);
}

.ml-cmp__switch:has(input:disabled) {
    opacity: .5;
    cursor: default;
}

.ml-cmp__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--ml-muted);
    text-decoration: none;
    transition: color 200ms ease;
}

.ml-cmp__clear:hover,
.ml-cmp__clear:focus {
    color: #C0262D;
    text-decoration: none;
    opacity: 1;
}

.ml-cmp__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ml-tint);
    font-size: 14px;
    line-height: 20px;
    color: var(--ml-c1);
}

.ml-cmp__note svg {
    flex: 0 0 18px;
    color: var(--ml-c2);
}

.ml-cmp__scroll {
    overflow-x: auto;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.ml-cmp__table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.ml-cmp__table--1 { min-width: 460px; }
.ml-cmp__table--2 { min-width: 660px; }
.ml-cmp__table--3 { min-width: 890px; }
.ml-cmp__table--4 { min-width: 1120px; }
.ml-cmp__table--5 { min-width: 1350px; }

.ml-cmp__table th,
.ml-cmp__table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ml-border);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    color: var(--ml-text);
}

.ml-cmp__table tbody tr:last-child > * {
    border-bottom: 0;
}

/* first column stays in place while the products scroll */
.ml-cmp__table th[scope="row"],
.ml-cmp__table .ml-cmp__corner {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 200px;
    border-right: 1px solid var(--ml-border);
    background: #FAFBFD;
    font-weight: 500;
    color: var(--ml-muted);
}

.ml-cmp__table td + td,
.ml-cmp__table .ml-cmp__prod + .ml-cmp__prod {
    border-left: 1px solid var(--ml-border);
}

.ml-cmp__table .ml-cmp__corner {
    vertical-align: bottom;
}

.ml-cmp__count {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-cmp__hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.ml-cmp__hint[hidden] {
    display: none;
}

.ml-cmp__table .ml-cmp__prod {
    position: relative;
    padding: 16px;
    background: #fff;
    font-weight: 400;
}

.ml-cmp__del {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F4F5F8;
    color: var(--ml-muted);
    transition: background 200ms ease, color 200ms ease;
}

.ml-cmp__del:hover,
.ml-cmp__del:focus {
    background: #FDECEC;
    color: #C0262D;
    opacity: 1;
}

.ml-cmp__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin: 0 0 12px;
}

.ml-cmp__pic img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

.ml-cmp__nophoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #F4F5F8;
    color: #B5BAC8;
}

.ml-cmp__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-height: 60px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ml-text);
    text-decoration: none;
}

.ml-cmp__name:hover,
.ml-cmp__name:focus {
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-cmp__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 10px 0 12px;
}

.ml-cmp__price {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ml-text);
}

.ml-cmp__old {
    font-size: 14px;
    white-space: nowrap;
    color: var(--ml-muted);
    text-decoration: line-through;
}

.ml-cmp__row .ml-cmp__price {
    font-size: 15px;
}

.ml-cmp__row .ml-cmp__old {
    margin-left: 8px;
    font-size: 13px;
}

.ml-cmp__btn,
.ml-cmp__btn.gradient-solid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.ml-cmp__btn.gradient-solid-button {
    color: #fff;
}

.ml-cmp__btn--line {
    border: 1px solid var(--ml-border);
    background: #fff;
    color: var(--ml-text);
    transition: border-color 200ms ease, color 200ms ease;
}

.ml-cmp__btn--line:hover,
.ml-cmp__btn--line:focus {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-cmp__btn.is-in-cart {
    border-color: rgba(46, 158, 79, .4);
    color: #2E9E4F;
}

.ml-cmp__btn.ml-busy {
    opacity: .6;
    pointer-events: none;
}

.ml-cmp__stock {
    color: var(--ml-muted);
}

.ml-cmp__stock.is-yes {
    color: #2E9E4F;
}

.ml-cmp__none {
    color: #C3C8D6;
}

/* rows where products differ: light tint */
.ml-cmp__row.is-diff > td {
    background: rgba(50, 90, 251, .035);
}

.ml-cmp__row:hover > td,
.ml-cmp__row:hover > th[scope="row"] {
    background: #F4F6FE;
}

.ml-cmp.is-diff-only .ml-cmp__row:not(.is-diff) {
    display: none;
}

.ml-cmp-empty {
    margin: 8px 0 40px;
}

@media (max-width: 767px) {
    .ml-cmp__tools {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .ml-cmp__table th[scope="row"],
    .ml-cmp__table .ml-cmp__corner {
        width: 112px;
        padding: 12px 10px;
        font-size: 13px;
    }

    .ml-cmp__table th,
    .ml-cmp__table td {
        padding: 12px;
    }

    .ml-cmp__table--1 { min-width: 300px; }
    .ml-cmp__table--2 { min-width: 472px; }
    .ml-cmp__table--3 { min-width: 652px; }
    .ml-cmp__table--4 { min-width: 832px; }
    .ml-cmp__table--5 { min-width: 1012px; }

    .ml-cmp__pic {
        height: 110px;
    }

    .ml-cmp__pic img {
        max-height: 110px;
    }

    .ml-cmp__name {
        font-size: 14px;
    }

    .ml-cmp__price {
        font-size: 17px;
    }
}

/* ---------- "Request accepted": one-click order / call back (page/ml_done.tpl, phpshopcore.hook.php) ---------- */
.ml-done {
    max-width: 760px;
    margin: 8px auto 48px;
}

.ml-done__card {
    padding: 40px 48px 36px;
    border: 1px solid var(--ml-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 5, 180, .06);
    text-align: center;
}

.ml-done__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--ml-grad);
    color: #fff;
    box-shadow: 0 10px 24px rgba(50, 90, 251, .3);
    animation: ml-done-pop 500ms ease-out both;
}

@keyframes ml-done-pop {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.ml-done__title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    color: var(--ml-text);
}

.ml-done__text {
    max-width: 520px;
    margin: 10px auto 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--ml-muted);
}

.ml-done__product {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin: 24px auto 0;
    padding: 12px;
    border: 1px solid var(--ml-border);
    border-radius: 14px;
    text-align: left;
}

.ml-done__product[hidden] {
    display: none;
}

.ml-done__product img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #F6F7FA;
    object-fit: contain;
}

.ml-done__product-name {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ml-text);
}

.ml-done__product-meta {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-done__next {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ml-border);
    text-align: left;
}

.ml-done__next-title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--ml-text);
}

.ml-done__steps {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ml-done__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* line between the step numbers */
.ml-done__step + .ml-done__step::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 15px;
    width: 2px;
    height: 16px;
    background: rgba(50, 90, 251, .15);
}

.ml-done__step-num {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 50%;
    background: rgba(50, 90, 251, .1);
    font-size: 14px;
    font-weight: 600;
    color: var(--ml-c1);
}

.ml-done__step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 5px;
    font-size: 14px;
    line-height: 20px;
    color: var(--ml-muted);
}

.ml-done__step-body b {
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.ml-done__btn,
.ml-done__btn.gradient-solid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 46px;
    padding: 0 30px;
    border-radius: 23px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

.ml-done__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    border: 1px solid var(--ml-border);
    border-radius: 23px;
    font-size: 15px;
    color: var(--ml-text);
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
}

.ml-done__back[hidden] {
    display: none;
}

.ml-done__back:hover,
.ml-done__back:focus {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-done__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 24px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--ml-muted);
}

.ml-done__help-title {
    font-weight: 500;
    color: var(--ml-text);
}

.ml-done__help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ml-c1);
    text-decoration: none;
}

.ml-done__help-link svg {
    color: var(--ml-c2);
}

a.ml-done__help-link:hover,
a.ml-done__help-link:focus {
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-done__help-link--muted {
    color: var(--ml-muted);
}

@media (max-width: 767px) {
    .ml-done__card {
        padding: 28px 18px 24px;
    }

    .ml-done__title {
        font-size: 22px;
        line-height: 28px;
    }

    .ml-done__actions > * {
        width: 100%;
    }
}


/* =====================================================================
 * Iteration 42 (20.10.2026)
 * ===================================================================== */

/* ---------- Header: equal gaps between Compare, Favourites and Cart ----------
 * The cart link kept Bootstrap ".nav > li > a" padding 0 15px (and the list -15px margin) - 45px gap instead of 30px.
 */
header #cart.navbar-nav {
    margin-right: 0;
}

header #cart.navbar-nav > li > a.header__cart {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- Product page: no empty line when there is no benefit (js/product-card.js .is-zero) ----------
 * Grid cards keep the place of the "Benefit" row (visibility: hidden), the product page removes it.
 */
.pc-card.pc-page .pc-benefit-row.is-zero {
    display: none;
}

/* ---------- Brand page (/brand/<name>.html, selection/page_selection_list.tpl) ---------- */
.ml-brand-desc {
    max-width: 980px;
    margin: -4px 0 20px;
    font-size: 15px;
    line-height: 24px;
    color: var(--ml-muted);
}

.ml-brand-desc p:last-child {
    margin-bottom: 0;
}

/* ---------- User menu: the user block is a link to "Personal data", counters of Favourites and Compare ---------- */
a.header-user__head {
    color: inherit;
    text-decoration: none;
    border-radius: 12px 12px 0 0;
    transition: background-color 150ms ease;
}

a.header-user__head:hover,
a.header-user__head:focus {
    background: #F5F7FE;
    color: inherit;
    text-decoration: none;
    opacity: 1;
    outline: none;
}

a.header-user__head:hover .header-user__title {
    color: var(--ml-c2);
}

.header-user__item .header-user__count {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 11px;
    background: #EEF1FE;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: var(--ml-c1);
}

.header-user__item .header-user__count.is-empty {
    display: none;
}

/* ---------- Checkout: payment titles (custom.js .ml-co-pay__title) - both lines start at one edge ---------- */
.ml-co-payment .paymOneEl .ml-co-pay__title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* ---------- Checkout: labels above the delivery address fields (custom.js) ---------- */
#userAdresData > p > .ml-field__label {
    margin-bottom: 6px;
    font-size: 13px;
}

/* ---------- Checkout: pickup card (template#ml-pickup-card, php/hook/phpshoporder.hook.php) ---------- */
.ml-co-address.is-pickup > :not(#userAdresData) {
    display: none;
}

#userAdresData .ml-pickup {
    grid-column: 1 / -1;
}

.ml-pickup {
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(31, 5, 180, .05) 0%, rgba(50, 90, 251, .07) 100%);
    animation: ml-pickup-in 250ms ease-out both;
}

@keyframes ml-pickup-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.ml-pickup__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ml-pickup__icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ml-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(50, 90, 251, .25);
}

.ml-pickup__icon svg {
    width: 22px;
    height: 22px;
}

.ml-pickup__where {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ml-pickup__label {
    font-size: 13px;
    color: var(--ml-muted);
}

.ml-pickup__address {
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    color: var(--ml-text);
}

.ml-pickup__map {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(50, 90, 251, .3);
    border-radius: 18px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--ml-c1);
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
}

.ml-pickup__map:hover,
.ml-pickup__map:focus {
    border-color: var(--ml-c2);
    color: var(--ml-c2);
    text-decoration: none;
    opacity: 1;
}

.ml-pickup__info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 20px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(50, 90, 251, .12);
    list-style: none;
}

.ml-pickup__info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--ml-muted);
}

.ml-pickup__info li svg {
    flex: 0 0 18px;
    margin-top: 1px;
    color: var(--ml-c2);
}

.ml-pickup__info li b {
    display: block;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-pickup__info a {
    color: var(--ml-c1);
    text-decoration: none;
}

.ml-pickup__note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--ml-text);
}

@media (max-width: 575px) {
    .ml-pickup__head {
        flex-wrap: wrap;
    }

    .ml-pickup__map {
        margin-left: 58px;
    }
}

/* ---------- Checkout: required fields check (custom.js) - red frame, message under the field ---------- */
.main .ml-checkout .form-control.ml-invalid,
.main .ml-checkout .form-control.ml-invalid:focus {
    border-color: #E5484D;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .14);
}

.ml-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 18px;
    color: #D93036;
    animation: ml-pickup-in 200ms ease-out both;
}

.ml-field-error::before {
    content: "";
    flex: 0 0 14px;
    height: 14px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D93036' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* consent check box */
/* the box is custom (appearance: none, own border) - red border and halo */
.ml-checkout .ml-co-rule.ml-invalid input[type="checkbox"] {
    border-color: #E5484D !important;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .18);
}

.ml-co-rule.ml-invalid > span {
    color: #D93036;
}


/* =====================================================================
 * Iteration 43 (20.10.2026)
 * ===================================================================== */

/* ---------- Checkout cart lines: the green counter of product cards, compact (order/product.tpl) ---------- */
.ml-co-item .cart-counter.ml-co-qty {
    display: inline-flex;
    align-items: center;
    height: 32px;
    border: 0;
    border-radius: 16px;
    background: #4CAF50;
    overflow: hidden;
}

.ml-co-item .cart-counter.ml-co-qty .counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 0;
    font-size: 18px;
    color: #fff;
}

.ml-co-item .cart-counter.ml-co-qty .counter-btn:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.main .ml-checkout .ml-co-item .cart-counter .counter-input.form-control {
    width: 46px;
    height: 32px;
    padding: 0;
    border-radius: 0;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--ml-text);
    pointer-events: auto;
    cursor: text;
}

/* "+" at the limit (stock or 9999) */
.ml-co-item.is-at-max .ml-co-qty__btn[data-ml-cart="plus"] {
    opacity: .45;
}

/* ---------- Product page: "more than in stock - under order" (productpage.inc.php @mlOverstock@) ---------- */
.ml-pp__overstock {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFF6E5;
    font-size: 13px;
    line-height: 18px;
    color: #8A5300;
}

.ml-pp__overstock[hidden] {
    display: none;
}

.ml-pp__overstock svg {
    flex: 0 0 16px;
    margin-top: 1px;
}

.ml-pp__action.ml-busy {
    opacity: .6;
    pointer-events: none;
}

/* ---------- Checkout: saved addresses of a logged in user (custom.js, core select hidden in .ml-adr-core) ---------- */
.ml-adr-saved {
    margin: 0 0 16px;
}

.ml-adr-saved__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ml-text);
}

.ml-adr-saved__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ml-adr-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--ml-border);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    color: var(--ml-text);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.ml-adr-chip svg {
    flex: 0 0 16px;
    color: var(--ml-muted);
}

.ml-adr-chip:hover {
    border-color: rgba(50, 90, 251, .5);
}

.ml-adr-chip.is-current {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--ml-grad) border-box;
    box-shadow: 0 4px 14px rgba(50, 90, 251, .12);
    color: var(--ml-c1);
}

.ml-adr-chip.is-current svg {
    color: var(--ml-c2);
}

.ml-adr-chip--new {
    border-style: dashed;
    color: var(--ml-c1);
}

.ml-adr-note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-adr-default {
    margin: 8px 0 0;
}

.ml-adr-default[hidden] {
    display: none;
}

.ml-adr-default__check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--ml-text);
    cursor: pointer;
}

.ml-adr-default__check input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ml-c1);
}

/* ---------- Checkout: smooth change of the delivery method (custom.js) ---------- */
.ml-co-address.is-animating {
    overflow: hidden;
    transition: height 280ms ease;
}

.ml-co-address.is-switching > * {
    opacity: .35;
    transition: opacity 150ms ease;
}

#userAdresData.is-entering {
    animation: ml-adr-in 280ms ease-out both;
}

@keyframes ml-adr-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Checkout: delivery time - day cards and interval chips (custom.js, #ml-time-options) ---------- */
#userAdresData > p.ml-time-field {
    grid-column: 1 / -1;
}

.ml-time-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.ml-time__days {
    display: flex;
    gap: 8px;
    margin: 0 -2px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ml-time__day {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 92px;
    height: 58px;
    padding: 0 12px;
    border: 1px solid var(--ml-border);
    border-radius: 12px;
    background: #fff;
    color: var(--ml-text);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.ml-time__day b {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.ml-time__day span {
    font-size: 12px;
    line-height: 16px;
    color: var(--ml-muted);
}

.ml-time__day:hover,
.ml-time__slot:hover {
    border-color: rgba(50, 90, 251, .5);
}

.ml-time__day.is-current {
    border-color: transparent;
    background: var(--ml-grad);
    box-shadow: 0 6px 16px rgba(50, 90, 251, .25);
    color: #fff;
}

.ml-time__day.is-current span {
    color: rgba(255, 255, 255, .8);
}

.ml-time__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ml-time__slot {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--ml-border);
    border-radius: 19px;
    background: #fff;
    font-size: 14px;
    color: var(--ml-text);
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.ml-time__slot.is-current {
    border-color: var(--ml-c2);
    background: rgba(50, 90, 251, .08);
    color: var(--ml-c1);
    font-weight: 600;
}

/* intervals are pale until a day is chosen (a click on an interval chooses the nearest day) */
.ml-time:not(.has-day) .ml-time__slot {
    color: var(--ml-muted);
}

/* ---------- Checkout: consent error - icon under the check box, text in line with the consent text ---------- */
.ml-co-rule + .ml-field-error {
    gap: 12px;
    margin: -10px 0 14px;
    padding-left: 2px;
}


/* =====================================================================
 * Iteration 44 (20.10.2026)
 * ===================================================================== */

/* ---------- Checkout cart lines: quantity field like product cards - square, gray frame top and bottom ----------
 * style.css "#forma_order .form-control" (id selector) gave it radius 6px and its own border.
 */
#forma_order .ml-co-item .cart-counter .counter-input.form-control {
    border: 1px solid #DCDFE7;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Product page: "Compare" / "To favourites" - hover only lights the button up ---------- */
.ml-pp__action {
    transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.ml-pp__action:hover,
.ml-pp__action:focus-visible {
    background: rgba(50, 90, 251, .05);
    box-shadow: 0 4px 14px rgba(50, 90, 251, .12);
}

.ml-pp__action.in-compare:hover,
.ml-pp__action.in-wishlist:hover {
    border-color: var(--ml-c2);
    color: var(--ml-c1);
}

/* ---------- Checkout: saved address card - two lines (street, house, flat / city, porch, intercom) ---------- */
.ml-adr-chip {
    max-width: 340px;
}

.ml-adr-chip__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ml-adr-chip__main,
.ml-adr-chip__more {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ml-adr-chip__main {
    font-weight: 500;
}

.ml-adr-chip__more {
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: var(--ml-muted);
}

.ml-adr-chip__more[hidden] {
    display: none;
}

/* ---------- Checkout: delivery list reload - cards keep their look (no "not allowed" cursor) ---------- */
.ml-co-delivery.ml-busy .delivOneEl:has(input:disabled) label {
    opacity: 1;
    cursor: pointer;
}

.ml-co-delivery.ml-busy .delivOneEl input[type="radio"]:disabled {
    cursor: pointer;
}

/* ---------- Personal data: "Company" group (users/users_page_info.tpl) ---------- */
.ml-form__group {
    margin: 4px 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ml-border);
}

.ml-form__group-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

.ml-form__group-hint {
    margin: 2px 0 12px;
    font-size: 13px;
    line-height: 18px;
    color: var(--ml-muted);
}

.ml-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* DaData hints list: above the cards, site font */
.suggestions-suggestions {
    z-index: 1070 !important;
    border-radius: 0 0 10px 10px;
    font-family: 'Mulish', Arial, sans-serif;
}


/* =====================================================================
 * Iteration 45 (20.10.2026)
 * ===================================================================== */

/* Busy state of our buttons is ".ml-busy": the chat widget (phpshop/lib/templates/chat/style.css) gives any
 * ".is-loading" display:block and a scale animation - the compare button shrank to nothing while removing. */

/* ---------- Checkout cart lines: the field was 34px high in a 32px counter (overflow hidden) - the gray frame
 * top and bottom was cut off. Now it fits: 30px + 1px frame top and bottom. */
#forma_order .ml-co-item .cart-counter .counter-input.form-control {
    height: 32px;
    min-height: 0;
    line-height: 30px;
}

/* ---------- Checkout: "use this address next time" + note right under the address fields (custom.js .ml-adr-after) */
#userAdresData > .ml-adr-after {
    grid-column: 1 / -1;
    margin: -2px 0 4px;
}

.ml-adr-after .ml-adr-note {
    margin: 0;
}

.ml-adr-after .ml-adr-default {
    margin: 0 0 6px;
}

#forma_order .ml-adr-default .ml-check {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

#forma_order .ml-adr-default .ml-check input[type="checkbox"] {
    position: static;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
}

.ml-co-address.is-pickup .ml-adr-after {
    display: none;
}


/* =====================================================================
 * Iteration 46 (20.10.2026)
 * ===================================================================== */

/* ---------- Delivery day: chosen day looks like the chosen time interval (not the gradient) ---------- */
.ml-time__day.is-current {
    border-color: var(--ml-c2);
    background: rgba(50, 90, 251, .08);
    box-shadow: none;
    color: var(--ml-c1);
}

.ml-time__day.is-current b {
    font-weight: 700;
}

.ml-time__day.is-current span {
    color: var(--ml-c2);
}


/* =====================================================================
 * Iteration 47 (20.10.2026) - manager answers: counters and notification (custom.js, #ml-dialog-info)
 * ===================================================================== */

/* red counter: "Dialogs" in the user menu and in the account menu */
.header-user__item .header-user__count--new,
.ml-cabinet__count--new {
    background: #E5484D;
    color: #fff;
}

.ml-cabinet__count[hidden],
.header-user__count--new[hidden] {
    display: none;
}

/* dot on the user button (header) and on "Account" in the phone bar */
.header-user__toggle {
    position: relative;
}

.header-user__dot,
.ml-tabbar__dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 0px solid #fff;
    border-radius: 50%;
    background: #E5484D;
    pointer-events: none;
    animation: ml-dot-in 300ms ease-out both;
}

.header-user__dot {
    top: 4px;
    left: 30px;
}

.ml-tabbar__item {
    position: relative;
}

.ml-tabbar__dot {
    top: 4px;
    left: calc(50% + 6px);
}

.header-user__dot[hidden],
.ml-tabbar__dot[hidden] {
    display: none;
}

@keyframes ml-dot-in {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* notification */
.ml-dlg-toast {
    position: fixed;
    right: 24px;
    bottom: 104px;
    z-index: 1080;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 16px 16px 14px;
    border: 1px solid var(--ml-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(31, 5, 180, .16);
    font-family: 'Mulish', Arial, sans-serif;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 250ms ease, transform 250ms ease;
}

.ml-dlg-toast.is-shown {
    opacity: 1;
    transform: none;
}

.ml-dlg-toast__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F4F5F8;
    color: var(--ml-muted);
    cursor: pointer;
}

.ml-dlg-toast__close:hover {
    color: var(--ml-text);
}

.ml-dlg-toast__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 30px;
}

.ml-dlg-toast__icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 50%;
    background: var(--ml-grad);
    color: #fff;
}

.ml-dlg-toast__headtext {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ml-dlg-toast__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ml-text);
}

.ml-dlg-toast__time {
    font-size: 12px;
    color: var(--ml-muted);
}

.ml-dlg-toast__text {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #F5F7FE;
    font-size: 14px;
    line-height: 20px;
    color: var(--ml-text);
    word-wrap: break-word;
}

.ml-dlg-toast__open,
.ml-dlg-toast__open.gradient-solid-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991px) {
    .ml-dlg-toast {
        right: 12px;
        left: 12px;
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: auto;
    }
}


/* =====================================================================
 * Iteration 48 (20.10.2026)
 * ===================================================================== */

/* unread answers dot: on the top right corner of the user icon (users/users_forma_enter.tpl .header-user__icon) */
.header-user__icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.header-user__icon .header-user__dot {
    top: -3px;
    right: auto;
    left: -2px;
    width: 8px;
    height: 8px;
}


/* =====================================================================
 * Iteration 49 (20.10.2026) - adaptive layout review
 * ===================================================================== */

/* ---------- No sideways page scroll on touch devices ----------
 * 768-991: header plate and top banner had -24px side margins in a 15px-padded container - 9px out of the screen
 * on each side, the page could be moved left / right (910px tablet). Now the margins equal the container padding.
 * Safety net: html / body clip horizontal overflow (sliders while they set up); "clip" keeps position: sticky working. */
html,
body {
    overflow-x: clip;
}

@media (min-width: 768px) and (max-width: 991px) {
    .header__inner {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: -15px;
        margin-left: -15px;
    }

    .top-banner {
        width: calc(100% + 30px);
        margin-right: -15px;
        margin-left: -15px;
    }
}

/* ---------- Phone header (< 768) like Figma mobile: one white plate with the search inside ----------
 * Figma: plate 375 wide, bottom corners 8px, 1px #C1C1C1 bottom line, no shadow; logo, tagline, phone (Mulish 16),
 * three 43px round icons, search 47px pill with 1px gradient frame. The search row was outside the plate. */
@media (max-width: 767px) {
    header.container {
        margin-bottom: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #C1C1C1;
        border-radius: 0 0 8px 8px;
        background: #fff;
    }

    header .header__inner {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent;
    }

    header .main__group {
        padding-bottom: 12px;
    }

    .ml-mhead__tag,
    .ml-mhead__tel {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: #1105A4;
    }

    header .header__right .blue-cycle {
        width: 43px;
        height: 43px;
    }

    header .lower__group {
        margin-top: 0;
    }

    /* search: 1px frame all round (the wrapper gradient), field and button of one height
     * (an old rule "#search { height: 35.5px }" made the field lower than the button - thick frame, uneven ends) */
    header .search-input-wrapper {
        padding: 1px;
    }

    header .search-input-wrapper #search,
    header .search-input-wrapper input,
    header .search-input-wrapper .search-submit {
        height: 45px;
        min-height: 45px;
        margin: 0;
    }

    header .search-input-wrapper .search-submit {
        border-radius: 0 23px 23px 0;
    }

    header .search-input-wrapper input {
        border-radius: 23px 0 0 23px;
    }

    /* the same gap from the plate to the breadcrumbs / first block on every page */
    .ml-breadcrumbs .breadcrumb {
        margin-top: 20px;
    }
}

/* ---------- Phones: content and product grids with equal side gaps ----------
 * .main had 10px left / 15px right padding and the grid row -15px margins: cards touched the left screen edge
 * and kept 5px on the right. Now 16px to both edges (as the header) and 16px between cards; tablets too. */
@media (max-width: 991px) {
    .main,
    .ml-layout-full .main {
        padding-right: 16px;
        padding-left: 16px;
    }

    .main .template-product-list,
    .main .pc-grid,
    .main .row.template-product-list {
        margin-right: -8px;
        margin-left: -8px;
    }

    .main .template-product-list > .pc-card,
    .main .pc-grid > .pc-card {
        padding-right: 8px;
        padding-left: 8px;
    }
}

/* ---------- One product per row (phones; list view on desktops): no reserved empty space ----------
 * Heights for the grid (name, price, stock) are set per visual row now (custom.js setEqualHeight), a single card keeps
 * its own heights; less padding between the badge and the button. */
@media (max-width: 575px) {
    .pc-card:not(.pc-list) .thumbnail .caption.caption-main-part {
        padding-bottom: 6px;
    }
}

/* list view (desktop): the photo no longer forces 240px - the card is as tall as its text or purchase panel,
 * the photo fills the card height (cover) */
@media (hover: hover) {
    .pc-card.pc-list .thumbnail .caption.caption-main-part {
        min-height: 190px;
    }
}

/* ---------- Product page on phones: gap between "Questions and answers" and the tabs ---------- */
@media (max-width: 767px) {
    .ml-pp__top {
        margin-bottom: 24px;
    }
}

/* ---------- Personal account on tablets / phones: menu as tiles in two columns (no sideways scrolling) ---------- */
@media (max-width: 991px) {
    .ml-cabinet__menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .ml-cabinet__link {
        min-width: 0;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 18px;
        white-space: normal;
    }

    .ml-cabinet__link .ml-cabinet__text {
        min-width: 0;
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .ml-cabinet__menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* home on phones: the slider as far from the header plate as the breadcrumbs on other pages */
@media (max-width: 767px) {
    #carousel-example-generic {
        margin-top: 20px;
    }
}

/* DaData hints: the plugin adds a big gray "clear" cross into fields on touch screens (city, street, name ...) */
.suggestions-addon {
    display: none !important;
}

/* account tiles on phones: long labels ("Personal discount") wrap instead of being cut */
@media (max-width: 767px) {
    .ml-stat {
        min-width: 0;
        padding: 10px;
    }

    .ml-stat__label {
        font-size: 11px;
        line-height: 15px;
    }
}

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