/* =============================================
   ELIGAR — Custom Theme Overrides (linef style)
   ============================================= */

/* Pickup info card shown when Самовивіз (freeshipping) is selected.
   Injected by Magento_Checkout/js/pickup-autofill into the shipping methods
   block so the customer sees where to collect their order. */
.checkout-index-index .eligar-pickup-info {
    margin: 12px 0 8px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-left: 3px solid #222;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #222;
}
.checkout-index-index .eligar-pickup-info__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 6px;
}
.checkout-index-index .eligar-pickup-info__line {
    font-size: 14px;
}

/* Hide the "В каталог" navigation toggle on checkout — the checkout page
   doesn't expose the full nav drawer and the button has no useful purpose
   there. */
.checkout-index-index .catalog-btn,
.checkout-index-index .action.nav-toggle {
    display: none !important;
}

/* Spinner shown on the city input while an async search is in flight.
   autocomplete-form.js toggles `.np-loading` on the input around the
   searchCitiesAll request. The spinner is drawn via a pseudo-element on
   the parent `.control` so it doesn't fight with the input's own styling. */
@keyframes np-spin {
    to { transform: rotate(360deg); }
}
.checkout-index-index .control:has(> input.np-loading)::before {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #d8d8d8;
    border-top-color: #444;
    border-radius: 50%;
    animation: np-spin 0.7s linear infinite;
    z-index: 2;
    pointer-events: none;
}
.checkout-index-index .control {
    position: relative;
}
.checkout-index-index .opc-wrapper input[type="text"].np-loading {
    padding-right: 40px !important;
}

/* 0. LAYOUT — widen max content width from 1140px to 1360px */
@media (min-width: 1380px) {
    .page-main,
    .container,
    .navigation.sw-megamenu {
        max-width: 1360px !important;
    }
}

/* Checkout-only: at 992-1379px viewports the default 1140px page-main is too
   narrow to fit opc-wrapper (620) + 30 gap + iosc-summary side-by-side, so
   the summary wraps below. Expand page-main up to 1360px on the checkout
   page so the 3-column layout holds at intermediate widths too.
   Selector includes both body classes (.layout-fullwidth + .checkout-index-index)
   to beat the `.layout-fullwidth .page-main { padding: 0 }` rule below. */
@media (min-width: 992px) and (max-width: 1379px) {
    .layout-fullwidth.checkout-index-index .page-main {
        max-width: 1360px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* Remove vw-based side padding on fullwidth layout */
.layout-fullwidth .top-container,
.layout-fullwidth .page-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile: prevent horizontal page scroll caused by Page Builder full-width
   rows / wide carousels / unconstrained content, and add comfortable side
   padding so content doesn't sit edge-to-edge against the viewport. */
@media (max-width: 767px) {
    html,
    body,
    .page-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .cms-index-index .layout-fullwidth.cms-home .page-main,
    .cms-index-index .layout-fullwidth .page-main,
    .layout-fullwidth.page-products .page-main,
    .layout-fullwidth.catalog-product-view .page-main,
    .layout-fullwidth.catalogsearch-result-index .page-main,
    .layout-fullwidth.catalog-category-view .page-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    /* Page Builder full-width rows: clamp inner to 100% of viewport less the
       side padding so headings and copy don't bleed off-screen. */
    [data-content-type='row'][data-appearance='full-width'] > .row-full-width-inner,
    [data-content-type='row'][data-appearance='contained'] > [data-element='inner'] {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

/* 0. HOMEPAGE HERO — search panel */

.homepage-hero {
    background: #f7f7f7;
    border-bottom: 1px solid #e8e8e8;
    padding: 52px 30px 44px;
}

.homepage-hero__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.homepage-hero__title {
    font-size: 28px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.homepage-hero__sub {
    font-size: 14px;
    color: #888;
    margin: 0 0 24px;
}

.homepage-hero__form {
    display: flex;
    gap: 0;
    max-width: 560px;
    margin: 0 auto 16px;
}

.homepage-hero__input {
    flex: 1;
    border: 1.5px solid #d0d0d0 !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 13px 18px !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

.homepage-hero__input:focus {
    border-color: #999;
}

.homepage-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #222;
    color: #fff;
    border: 1.5px solid #222;
    border-radius: 0;
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    line-height: 1;
}

.homepage-hero__btn:hover {
    background: #444;
    border-color: #444;
}

.homepage-hero__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.homepage-hero__tags-label {
    color: #aaa;
}

.homepage-hero__tag {
    color: #555;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    transition: border-color 0.15s, color 0.15s;
}

.homepage-hero__tag:hover {
    border-color: #999;
    color: #111;
}

/* Hide "Новинки люстр" Page Builder block */
.column.main > [data-pb-style="DDWMFI5"] {
    display: none !important;
}

/* Category nav links */
.shop-category-list .nav-link {
    font-size: 14px !important;
}

@media (max-width: 480px) {
    .homepage-hero {
        padding: 36px 16px 32px;
    }

    .homepage-hero__title {
        font-size: 22px;
    }

    .homepage-hero__form {
        flex-direction: column;
        gap: 0;
    }

    .homepage-hero__input {
        border-right: 1.5px solid #d0d0d0 !important;
        border-bottom: none !important;
    }

    .homepage-hero__btn {
        justify-content: center;
    }
}

/* 1. HEADER — white minimal 3-column layout */

.page-header {
    background-color: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: none !important;
    position: relative !important;
}

.page-header .header-main {
    background-color: #fff !important;
}

.main-panel-top {
    display: none !important;
}

/* 3-column header row */
.page-header .header.content.header-row {
    display: flex !important;
    align-items: center !important;
    padding: 16px 30px !important;
    background: #fff !important;
    max-width: 100% !important;
}

.page-header .header.content.header-row .header-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.page-header .header.content.header-row .header-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header .header.content.header-row .header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

/* В КАТАЛОГ button */
.catalog-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: #fff !important;
    border: 1.5px solid #d0d0d0 !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    width: auto !important;
    height: auto !important;
}

.catalog-btn::before {
    display: none !important;
}

/* Un-hide text hidden by Porto's lib-icon-text-hide() mixin */
.catalog-btn .catalog-btn__text {
    clip: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
    display: inline !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #222 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.catalog-btn .catalog-btn__icon {
    color: #222 !important;
    flex-shrink: 0;
    line-height: 1;
}

.catalog-btn:hover {
    border-color: #999 !important;
    opacity: 1;
}

/* Logo — centered, no margin offset */
.page-header .logo {
    margin: 0 !important;
    float: none !important;
}

.page-header .logo img {
    height: 100px !important;
    width: auto !important;
    max-width: none !important;
    filter: brightness(0) !important; /* white logo → black for white header */
}

/* Account & wishlist icons — dark on white */
.page-header .header-icon {
    color: #222 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.page-header .header-icon i {
    font-size: 20px !important;
    color: #222 !important;
}

.page-header .header-icon:hover,
.page-header .header-icon:hover i {
    color: #888 !important;
    text-decoration: none !important;
}

/* Minicart — dark icon & counter */
.page-header .minicart-wrapper .action.showcart::before,
.page-header .minicart-wrapper .action.showcart .minicart-icon {
    color: #222 !important;
    font-size: 20px !important;
}

.page-header .minicart-wrapper .action.showcart .text,
.page-header .minicart-wrapper .action.showcart::after,
.page-header .minicart-wrapper > button.action.toggle {
    display: none !important;
}

/* Hide cart subtotal */
.page-header .minicart-wrapper .action-subtotal {
    display: none !important;
}

.page-header .minicart-wrapper .counter.qty {
    background: #222 !important;
    color: #fff !important;
    right: -6px !important;
    left: auto !important;
    top: -6px !important;
}


/* 1b. HEADER — mobile adjustments (≤480px) */
@media (max-width: 480px) {
    .page-header .header.content.header-row {
        padding: 10px 14px !important;
    }

    /* Smaller logo */
    .page-header .logo img {
        height: 55px !important;
    }

    /* Hide "В КАТАЛОГ" text, keep only the grid icon */
    .catalog-btn .catalog-btn__text {
        display: none !important;
    }

    .catalog-btn {
        padding: 9px 10px !important;
        gap: 0 !important;
    }

    /* Tighter icon gap */
    .page-header .header.content.header-row .header-right {
        gap: 12px !important;
    }

    /* Hide wishlist to save space */
    .page-header .header-icon.wishlist {
        display: none !important;
    }
}

/* 2. SEARCH PANEL — drop-down from header */

.header-search-toggle {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #222 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-toggle:hover {
    color: #888 !important;
}

.header-search-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    z-index: 9996;
    padding: 12px 30px;
}

.header-search-panel.search-open {
    display: block;
}

.header-search-form {
    display: flex !important;
    align-items: center !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.header-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #fff !important;
}

.header-search-submit {
    background: none !important;
    border: none !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    color: #222 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-submit:hover {
    color: #888 !important;
}

.header-search-close {
    background: none !important;
    border: none !important;
    border-left: 1px solid #e0e0e0 !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    color: #888 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.header-search-close:hover {
    color: #222 !important;
}

/* 3. NAV SECTIONS — slide-in catalog drawer */

/* Defensive scroll-restore: the blank theme's _navigation.less locks
   `body { overflow: hidden; position: relative; height: 100% }` when
   <html> carries `.nav-before-open`. If anything (stock mage/menu.js,
   third-party module) sets that class and forgets to remove it on close,
   the page becomes unscrollable. Unconditionally restore scroll whenever
   the drawer isn't actually open. */
html:not(.nav-open) body {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
    width: auto !important;
}

/* Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

body.nav-open .nav-overlay,
html.nav-open .nav-overlay {
    display: block;
}

/* Desktop: nav-sections positioning and panel widths */
@media (min-width: 768px) {
    .nav-sections {
        background: #fff !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 355px !important;
        z-index: 9998 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease, width 0.2s ease !important;
        overflow: hidden !important;
        border-right: 1px solid #e8e8e8 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .nav-sections.right-panel-open {
        width: 660px !important;
    }

    body.nav-open .nav-sections,
    html.nav-open .nav-sections {
        transform: translateX(0) !important;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.08) !important;
    }

    .drawer-panel-left {
        width: 355px !important;
        border-right: 1px solid #f0f0f0 !important;
    }

    .drawer-panel-right {
        flex: 1 !important;
    }
}

/* Drawer panels — all screen sizes */
.drawer-panel-left {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto !important;
}

.drawer-panel-right {
    display: none !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto !important;
}

.drawer-panel-right.active {
    display: flex !important;
}

/* Drawer header */
.drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 22px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
}

.drawer-logo {
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: #111 !important;
    text-transform: uppercase !important;
}

.drawer-close {
    background: none !important;
    border: none !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #888 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.drawer-close:hover {
    color: #111 !important;
}

/* Tags row */
.drawer-tags {
    display: flex !important;
    gap: 8px !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
}

.drawer-tag {
    display: inline-block !important;
    border: 1px solid #bbb !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: #333 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

.drawer-tag:hover {
    border-color: #333 !important;
    color: #111 !important;
    text-decoration: none !important;
}

.drawer-tag--sale {
    border-color: #c0392b !important;
    color: #c0392b !important;
}

.drawer-tag--sale:hover {
    border-color: #a93226 !important;
    color: #a93226 !important;
}

/* All nav text — force left-align, no uppercase */
.nav-sections *,
.nav-sections a,
.nav-sections li,
.nav-sections .navigation a,
.nav-sections .navigation li a {
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Nav container — flatten all wrappers including Page Builder divs */
.nav-sections .navigation,
.nav-sections .navigation > ul,
.nav-sections .navigation ul.level0,
.nav-sections .navigation > ul > div,
.nav-sections .navigation > ul > div > ul,
.nav-sections .navigation [data-content-type] {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: unset !important;
    flex: 1 !important;
    width: 100% !important;
    float: none !important;
    columns: unset !important;
    column-count: unset !important;
    grid-template-columns: unset !important;
}

/* Top-level items — force single column */
.nav-sections .navigation ul.level0 > li,
.nav-sections .navigation li.level0 {
    display: block !important;
    float: none !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
    position: relative !important;
}

.nav-sections .navigation ul.level0 > li > a,
.nav-sections .navigation ul.level0 > li > a.level-top,
.nav-sections .navigation li.level0 > a,
.nav-sections .navigation li.level0 > a.level-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-left: 3px solid transparent !important;
    white-space: nowrap !important;
    background: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

.nav-sections .navigation ul.level0 > li > a:hover,
.nav-sections .navigation ul.level0 > li > a.level-top:hover,
.nav-sections .navigation li.level0 > a:hover,
.nav-sections .navigation li.level0 > a.level-top:hover {
    color: #555 !important;
    background: #fafafa !important;
}

/* Active category: dark left border + light bg */
.nav-sections .navigation ul.level0 > li.drawer-item-active > a,
.nav-sections .navigation ul.level0 > li.drawer-item-active > a.level-top,
.nav-sections .navigation li.level0.drawer-item-active > a,
.nav-sections .navigation li.level0.drawer-item-active > a.level-top {
    background: #f5f5f5 !important;
    border-left-color: #222 !important;
    color: #222 !important;
}

/* Nav item label */
.nav-sections .navigation li.level0 > a .nav-item-label,
.nav-sections .navigation ul.level0 > li > a .nav-item-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    clip: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 15px !important;
    color: #222 !important;
    font-weight: 400 !important;
}

/* Un-hide any inner spans Porto may clip */
.nav-sections .navigation li.level0 > a .nav-item-label > span:not(.nav-item-icon),
.nav-sections .navigation ul.level0 > li > a .nav-item-label > span:not(.nav-item-icon) {
    clip: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
    display: inline !important;
    visibility: visible !important;
    text-indent: 0 !important;
    font-size: 15px !important;
    color: #222 !important;
    font-weight: 400 !important;
}

.nav-item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

.nav-item-icon img,
.nav-item-icon svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    object-fit: contain !important;
}

/* Toggle arrow */
.drawer-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #ccc !important;
    cursor: pointer !important;
    margin-left: 4px !important;
}

.nav-sections .navigation li.level0.drawer-item-active > a .drawer-arrow,
.nav-sections .navigation .level0.drawer-item-active > a .drawer-arrow {
    color: #999 !important;
}

/* Hide Porto's mobile/tablet nav injected elements */
.nav-sections .open-children-toggle { display: none !important; }
.nav-sections .section-item-title,
.nav-sections .nav-sections-item-title { display: none !important; }
.nav-sections .customer-welcome,
.nav-sections .authorization-link { display: none !important; }
.nav-sections .navigation .level0 > a::after,
.nav-sections .navigation .level0 > a::before { display: none !important; }

/* Hide Porto's inline submenus — rendered in right panel instead */
.nav-sections .navigation .submenu,
.nav-sections .navigation ul.submenu,
.nav-sections .navigation .level0 > ul {
    display: none !important;
}

/* Flatten mega-menu */
.nav-sections .navigation .megamenu > .row,
.nav-sections .navigation .megamenu [class*="col-"] {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Drawer footer */
.drawer-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 20px !important;
    padding: 20px 24px !important;
    border-top: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

.drawer-footer a {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.drawer-footer a:hover {
    color: #333 !important;
}

/* Right panel content */
.drawer-right-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 22px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
}

.drawer-back {
    background: none !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 20px !important;
    color: #555 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.drawer-back:hover {
    border-color: #555 !important;
    color: #111 !important;
}

.drawer-right-title {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #111 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.drawer-right-title:hover {
    color: #555 !important;
}

.drawer-right-body {
    padding: 16px 20px !important;
    flex: 1 !important;
}

.drawer-subcats-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    color: #aaa !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    font-family: Arial, sans-serif !important;
}

.drawer-subcat-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.drawer-subcat-item {
    border: none !important;
    padding: 0 !important;
    display: block !important;
}

.drawer-subcat-item a {
    display: block !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #222 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: none !important;
}

.drawer-subcat-item a:hover {
    color: #666 !important;
}

/* 4. FOOTER — white minimal layout */

/* Reset Porto's dark footer */
.page-footer,
.page-footer .footer,
.eligar-footer {
    background: #fff !important;
    color: #333 !important;
    border-top: 1px solid #e8e8e8 !important;
    padding: 0 !important;
}

/* Newsletter strip */
.footer-newsletter {
    background: #f7f7f7;
    border-bottom: 1px solid #e8e8e8;
    padding: 40px 30px;
}

.footer-newsletter__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-newsletter__title {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 0 0 4px;
    letter-spacing: 0;
}

.footer-newsletter__sub {
    font-size: 13px;
    color: #777;
    margin: 0;
}

.footer-newsletter__form {
    display: flex;
    gap: 0;
    flex: 1;
    max-width: 440px;
    min-width: 260px;
    position: relative;
}

.footer-newsletter__form div.mage-error {
    position: absolute !important;
    bottom: -20px !important;
    left: 0 !important;
    font-size: 11px !important;
    color: #c0392b !important;
    white-space: nowrap !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-newsletter__input {
    flex: 1;
    border: 1px solid #d0d0d0 !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    color: #222 !important;
    background: #fff !important;
    outline: none !important;
}

.footer-newsletter__input:focus {
    border-color: #999 !important;
}

.footer-newsletter__btn {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid #222 !important;
    border-radius: 0 !important;
    padding: 11px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
}

.footer-newsletter__btn:hover {
    background: #444 !important;
    border-color: #444 !important;
}

/* Footer body — 4 columns */
.footer-body {
    padding: 48px 30px;
}

.footer-body__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 160px;
}

.footer-col--brand {
    flex: 1.2;
}

.footer-logo__img {
    height: 60px !important;
    width: auto !important;
    filter: brightness(0) !important;
    margin-bottom: 12px;
    display: block;
}

.footer-tagline {
    font-size: 12px;
    color: #999;
    margin: 0 0 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-phone {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    margin-top: 4px;
}

.footer-phone:hover {
    color: #555;
}

.footer-col__heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 16px;
}

.footer-col__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col__links li {
    margin-bottom: 10px;
}

.footer-col__links a {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: color 0.15s;
}

.footer-col__links a:hover {
    color: #111;
}

.footer-address {
    font-style: normal;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0 0 10px;
}

.footer-email {
    font-size: 14px;
    color: #555;
    text-decoration: none;
}

.footer-email:hover {
    color: #111;
}

/* Footer bottom bar */
.footer-bottom,
.page-footer .footer-bottom {
    background: #fff !important;
    border-top: 1px solid #e8e8e8 !important;
    padding: 16px 30px !important;
}

.footer-bottom__inner {
    max-width: 1300px;
    margin: 0 auto;
}

.footer-copyright {
    font-size: 12px;
    color: #aaa;
    margin: 0;
}

/* Mobile footer */
@media (max-width: 768px) {
    .footer-newsletter__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-newsletter__form {
        width: 100%;
        max-width: 100%;
    }

    .footer-body__inner {
        flex-direction: column;
        gap: 28px;
    }

    .footer-col {
        min-width: 0;
    }
}

/* 5. GLOBAL TYPOGRAPHY — body, headings, links, buttons */

/* Body */
body {
    color: #333 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased !important;
}

p {
    color: #333;
    line-height: 1.7;
    margin-bottom: 1em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #111 !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

h1 { font-size: 28px !important; margin-bottom: 16px !important; }
h2 { font-size: 22px !important; margin-bottom: 14px !important; }
h3 { font-size: 18px !important; margin-bottom: 12px !important; }
h4 { font-size: 15px !important; margin-bottom: 10px !important; }
h5, h6 { font-size: 13px !important; margin-bottom: 8px !important; }

/* Global links */
a {
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

a:hover,
a:focus {
    color: #888 !important;
    text-decoration: none !important;
}

/* Suppress Porto's orange/gold accent color on links and interactive elements */
.action.primary,
button.action.primary,
a.action.primary,
.btn-primary,
.button {
    background: #222 !important;
    border-color: #222 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.action.primary:hover,
button.action.primary:hover,
a.action.primary:hover,
.btn-primary:hover,
.button:hover {
    background: #444 !important;
    border-color: #444 !important;
    color: #fff !important;
}

/* Remove Porto's yellow/orange accents on breadcrumbs, price, badges */
.breadcrumb a,
.breadcrumbs a,
.breadcrumbs li a {
    color: #555 !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: #111 !important;
}

/* Price */
.price,
.price-box .price,
.product-info-price .price,
.price-container .price {
    color: #111 !important;
    font-weight: 600 !important;
}

.catalog-product-view .product-info-price .price {
    font-size: 3rem !important;
}

.catalog-product-view .box-tocart .action.tocart {
    height: 48px !important;
    line-height: 48px !important;
}

.catalog-product-view .box-tocart .field.qty .control,
.catalog-product-view .box-tocart .input-text.qty,
.catalog-product-view .box-tocart .qty-changer,
.catalog-product-view .box-tocart .qty-changer a,
.catalog-product-view .box-tocart .qty-changer button {
    height: 48px !important;
    line-height: 48px !important;
}

.old-price .price,
.price-box .old-price .price {
    color: #aaa !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

/* Product title on cards */
.product-item-name a,
.product-item .product-item-name a {
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.product-item-name a:hover {
    color: #666 !important;
}

/* Category page heading */
.page-title-wrapper .page-title,
.page-products .page-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #111 !important;
    letter-spacing: -0.01em !important;
}

/* Toolbar — sort/filter text */
.toolbar-sorter label,
.toolbar .label,
.toolbar-amount {
    color: #555 !important;
    font-size: 13px !important;
}

/* Form inputs — global */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
    border: 1px solid #d0d0d0 !important;
    border-radius: 0 !important;
    color: #222 !important;
    font-size: 14px !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: #999 !important;
}

/* Form labels */
label,
.label {
    color: #444 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Remove Porto orange highlight on active/selected states */
.filter-options-item.active .filter-options-title,
.filter-options-title:hover {
    color: #222 !important;
}

.filter-current .item a,
.filter-current .item span {
    color: #333 !important;
}

.filter-actions a {
    color: #555 !important;
}

/* Section/page padding normalization */
.column.main,
.page-main {
    padding-top: 0 !important;
}

/* CMS page text blocks */
.cms-page-view .page-main p,
.cms-index-index .page-main p {
    color: #333;
    line-height: 1.7;
    font-size: 14px;
}

/* 6. CATEGORY PAGE — breadcrumbs, layered nav, toolbar, product grid */

/* --- Breadcrumbs bar --- */
.breadcrumbs {
    background: #fff !important;
    padding: 11px 30px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
}

.breadcrumbs .items {
    font-size: 12px !important;
    color: #bbb !important;
}

.breadcrumbs .item {
    color: #bbb !important;
}

.breadcrumbs a,
.breadcrumbs .item a {
    color: #999 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

.breadcrumbs a:hover {
    color: #333 !important;
}

.breadcrumbs strong,
.breadcrumbs .item:last-child strong {
    color: #444 !important;
    font-weight: 400 !important;
}

/* Porto breadcrumb separator arrows */
.breadcrumbs .item:not(:first-child)::before {
    color: #ccc !important;
}

/* --- Category page title --- */
.page-products .page-title-wrapper .page-title span,
.page-products .page-title-wrapper .base {
    color: #111 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* --- Layered navigation sidebar --- */

/* "Продукція за" block title */
.sidebar-main .block.filter .block-title.filter-title {
    background: none !important;
    border: none !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
}

.sidebar-main .block.filter .block-title.filter-title strong {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    background: none !important;
    border: none !important;
    padding: 0 0 14px !important;
    display: block !important;
    cursor: default !important;
}

/* "Варіанти товарів" subtitle */
.sidebar-main .block-subtitle.filter-subtitle {
    font-size: 10px !important;
    color: #aaa !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: block !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
}

/* Filter group section headers (ЦІНА, КОЛІР КОРПУСУ, тощо) */
.filter-options-item .filter-options-title,
.filter-options .filter-options-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 16px 0 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.filter-options-title::after,
.filter-options-title::before {
    display: none !important;
}

.filter-options-title .toggle {
    display: none !important;
}

/* Filter content padding */
.filter-options-content {
    padding: 0 0 8px !important;
}

/* Filter item links */
.filter-options-content .items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.filter-options-content .item {
    margin: 0 !important;
    padding: 0 !important;
}

.filter-options-content .item a,
.filter-options-content a {
    font-size: 13px !important;
    color: #444 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border: none !important;
    background: none !important;
    transition: color 0.15s !important;
    line-height: 1.4 !important;
}

.filter-options-content a:hover {
    color: #111 !important;
}

/* Count badge next to filter item */
.filter-options-content .count {
    color: #ccc !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

/* Remove Porto's checkbox-style filter decorations */
.filter-options-content .item a::before,
.filter-options-content .item a::after {
    display: none !important;
}

/* Current active filters */
.filter-current .item {
    font-size: 13px !important;
    color: #333 !important;
    padding: 4px 0 !important;
}

.filter-current .action.remove {
    color: #bbb !important;
    font-size: 11px !important;
}

.filter-current .action.remove:hover {
    color: #c0392b !important;
}

/* Price range slider area */
.filter-options-content .range.price {
    padding: 4px 0 12px !important;
}

/* Sidebar block generic cleanup */
.sidebar-main .block {
    margin-bottom: 0 !important;
}

/* --- Toolbar --- */
.toolbar.toolbar-products {
    display: flex !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    background: none !important;
    box-shadow: none !important;
}

/* Filters toggle button — hide on desktop (sidebar always visible), show on tablet/mobile */
@media (min-width: 992px) {
    .page-products .porto-product-filters-toggle {
        display: none !important;
    }
}

/* Sort wrapper */
.toolbar-sorter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Sort label */
.toolbar-sorter .sorter-label {
    font-size: 12px !important;
    color: #aaa !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* Sort dropdown — borderless underline style */
.toolbar-sorter .sorter-options {
    font-size: 13px !important;
    color: #333 !important;
    border: none !important;
    border-bottom: 1.5px solid #ddd !important;
    border-radius: 0 !important;
    padding: 3px 4px 3px 2px !important;
    background: transparent !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

.toolbar-sorter .sorter-options:focus {
    border-bottom-color: #888 !important;
}

/* Sort direction arrow */
.toolbar-sorter .sorter-action {
    color: #bbb !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.toolbar-sorter .sorter-action:hover {
    color: #333 !important;
}

/* Items count "1–12 з 25" */
.toolbar-products .toolbar-amount {
    font-size: 12px !important;
    color: #bbb !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Pagination in toolbar */
.toolbar-products .pages {
    margin: 0 !important;
}

.toolbar-products .pages-label {
    display: none !important;
}

.toolbar-products .pages-items {
    display: flex !important;
    gap: 3px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.toolbar-products .pages-items .item a,
.toolbar-products .pages-items .item strong.page {
    min-width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    border: 1px solid #e8e8e8 !important;
    color: #666 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 0 8px !important;
}

.toolbar-products .pages-items .item.current strong.page {
    background: #222 !important;
    border-color: #222 !important;
    color: #fff !important;
}

.toolbar-products .pages-items .item a:hover {
    border-color: #999 !important;
    color: #222 !important;
}

/* --- Product grid cards (Porto type3 layout) --- */

/* Card wrapper */
.products-grid .product-item-info {
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-shadow: none !important;
}

.products-grid .product-item-info:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09) !important;
    transform: translateY(-2px) !important;
    border-color: #ddd !important;
}

/* Porto's inner section wrapper */
.products-grid .product-item-info > .porto-section {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Image container */
.products-grid .product-item-photo.product-image {
    display: block !important;
    background: #f7f7f7 !important;
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Porto image hover wrapper — square aspect ratio */
.products-grid .porto-tb-featured-image {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
}

/* Product images */
.products-grid .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: opacity 0.3s ease, transform 0.4s ease !important;
}

.products-grid .product-image-photo.default_image {
    opacity: 1 !important;
}

.products-grid .product-image-photo.hover_image {
    opacity: 0 !important;
}

.products-grid .product-item-info:hover .product-image-photo.default_image {
    opacity: 0 !important;
    transform: scale(1.04) !important;
}

.products-grid .product-item-info:hover .product-image-photo.hover_image {
    opacity: 1 !important;
    transform: scale(1.02) !important;
}

/* Actions overlay on image (wishlist / compare) */
.products-grid .product-item-inner {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    display: flex !important;
    gap: 6px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    z-index: 2 !important;
}

.products-grid .product-item-info:hover .product-item-inner {
    opacity: 1 !important;
}

/* Hide add-to-cart in overlay */
.products-grid .product-item-inner .actions-primary {
    display: none !important;
}

/* Wishlist icon */
.products-grid .action.towishlist.actions-secondary {
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #777 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    border: none !important;
    backdrop-filter: blur(2px) !important;
}

.products-grid .action.towishlist.actions-secondary:hover {
    color: #c0392b !important;
    background: #fff !important;
}

/* Hide compare button */
.products-grid .action.tocompare.actions-secondary {
    display: none !important;
}

/* Product details section */
.products-grid .product-item-details {
    padding: 12px 14px 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
}

/* Product name */
.products-grid .product-item-name {
    margin: 0 0 4px !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.products-grid .product-item-link {
    font-size: 13px !important;
    color: #222 !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.products-grid .product-item-link:hover {
    color: #666 !important;
}

/* Hide star ratings */
.products-grid .product-reviews-summary {
    display: none !important;
}

/* Price */
.products-grid .price-box {
    margin: auto 0 0 !important;
    padding-top: 8px !important;
}

.products-grid .price-box .price {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111 !important;
}

.products-grid .price-box .old-price .price {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #bbb !important;
    text-decoration: line-through !important;
}

.products-grid .price-box .special-price .price {
    color: #c0392b !important;
}

/* Product label/badge (NEW, SALE) */
.products-grid .product-label,
.products-grid .product-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 3 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: #222 !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
}

/* Grid item spacing */
.products-grid .product-items {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.products-grid .product-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 18px !important;
}

/* Показати (items-per-page limiter) */
.toolbar-products .field.limiter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

.toolbar-products .field.limiter .label,
.toolbar-products .field.limiter .label span {
    font-size: 12px !important;
    color: #aaa !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* Limiter dropdown — same underline style as sorter */
.toolbar-products .field.limiter .limiter-options {
    font-size: 13px !important;
    color: #333 !important;
    border: none !important;
    border-bottom: 1.5px solid #ddd !important;
    border-radius: 0 !important;
    padding: 3px 4px 3px 2px !important;
    background: transparent !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    min-width: 44px !important;
}

.toolbar-products .field.limiter .limiter-options:focus {
    border-bottom-color: #888 !important;
}

.toolbar-products .field.limiter .limiter-text {
    font-size: 12px !important;
    color: #bbb !important;
}

/* Hide the "Рекомендовані" custom block in sidebar (shows empty state) */
.sidebar-main .custom-block {
    display: none !important;
}

/* Sidebar — remove extra margin between filter groups */
.filter-options-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Porto's "+/-" toggle on filter section titles */
.filter-options-title .toggle,
.filter-options-item .filter-options-title::after {
    display: none !important;
}

/* Price range slider (jQuery UI / Mageplaza ln_slider) */
.filter-options-content .ln_slider_container {
    padding: 14px 6px 10px !important;
    margin: 0 !important;
}

.filter-options-content .ui-slider.ui-slider-horizontal {
    height: 3px !important;
    background: #e0e0e0 !important;
    border: none !important;
    border-radius: 2px !important;
    margin: 0 6px !important;
    cursor: default !important;
}

.filter-options-content .ui-slider .ui-slider-range {
    background: #333 !important;
    border-radius: 2px !important;
}

.filter-options-content .ui-slider .ui-slider-handle {
    width: 14px !important;
    height: 14px !important;
    background: #222 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px #bbb !important;
    border-radius: 50% !important;
    top: -6px !important;
    margin-left: -7px !important;
    cursor: pointer !important;
    outline: none !important;
}

.filter-options-content .ui-slider .ui-slider-handle:hover,
.filter-options-content .ui-slider .ui-slider-handle:focus {
    background: #444 !important;
    box-shadow: 0 0 0 1px #999 !important;
}

/* Price range label "2 600 ₴ - 9 800 ₴" */
.filter-options-content .ln_slider_container > div:last-child {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 10px !important;
}

/* Price range text inputs (Mageplaza) */
.filter-options-content .range-price-input {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    color: #333 !important;
    width: 80px !important;
}

/* Checkbox filter items (КОЛІР КОРПУСУ) */
.filter-options-content .item input[type="checkbox"] {
    accent-color: #222 !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* Mobile category page */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 10px 16px !important;
    }

    .toolbar.toolbar-products {
        padding: 10px 0 !important;
    }

    .toolbar-products .toolbar-amount {
        display: none !important;
    }
}

/* ================================================================
   LAYERED NAV — CATEGORY LIST BLOCK
   ================================================================ */

/* Section label above the category list */
.block-category-list {
    padding-bottom: 4px !important;
}

.block-category-list .block-title {
    display: block !important;
    padding: 0 0 10px !important;
    margin: 0 0 4px !important;
    border-bottom: 1px solid #efefef !important;
}

.block-category-list .block-title strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* Subcategory list reset */
.block-category-list .items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.block-category-list .item {
    padding: 0 !important;
    margin: 0 !important;
}

/* Subcategory links — include :link/:visited to override Porto's unvisited-link color */
.page-products .sidebar-main .block-category-list .item a,
.page-products .sidebar-main .block-category-list .item a:link,
.page-products .sidebar-main .block-category-list .item a:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
    color: #555 !important;
    text-decoration: none !important;
    padding: 5px 0 5px 10px !important;
    line-height: 1.4 !important;
    border-left: 2px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease !important;
    background: none !important;
    border-radius: 0 !important;
}

.page-products .sidebar-main .block-category-list .item a:hover {
    color: #111 !important;
    border-left-color: #bbb !important;
    padding-left: 14px !important;
}

/* ================================================================
   LAYERED NAV — FILTER BLOCK STRUCTURE
   ================================================================ */

/* Hide the "Продукція за" filter block title — redundant with category list above */
.sidebar-main .block.filter .block-title.filter-title {
    display: none !important;
}

/* "Варіанти товарів" subtitle — hide when empty (higher specificity to beat earlier rule) */
.sidebar-main .block-subtitle.filter-subtitle {
    display: none !important;
}

/* Force all filter sections expanded — Porto collapses sections without .active */
.page-products .sidebar-main .filter-options-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
}

/* Filter group section headers — override Porto's color with higher specificity */
.page-products .sidebar-main .filter-options-item .filter-options-title,
.page-products .sidebar-main .filter-options .filter-options-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid #efefef !important;
    padding: 18px 0 10px !important;
    margin: 0 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ================================================================
   LAYERED NAV — COLOR FILTER ITEMS (checkbox + link row)
   ================================================================ */

.filter-options-content .item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.filter-options-content .item input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #333 !important;
    appearance: auto !important;
}

.filter-options-content .item a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 !important;
    font-size: 13px !important;
    color: #444 !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    transition: color 0.15s !important;
    line-height: 1.4 !important;
}

.filter-options-content .item:hover a {
    color: #111 !important;
}

/* Count badge */
.filter-options-content .item .count {
    color: #ccc !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    flex-shrink: 0 !important;
}

/* Hide "items" text inside count badge */
.filter-options-content .filter-count-label {
    display: none !important;
}

/* ================================================================
   LAYERED NAV — PRICE RANGE FILTER
   ================================================================ */

/* Mageplaza renders 6 identical price range items; only the first has content */
.filter-options-item.active .filter-options-content .item:not(:first-child) {
    display: none !important;
}

/* Price range label "2 600 ₴ – 9 800 ₴" */
.filter-options-content .ln_slider_container > div:last-child {
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* ================================================================
   PRODUCT GRID — 4 COLUMNS PER ROW (override Porto 5-column default)
   ================================================================ */
@media (min-width: 992px) {
    .page-products .products-grid .product-item {
        width: 25% !important;
        clear: none !important;
    }
    .page-products .products-grid .product-item.nth-child-4np1 {
        clear: left !important;
    }
}

/* ================================================================
   PRODUCT TILE REDESIGN — card style
   ================================================================ */

/* Outer list item: give it padding so cards have breathing room */
.page-products .products-grid .product-item {
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* Card */
.page-products .products-grid .product-item-info {
    border: 0.8px solid #d4d4d4 !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
    background: #fff !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Card hover lift */
.page-products .products-grid .product-item-info:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
    border-color: #bbb !important;
    transform: translateY(-4px) !important;
}

/* Image wrapper: remove the 10px left margin Porto adds, remove gray bg */
.page-products .products-grid .product-item-photo {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

/* Feature image container */
.page-products .products-grid .porto-tb-featured-image {
    border-radius: 0 !important;
}

/* Product image fills full card width */
.page-products .products-grid .product-image-photo {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Disable Porto's hover-image swap — keep default image visible, hide empty hover placeholder */
.page-products .products-grid .porto-tb-featured-image .product-image-photo.hover_image {
    display: none !important;
}
.page-products .products-grid .porto-tb-featured-image:hover .product-image-photo.default_image,
.page-products .products-grid .porto-tb-featured-image .product-image-photo.default_image {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Content area */
.page-products .products-grid .product-item-details {
    padding: 12px 14px 14px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
}

/* SKU line below product name */
.page-products .products-grid .product-item-sku {
    font-size: 11px !important;
    color: #aaa !important;
    font-weight: 400 !important;
    margin: 2px 0 6px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Product name: 2-line clamp */
.page-products .products-grid .product-item-name {
    padding: 0 !important;
    margin: 0 0 2px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.page-products .products-grid .product-item-link {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: 13px !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    min-height: 36px !important;
}
.page-products .products-grid .product-item-link:hover {
    color: #111 !important;
    text-decoration: none !important;
}

/* Rating */
.page-products .products-grid .product-reviews-summary {
    margin: 0 0 6px !important;
}

/* Price + cart row — pushed to bottom of flex card */
.page-products .products-grid .price-cart-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: auto 0 0 !important;
}
.page-products .products-grid .price-box {
    padding: 0 !important;
    margin: 0 !important;
}

/* Add-to-cart icon button */
.page-products .products-grid .tile-cart-form {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.page-products .products-grid .tile-tocart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #111 !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.15s !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.page-products .products-grid .tile-tocart:hover {
    background: #333 !important;
}
.page-products .products-grid .tile-tocart span {
    display: none !important;
}
.page-products .products-grid .tile-tocart::before {
    content: '' !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}
.page-products .products-grid .price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
    letter-spacing: -0.01em !important;
}

/* Wishlist heart — always visible, pinned to bottom-right of image */
.page-products .products-grid .product-item-inner {
    opacity: 1 !important;
    background: transparent !important;
}
.page-products .products-grid .action.towishlist {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
    transition: background 0.15s !important;
}
.page-products .products-grid .action.towishlist:hover {
    background: #fff !important;
}

/* Hide compare link */
.page-products .products-grid .action.tocompare {
    display: none !important;
}

/* Porto product label (NEW badge) */
.page-products .products-grid .product-label,
.page-products .products-grid .porto-label {
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 3px 9px !important;
}

/* ================================================================
   PRODUCT GRID — TABLET: 3 COLUMNS
   ================================================================ */
@media (min-width: 576px) and (max-width: 991px) {
    .page-products .products-grid .product-item {
        width: 33.3333% !important;
    }
    .page-products .products-grid .product-item.nth-child-4np1 {
        clear: none !important;
    }
    .page-products .products-grid .product-item.nth-child-3np1 {
        clear: left !important;
    }
}

/* ================================================================
   PRODUCT GRID — MOBILE: 2 COLUMNS
   ================================================================ */
@media (max-width: 575px) {
    .page-products .products-grid .product-item {
        width: 50% !important;
        clear: none !important;
    }
    .page-products .products-grid .product-item.nth-child-2np1 {
        clear: left !important;
    }
}

/* ================================================================
   PDP — ХАРАКТЕРИСТИКИ (product specs in right column)
   ================================================================ */

/* Wrapper */
.pdp-specs {
    margin-top: 24px;
    border-top: 1px solid #e8e8e8;
    padding-top: 20px;
}

/* Section heading */
.pdp-specs__heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    margin: 0 0 14px !important;
    line-height: 1.4 !important;
}

/* Two-column table */
.pdp-specs__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.pdp-specs__row {
    border-bottom: 1px solid #f0f0f0;
}

.pdp-specs__row:last-child {
    border-bottom: none;
}

.pdp-specs__label {
    width: 44%;
    padding: 8px 12px 8px 0;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #888 !important;
    vertical-align: top;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.pdp-specs__value {
    padding: 8px 0 8px 12px;
    font-size: 13px !important;
    color: #222 !important;
    font-weight: 400 !important;
    vertical-align: top;
    text-align: left;
    word-break: break-word;
    border-left: 1px solid #f0f0f0;
}

/* Hide the default "additional-attributes-wrapper" table title
   (the <caption> Magento adds) — we already show our own heading */
.pdp-specs .table-caption {
    display: none !important;
}

/* Suppress the old standalone "More Information" tab section when it is
   empty because we removed product.attributes from the group. */
.product.info.detailed .data.item[id="additional"] {
    display: none !important;
}

/* Mobile: stack label / value */
@media (max-width: 575px) {
    .pdp-specs__table,
    .pdp-specs__table tbody,
    .pdp-specs__row,
    .pdp-specs__label,
    .pdp-specs__value {
        display: block !important;
        width: 100% !important;
    }

    .pdp-specs__label {
        padding: 8px 0 2px !important;
        border-left: none !important;
    }

    .pdp-specs__value {
        padding: 0 0 8px !important;
        border-left: none !important;
    }

    .pdp-specs__row {
        margin-bottom: 4px;
    }
}

/* ================================================================
   TABLET FILTER PANEL (< 992px)
   ================================================================ */
@media (max-width: 991px) {

    /* Filter toggle button — visible, styled as a pill button */
    .page-products .porto-product-filters-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px 6px 10px !important;
        border: 1px solid #d4d4d4 !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #222 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        height: auto !important;
        transition: border-color 0.15s, background 0.15s !important;
        cursor: pointer !important;
    }
    .page-products .porto-product-filters-toggle:hover {
        border-color: #999 !important;
        background: #f8f8f8 !important;
        color: #111 !important;
    }
    .page-products .porto-product-filters-toggle svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }

    /* Sidebar: slide-in panel from left, hidden by default */
    .page-products .columns .sidebar-main.mobile-sidebar {
        position: fixed !important;
        top: 89px !important;
        left: -290px !important;
        width: 280px !important;
        height: calc(100vh - 89px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10000 !important;
        background: #fff !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
        padding: 24px 20px !important;
        transition: left 0.3s ease !important;
        display: block !important;
    }

    /* Sidebar visible when toggle is active */
    html.sidebar-opened .page-products .columns .sidebar-main.mobile-sidebar {
        left: 0 !important;
    }

    /* Dim overlay behind the panel */
    .sidebar-overlay {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        z-index: 9999 !important;
        cursor: pointer !important;
    }
    .sidebar-overlay.active {
        display: block !important;
    }

    /* Ensure toolbar shows filter button alongside sort/limiter */
    .page-products .toolbar.toolbar-products {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    /* Remove Porto's 60px top padding on .columns — sidebar is a slide-in panel on tablet/mobile */
    .page-products .columns {
        padding-top: 0 !important;
    }

    /* Reduce page-main bottom padding — 40px default leaves too much space before product grid */
    .page-products .page-main {
        padding-bottom: 8px !important;
    }

    /* Sticky toolbar: white background + shadow so products don't bleed through */
    .toolbar.toolbar-products.sticky {
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   PDP — GALLERY WIDTH 680px (desktop only)
   ================================================================ */
@media (min-width: 992px) {
    .catalog-product-view .product.media {
        width: 680px !important;
    }
    .catalog-product-view .product-info-main {
        width: calc(100% - 680px) !important;
        max-width: calc(100% - 680px) !important;
        padding-left: 40px !important;
    }
}

/* ================================================================
   PDP — GALLERY ROUNDED CORNERS (15px, matching linef.com.ua)
   ================================================================ */

/* Main image stage */
.catalog-product-view .fotorama__stage {
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Individual stage frames (needed for fotorama's internal clipping) */
.catalog-product-view .fotorama__stage__frame {
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Thumbnails */
.catalog-product-view .fotorama__thumb {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.catalog-product-view .fotorama__nav__frame {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Outer wrappers — clip bottom corners of the stage */
.catalog-product-view .gallery-placeholder,
.catalog-product-view .fotorama__wrap {
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Active thumbnail border — thin + rounded */
.catalog-product-view .fotorama__thumb-border {
    border-width: 1px !important;
    border-radius: 10px !important;
}

/* PDP tabs — clear floated product columns, span full width */
.catalog-product-view .page-main-inner > .eligar-product-tabs {
    clear: both;
    width: 100%;
    margin-top: 40px;
}

/* Review form legend — replace Magento default blue with site palette */
.eligar-product-tabs .review-legend span,
.eligar-product-tabs .review-legend strong,
.eligar-product-tabs .review-legend a,
.eligar-product-tabs .review-legend a:visited {
    color: #222529;
}

/* ================================================================
   RELATED PRODUCTS (Схожі товари) — matches category tile style
   ================================================================ */

.catalog-product-view .eligar-related-products {
    clear: both;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 30px;
}

.catalog-product-view .eligar-related-products .section-title h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Card */
.catalog-product-view .eligar-related-products .product-item-info {
    border: 0.8px solid #d4d4d4;
    border-radius: 25px;
    box-shadow: none;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 0 5px;
    position: relative;
}

.catalog-product-view .eligar-related-products .product-item-info:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    border-color: #bbb;
    transform: translateY(-4px);
}

/* Image */
.catalog-product-view .eligar-related-products .product-item-photo {
    margin: 0;
    padding: 0;
    background: transparent;
    flex-shrink: 0;
}

.catalog-product-view .eligar-related-products .porto-tb-featured-image {
    position: relative !important;
    border-radius: 0;
}

.catalog-product-view .eligar-related-products .product-image-photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* Porto JS sets display inline on hover images — must use !important */
.catalog-product-view .eligar-related-products .product-image-photo.hover_image {
    display: none !important;
}

/* Details area */
.catalog-product-view .eligar-related-products .product-item-details {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* SKU */
.catalog-product-view .eligar-related-products .product-item-sku {
    font-size: 11px;
    color: #aaa;
    font-weight: 400;
    margin: 2px 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Product name */
.catalog-product-view .eligar-related-products .product-item-name {
    padding: 0;
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.4;
}

.catalog-product-view .eligar-related-products .product-item-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    min-height: 36px;
}

.catalog-product-view .eligar-related-products .product-item-link:hover {
    color: #111;
    text-decoration: none;
}

/* Rating */
.catalog-product-view .eligar-related-products .product-reviews-summary {
    margin: 0 0 6px;
}

/* Price + cart row — pushed to bottom */
.catalog-product-view .eligar-related-products .price-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: auto 0 0;
}

.catalog-product-view .eligar-related-products .price-box {
    padding: 0;
    margin: 0;
}

.catalog-product-view .eligar-related-products .price {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
}

/* Circular add-to-cart button — .tile-* are custom classes, no Porto conflict */
.catalog-product-view .eligar-related-products .tile-cart-form {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.catalog-product-view .eligar-related-products .tile-tocart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #111;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.catalog-product-view .eligar-related-products .tile-tocart:hover {
    background: #333;
}

.catalog-product-view .eligar-related-products .tile-tocart span {
    display: none;
}

.catalog-product-view .eligar-related-products .tile-tocart::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Mirror the category-page pin: zero-size anchor at bottom-right of image, always visible. */
.catalog-product-view .eligar-related-products .product-item-inner {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 1 !important;
    display: flex !important;
}

/*
 * Porto type3 rule (.product-item-info.type3 .product-item-actions .towishlist)
 * has specificity 0,4,0 and sets position:absolute;bottom:-44px;background:0 0;width:20px.
 * We beat it with !important on the conflicting properties only.
 */
.catalog-product-view .eligar-related-products .action.towishlist {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(255,255,255,0.88) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
    transition: background 0.15s !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
}

.catalog-product-view .eligar-related-products .action.towishlist:hover {
    background: #fff !important;
}

/* Heart icon — porto-icons \e889, same glyph as category grid */
.catalog-product-view .eligar-related-products .action.towishlist::before {
    font-family: 'porto-icons' !important;
    content: '\e889' !important;
    font-size: 13px !important;
    color: #666 !important;
    display: block !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal !important;
    top: 8px;
    left: 9px;
}

/* Hide compare */
.catalog-product-view .eligar-related-products .action.tocompare {
    display: none;
}

.catalog-product-view .eligar-related-products .porto-section.p-0 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* OwlCarousel nav arrows — circular buttons at image-area edges */
.catalog-product-view .eligar-related-products .owl-carousel {
    position: relative;
}

.catalog-product-view .eligar-related-products .owl-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58%;
    pointer-events: none;
    margin: 0;
}

/*
 * Use button.owl-prev / button.owl-next (specificity 0,4,1) to beat
 * OwlCarousel's own reset rule (.owl-carousel .owl-nav button.owl-prev = 0,3,1).
 * position/top/left/right use !important as fallback against Porto's
 * .porto-tb-item scoped rules that may also style these buttons.
 */
.catalog-product-view .eligar-related-products .owl-nav button.owl-prev,
.catalog-product-view .eligar-related-products .owl-nav button.owl-next {
    pointer-events: all;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid #d4d4d4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    z-index: 10;
    backdrop-filter: blur(2px);
    transition: background 0.15s, box-shadow 0.15s;
}

.catalog-product-view .eligar-related-products .owl-nav button.owl-prev:hover,
.catalog-product-view .eligar-related-products .owl-nav button.owl-next:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

.catalog-product-view .eligar-related-products .owl-nav button.owl-prev {
    left: 6px !important;
    right: auto !important;
}

.catalog-product-view .eligar-related-products .owl-nav button.owl-next {
    right: 6px !important;
    left: auto !important;
}

.catalog-product-view .eligar-related-products .owl-carousel .owl-nav .owl-prev:before,
.catalog-product-view .eligar-related-products .owl-carousel .owl-nav .owl-next:before {
    width: 25px;
    height: 25px;
    color: #000;
}

/* PDP mobile — restore horizontal padding stripped by fullwidth layout rule */
@media (max-width: 768px) {
    .catalog-product-view .product-info-main {
        padding-left: 15px;
        padding-right: 15px;
    }

    .catalog-product-view .eligar-product-tabs {
        padding-left: 15px;
        padding-right: 15px;
    }

    .catalog-product-view .eligar-related-products .section-title {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* =============================================
   CHECKOUT — linef.com.ua style facelift
   ============================================= */

/* Hide page H1 + top progress bar — Linef has no step nav */
.checkout-index-index .page-title-wrapper,
.checkout-index-index .opc-progress-bar {
    display: none !important;
}

.checkout-index-index .page-main {
    padding-top: 30px;
}

/* Section titles — UPPERCASE, letter-spaced, no numeric circle */
.checkout-index-index .opc-wrapper .step-title,
.checkout-index-index .opc-block-summary > .title {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: #222 !important;
    border: none !important;
    padding: 0 0 22px 0 !important;
    margin: 0 0 18px 0 !important;
    display: block !important;
}

.checkout-index-index .opc-wrapper .step-title::before,
.checkout-index-index .opc-block-summary > .title::before {
    content: none !important;
    display: none !important;
}

/* Hide the numeric circle ".title-number" rendered by Iosc */
.checkout-index-index .step-title .title-number,
.checkout-index-index .opc-block-summary > .title .title-number {
    display: none !important;
}

/* The "Всього" title also has a check icon via ::after on a span — kill any prefix glyph */
.checkout-index-index .opc-block-summary > .title > span:first-child {
    display: none !important;
}

/* Remove framed boxes around sections */
.checkout-index-index .opc-wrapper > li.checkout-shipping-address,
.checkout-index-index .opc-wrapper > li.checkout-shipping-method,
.checkout-index-index .opc-wrapper > li.checkout-payment-method {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
}

/* Align first content element in both columns to the same vertical position */
.checkout-index-index .opc-wrapper .form-shipping-address,
.checkout-index-index .opc-wrapper .form.methods-shipping {
    margin-top: 0 !important;
}

/* Remove the inner card boxes around each step's content */
.checkout-index-index .opc-wrapper .step-content,
.checkout-index-index .opc-wrapper .form.methods-shipping,
.checkout-index-index .checkout-payment-method .payment-methods,
.checkout-index-index .checkout-payment-method .opc-payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Push shipping dropdown down to align with the email input.
   Must come AFTER the padding:0 block above to win the cascade. */
.checkout-index-index .opc-wrapper .form.methods-shipping {
    padding-top: 30px !important;
}

/* Hide "У мене інша платіжна адреса" — billing always mirrors shipping */
.checkout-index-index .checkout-shipping-address .billing-address-same-as-shipping-block {
    display: none !important;
}

/* Checkout KO validation error messages */
.checkout-index-index .field-error {
    color: #e02b27;
    font-size: 11px;
    line-height: 1.3;
    margin-top: 4px;
}

/* Form inputs — rounded, bordered, Linef-style */
.checkout-index-index .opc-wrapper input[type="text"],
.checkout-index-index .opc-wrapper input[type="email"],
.checkout-index-index .opc-wrapper input[type="tel"],
.checkout-index-index .opc-wrapper input[type="number"],
.checkout-index-index .opc-wrapper input[type="password"],
.checkout-index-index .opc-wrapper select,
.checkout-index-index .opc-wrapper textarea {
    height: 46px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #222 !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.checkout-index-index .opc-wrapper input:focus,
.checkout-index-index .opc-wrapper select:focus,
.checkout-index-index .opc-wrapper textarea:focus {
    border-color: #222 !important;
    outline: none !important;
}

.checkout-index-index .opc-wrapper input::placeholder {
    color: #aaa;
}

.checkout-index-index .opc-wrapper textarea {
    height: auto !important;
    min-height: 84px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    resize: vertical;
}

/* Labels above inputs — small + muted */
.checkout-index-index .opc-wrapper .field > .label,
.checkout-index-index .opc-wrapper .field label.label {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #888 !important;
    margin-bottom: 6px !important;
    padding-left: 4px !important;
}

.checkout-index-index .opc-wrapper ._required > .label::after,
.checkout-index-index .opc-wrapper .required > .label::after {
    color: #c00;
    margin-left: 2px;
}

.checkout-index-index .opc-wrapper .field {
    margin-bottom: 14px !important;
}

/* The shipping-method radio rows and payment-method radio cards are replaced
   by custom dropdowns (Magento_Checkout/js/method-dropdowns.js). Hide the
   originals visually but keep them in the DOM so KO bindings, address
   sub-forms, and Iosc validation keep working.

   - Shipping: hide only `<tr>`s that contain a radio button. The address
     sub-form rows (no radio inside) stay visible.
   - Payment: hide only `.payment-method` cards; the `.payment-group` wrapper
     stays so the `.step-title` heading still renders. */
.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(input[type="radio"]),
.checkout-index-index .checkout-payment-method .payment-group > .payment-method {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Also hide the shipping table headers (Select Method / Ціна / Carrier) */
.checkout-index-index .table-checkout-shipping-method thead {
    display: none !important;
}

/* Eligar custom payment dropdown — rich (title + description) panel */
.checkout-index-index .eligar-payment-dropdown {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.checkout-index-index .eligar-payment-dropdown-trigger {
    width: 100%;
    height: 46px;
    padding: 0 38px 0 16px;
    font-size: 14px;
    color: #222;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    text-align: left;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: border-color 0.2s ease;
}

.checkout-index-index .eligar-payment-dropdown-trigger:focus,
.checkout-index-index .eligar-payment-dropdown.open .eligar-payment-dropdown-trigger {
    outline: none;
    border-color: #222;
}

.checkout-index-index .eligar-payment-dropdown-trigger[data-empty="1"] {
    color: #aaa;
}

.checkout-index-index .eligar-payment-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    padding: 8px;
    display: none;
    z-index: 50;
}

.checkout-index-index .eligar-payment-dropdown.open .eligar-payment-dropdown-panel {
    display: block;
}

.checkout-index-index .eligar-payment-dropdown-option {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    padding: 16px 18px !important;
    margin: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    font: inherit;
    color: inherit;
}

.checkout-index-index .eligar-payment-dropdown-option + .eligar-payment-dropdown-option {
    margin-top: 4px;
}

.checkout-index-index .eligar-payment-dropdown-option:hover,
.checkout-index-index .eligar-payment-dropdown-option[aria-selected="true"] {
    background: #f6f6f6;
}

.checkout-index-index .eligar-payment-dropdown-option-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}

/* Description row: small info icon + descriptive text, matching Linef. */
.checkout-index-index .eligar-payment-dropdown-option-descrow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}

.checkout-index-index .eligar-payment-dropdown-option-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    background: #f7f7f7;
    color: #b88a6a;
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    margin-top: 1px;
}

.checkout-index-index .eligar-payment-dropdown-option-desc {
    display: block;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    flex: 1 1 auto;
}

/* Native dropdown styling — match Linef's rounded pill <select>s */
.checkout-index-index .eligar-method-select {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 38px 0 16px;
    font-size: 14px;
    color: #222;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    margin-bottom: 12px;
}

.checkout-index-index .eligar-method-select:focus {
    outline: none;
    border-color: #222;
}

/* Hide the Область (region) field for Нова Пошта (відділення) — Linef shows
   only Місто + Відділення for warehouse pickup. The region row appears inside
   the npwarehouse address sub-form (which is the <tr> immediately following
   the npwarehouse radio row). */
.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(input[value="npwarehouse_npwarehouse"]:checked) + tr.row .field:has(select[name="region_id_npwarehouse"]) {
    display: none !important;
}

.checkout-index-index .table-checkout-shipping-method tbody tr,
.checkout-index-index .checkout-payment-method .payment-method {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    margin: 0 0 8px 0 !important; /* override magento default -10px horizontal margin on shipping <tr> */
    padding: 12px 18px !important;
    transition: border-color 0.2s ease;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px;
    box-sizing: border-box !important;
}

.checkout-index-index .table-checkout-shipping-method tbody tr:hover,
.checkout-index-index .table-checkout-shipping-method tbody tr._active,
.checkout-index-index .checkout-payment-method .payment-method:hover,
.checkout-index-index .checkout-payment-method .payment-method._active {
    border-color: #222 !important;
}

.checkout-index-index .table-checkout-shipping-method tbody tr td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Column 1: radio button — fixed narrow */
.checkout-index-index .table-checkout-shipping-method tbody tr td.col-method:first-child {
    flex: 0 0 22px;
    width: 22px !important;
}

/* Hide price column — it's always 0,00 ₴ and adds no value */
.checkout-index-index .table-checkout-shipping-method tbody tr td.col-price {
    display: none !important;
}

/* Hide empty carrier column; show small muted text when populated */
.checkout-index-index .table-checkout-shipping-method tbody tr td.col-carrier {
    color: #888;
    font-size: 12px;
    flex: 0 0 auto;
}

.checkout-index-index .table-checkout-shipping-method tbody tr td.col-carrier:empty {
    display: none !important;
}

/* Method name — take all remaining width so the text doesn't wrap into a 80px column */
.checkout-index-index .table-checkout-shipping-method tbody tr td.col-method:last-child {
    flex: 1 1 auto;
    text-align: left;
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
}

/* Nova Poshta extra-address rows are rendered as <tr.row> siblings AFTER each
   method row, but the Iosc layout leaves them always visible. Hide them by
   default and only show the one whose preceding method radio is :checked.
   Targets form[id^="checkout-form-np"] which matches both npcourier and
   npwarehouse forms (the previous region_id selectors stopped matching the
   warehouse row after the region field was removed). */
.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(form[id^="checkout-form-np"]) {
    display: none !important;
}

.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(input[value="npcourier_npcourier"]:checked) + tr.row,
.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(input[value="npwarehouse_npwarehouse"]:checked) + tr.row {
    display: block !important;
    border: none !important;
    background: transparent !important;
    padding: 8px 0 0 0 !important;
    margin: 0 0 8px 0 !important;
}

/* Address-row cells stack vertically (labels + inputs) — clear flex sizing */
.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(input[value="npcourier_npcourier"]:checked) + tr.row td,
.checkout-index-index .table-checkout-shipping-method tbody tr.row:has(input[value="npwarehouse_npwarehouse"]:checked) + tr.row td {
    display: block !important;
    width: 100% !important;
    flex: none !important;
}

.checkout-index-index .checkout-payment-method .payment-method .payment-method-title {
    border: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}

/* Order summary block (right column) */
.checkout-index-index .opc-sidebar,
.checkout-index-index .opc-summary-wrapper {
    background: transparent !important;
}

.checkout-index-index .opc-block-summary {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cart items in summary — Linef-style card per item:
   rounded outline, big image left, name/price/qty-row right */

.checkout-index-index .opc-block-summary .minicart-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Magento default uses margin-right: -15px on .minicart-items-wrapper as a
   scrollbar gutter, which pushes the element 15px past its parent and causes
   horizontal page overflow at narrow viewports. Strip the negative margin and
   compensating padding so the wrapper stays within its parent's bounds. */
.checkout-index-index .opc-block-summary .minicart-items-wrapper {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.checkout-index-index .opc-block-summary .minicart-items .product-item {
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    border: 1px solid #ececec !important;
    border-radius: 14px !important;
    background: #fff !important;
    list-style: none !important;
    overflow: hidden !important; /* clip image's corners against the card's radius */
}

.checkout-index-index .opc-block-summary .minicart-items .product-item:last-child {
    margin-bottom: 0 !important;
}

/* .product is the row: image flush-left, details on the right */
.checkout-index-index .opc-block-summary .minicart-items .product-item .product {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
}

/* Image flush against the card's rounded left edge. Square aspect, fills card height. */
.checkout-index-index .opc-block-summary .product-image-container {
    flex: 0 0 170px !important;
    width: 170px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
    align-self: stretch !important;
    position: relative !important;
}

.checkout-index-index .opc-block-summary .product-image-wrapper {
    width: 170px !important;
    height: 100% !important;
    min-height: 170px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important; /* rounding done by card overflow:hidden */
}

.checkout-index-index .opc-block-summary .product-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    max-width: none !important;
}

/* Narrow desktop viewports (992-1199px): the summary column is only ~300-410px
   wide, so the default 170px product image crowds the name and overflows the
   card. Shrink the image to 110px to keep the card content readable. */
@media (min-width: 992px) and (max-width: 1199px) {
    .checkout-index-index .opc-block-summary .product-image-container,
    .checkout-index-index .opc-block-summary .product-image-wrapper {
        flex: 0 0 110px !important;
        width: 110px !important;
        min-height: 110px !important;
    }
}

/* Details column on the right — padded, top-aligned content, qty row at bottom */
.checkout-index-index .opc-block-summary .product-item-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

/* .product-item-inner is the flex container that stacks name + price at the top
   and pushes the qty/trash row to the bottom of the card (image height controls
   the card height; margin-top: auto on the qty row anchors it to the bottom).
   Column gap is 0 so the -/input/+ controls sit flush against each other as a
   single connected pill; spacing between rows comes from row-gap only. */
.checkout-index-index .opc-block-summary .product-item-details > .product-item-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

.checkout-index-index .opc-block-summary .product-item-name-block {
    flex: 0 0 100% !important;
    order: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Small SKU/Артикул line above the name (Linef pattern) */
.checkout-index-index .opc-block-summary .product-item-sku {
    font-size: 11px !important;
    color: #888 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

.checkout-index-index .opc-block-summary .product-item-sku-label {
    color: #aaa !important;
    margin-right: 2px !important;
}

.checkout-index-index .opc-block-summary .product-item-sku-value {
    color: #888 !important;
}

.checkout-index-index .opc-block-summary .product-item-name,
.checkout-index-index .opc-block-summary .product .name,
.checkout-index-index .opc-block-summary strong.product-item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.checkout-index-index .opc-block-summary .product-item-name-block > .details-qty {
    display: none !important;
}

.checkout-index-index .opc-block-summary .subtotal {
    flex: 0 0 100% !important;
    order: 2 !important;
    text-align: left !important;
    margin: 4px 0 8px 0 !important;
    padding: 0 !important;
    float: none !important;
}

.checkout-index-index .opc-block-summary .subtotal .price,
.checkout-index-index .opc-block-summary .subtotal .price-excluding-tax,
.checkout-index-index .opc-block-summary .subtotal .price-including-tax {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222 !important;
}

/* Unwrap .details-qty.visible and .qtybuttons so input/-/+/delete become
   direct flex children of .product-item-inner. Then order them on the row. */
.checkout-index-index .opc-block-summary .details-qty.visible,
.checkout-index-index .opc-block-summary .qtybuttons {
    display: contents !important;
}

.checkout-index-index .opc-block-summary .details-qty.visible .label {
    display: none !important;
}

/* Qty pill takes most of the right column's bottom row.
   Visual order on the bottom row:  [- ... 1 ... +]   ...   trash
   The pill is a wide rounded rectangle with - on the left edge, qty centered, + on the right edge.
   The trash icon sits separately to the right with a small gap. */
.checkout-index-index .opc-block-summary .qtybuttons .remove   { order: 10 !important; }
.checkout-index-index .opc-block-summary .details-qty.visible input.item-qty,
.checkout-index-index .opc-block-summary .details-qty.visible input.cart-item-qty { order: 11 !important; }
.checkout-index-index .opc-block-summary .qtybuttons .add      { order: 12 !important; }
.checkout-index-index .opc-block-summary .qtybuttons .delete   { order: 13 !important; margin-left: auto !important; }

/* Anchor the qty/trash row to the bottom of the card by giving the qty input
   margin-top: auto in the flex column. Because the row items are siblings via
   `display: contents` unwrapping, applying margin-top to the first ordered item
   (.remove) lifts the whole row to the bottom. */
.checkout-index-index .opc-block-summary .qtybuttons .remove {
    margin-top: auto !important;
}
.checkout-index-index .opc-block-summary .details-qty.visible input.item-qty,
.checkout-index-index .opc-block-summary .details-qty.visible input.cart-item-qty,
.checkout-index-index .opc-block-summary .qtybuttons .add,
.checkout-index-index .opc-block-summary .qtybuttons .delete {
    margin-top: auto !important;
}

/* The qty input — wider for breathing room around the number, matching Linef's
   roomier pill. - and + sit immediately to its left/right. */
.checkout-index-index .opc-block-summary .details-qty.visible input.item-qty,
.checkout-index-index .opc-block-summary .details-qty.visible input.cart-item-qty {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
    background: #fff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Zero the left/right margin on -/+ so nothing creates a gap with the input
   (keep margin-top: auto set earlier so the whole row stays at the card bottom). */
.checkout-index-index .opc-block-summary .qtybuttons .remove,
.checkout-index-index .opc-block-summary .qtybuttons .add {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Pill end caps - and + : circular outer edge, no inner border */
.checkout-index-index .opc-block-summary .qtybuttons .remove,
.checkout-index-index .opc-block-summary .qtybuttons .add {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: 1px solid #e0e0e0 !important;
    transition: color 0.15s ease, background 0.15s ease;
}

.checkout-index-index .opc-block-summary .qtybuttons .remove {
    border-radius: 999px 0 0 999px !important;
    border-right: none !important;
}

.checkout-index-index .opc-block-summary .qtybuttons .add {
    border-radius: 0 999px 999px 0 !important;
    border-left: none !important;
}

.checkout-index-index .opc-block-summary .qtybuttons .remove:hover,
.checkout-index-index .opc-block-summary .qtybuttons .add:hover {
    color: #222 !important;
    background: #f7f7f7 !important;
}

/* Trash button — separate icon to the right of the qty pill */
.checkout-index-index .opc-block-summary .qtybuttons .delete {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: none !important;
    transition: color 0.15s ease, background 0.15s ease;
}

.checkout-index-index .opc-block-summary .qtybuttons .delete:hover {
    background: #f4f4f4 !important;
    color: #c00 !important;
}

/* Replace the porto icon-font glyphs (filled circle icons) with clean
   plain minus/plus characters. Trash keeps the icon font but recoloured. */
.checkout-index-index .opc-block-summary .qtybuttons .remove::before,
.checkout-index-index .opc-block-summary .qtybuttons .add::before {
    content: none !important;
}

.checkout-index-index .opc-block-summary .qtybuttons .remove::after {
    content: '\2212' !important; /* − minus sign */
    font-family: inherit !important;
    font-size: 16px !important;
    color: #555 !important;
    line-height: 1 !important;
    display: inline-block;
}

.checkout-index-index .opc-block-summary .qtybuttons .add::after {
    content: '+' !important;
    font-family: inherit !important;
    font-size: 18px !important;
    color: #555 !important;
    line-height: 1 !important;
    display: inline-block;
}

.checkout-index-index .opc-block-summary .qtybuttons .delete::before {
    color: inherit !important;
    background: transparent !important;
}

/* Totals table — dotted leaders between label and amount.
   Override <tr>/<th>/<td> table layout to flex so we can put a dotted leader
   between the label and the amount that fills the gap fluidly. */
.checkout-index-index .opc-block-summary .table-totals {
    margin-top: 16px !important;
    border-top: 1px solid #ececec !important;
    padding-top: 14px !important;
    display: block !important;
    width: 100%;
}

.checkout-index-index .opc-block-summary .table-totals caption.table-caption {
    display: none !important;
}

.checkout-index-index .opc-block-summary .table-totals tbody {
    display: block !important;
    width: 100%;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr {
    display: flex !important;
    align-items: baseline !important;
    width: 100%;
    padding: 8px 0;
    gap: 8px;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr th,
.checkout-index-index .opc-block-summary .table-totals tbody tr td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #555 !important;
    display: block !important;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr th.mark {
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
    position: relative;
}

/* Dotted leader: a flex spacer between th and td */
.checkout-index-index .opc-block-summary .table-totals tbody tr th.mark::after {
    content: '';
    display: inline-block;
    width: 100%;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr::after {
    content: '';
    flex: 1 1 auto;
    height: 0;
    border-bottom: 1px dotted #ccc;
    transform: translateY(-4px);
    order: 0;
    margin: 0 4px;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr th.mark { order: -1; }
.checkout-index-index .opc-block-summary .table-totals tbody tr td.amount { order: 1; }

.checkout-index-index .opc-block-summary .table-totals tbody tr td.amount {
    text-align: right !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    color: #222 !important;
    flex: 0 0 auto;
}

/* Grand total — bigger, bolder, no dotted leader */
.checkout-index-index .opc-block-summary .table-totals tbody tr.grand.totals {
    padding-top: 16px !important;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr.grand.totals th,
.checkout-index-index .opc-block-summary .table-totals tbody tr.grand.totals td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.checkout-index-index .opc-block-summary .table-totals tbody tr.grand.totals::after {
    border-bottom-color: transparent !important;
}

/* Shipping totals row — the carrier name appears under "Доставка" as a small line */
.checkout-index-index .opc-block-summary .table-totals .totals.shipping .value {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    font-weight: 400;
}

/* Comment block */
.checkout-index-index #iosc-comment,
.checkout-index-index .iosc-comment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 22px !important;
}

.checkout-index-index .iosc-comment .iosc-comment-title {
    margin-bottom: 10px;
}

.checkout-index-index #iosc-comment-heading,
.checkout-index-index .iosc-comment .action-toggle {
    color: #222 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    text-decoration: none !important;
}

.checkout-index-index .iosc-newsletter,
.checkout-index-index #opc-newsletter {
    margin-top: 14px;
    font-size: 13px;
    color: #555;
}

/* Place-order button — pill, centered under summary */
.checkout-index-index .iosc-place-order-container {
    margin-top: 24px !important;
    text-align: center !important;
}

.checkout-index-index .iosc-place-order-button,
.checkout-index-index .iosc-place-order-container button.action.primary.checkout {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    padding: 18px 28px !important;
    background: #222 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.2s ease;
}

.checkout-index-index .iosc-place-order-button:hover,
.checkout-index-index .iosc-place-order-container button.action.primary.checkout:hover {
    background: #000 !important;
}

/* Billing-address toggle styling */
.checkout-index-index .checkout-billing-address,
.checkout-index-index .iosc-billing-checkbox {
    margin-top: 14px;
    font-size: 13px;
    color: #555;
}

/* Loading mask blends with bg */
.checkout-index-index .loading-mask {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* Compact left/middle columns (300px each) + wide right summary column.
   The default layout floats the shipping-address (left) and shipping-method /
   payment-method (right) inside `.opc-wrapper` at 50% each. Override widths,
   drop the float to flex so we can keep tight 300px columns. */
@media (min-width: 992px) {
    .checkout-index-index .opc-wrapper {
        width: 620px !important; /* 300 + 20 gap + 300 */
        float: none !important;
        margin: 0 !important;
    }

    .checkout-index-index .opc-wrapper .opc {
        display: grid !important;
        grid-template-columns: 300px 300px !important;
        grid-template-areas:
            "address shipping"
            "address payment" !important;
        gap: 0 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .checkout-index-index .opc-wrapper .opc > li.checkout-shipping-address {
        grid-area: address !important;
        float: none !important;
        margin: 0 !important;
        width: auto !important;
    }

    .checkout-index-index .opc-wrapper .opc > li.checkout-shipping-method {
        grid-area: shipping !important;
        float: none !important;
        margin: 0 !important;
        width: auto !important;
    }

    .checkout-index-index .opc-wrapper .opc > .checkout-payment-method,
    .checkout-index-index .opc-wrapper .opc > li.checkout-payment-method {
        grid-area: payment !important;
        float: none !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* The order summary (#iosc-summary) — fill the remaining space to the
       right of the form columns. flex-basis: 0 + min-width: 0 lets it shrink
       below its intrinsic min-content at narrow viewports (e.g. ~1300px) so
       the 3-column row holds instead of wrapping. */
    .checkout-index-index .checkout-container > div#iosc-summary,
    .checkout-index-index #iosc-summary {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin-left: 30px !important;
    }

    /* The checkout-container needs to align children in a row */
    .checkout-index-index .checkout-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .checkout-index-index .checkout-container > .messages,
    .checkout-index-index .checkout-container > .opc-progress-bar,
    .checkout-index-index .checkout-container > .opc-estimated-wrapper {
        flex: 0 0 100% !important;
    }

    /* Force flex order: form columns on the LEFT (order 1), summary on the
       RIGHT (order 2). The original theme sets `.opc-wrapper { order: 1 }`
       and the summary wrapper at `order: 0`, which would reverse the layout
       under our flex container. */
    .checkout-index-index .checkout-container > .opc-wrapper {
        order: 1 !important;
    }

    .checkout-index-index .checkout-container > div:not(.opc-wrapper):not(.messages):not(.opc-progress-bar):not(.opc-estimated-wrapper) {
        order: 2 !important;
        float: none !important;
    }

    /* Inside the address form, the Ім'я + Прізвище row was side-by-side at
       431px column width. At 300px we don't have horizontal room, so stack. */
    .checkout-index-index .opc-wrapper .field.iosc-half {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Below 992px: Magento's default floats opc-wrapper at 66.67% and the summary
   at 33.33%, but the product card's 170px image overflows that narrow column,
   causing horizontal scroll on the entire page. Stack the summary below the
   form columns instead, full-width and no side margin.
   The inner .opc list also has floated <li> children that collapse the parent
   to 0 height; use display: flow-root to contain them so the summary actually
   sits below the form content rather than overlapping it.
   Also adds 20px side padding to .page-main so content isn't edge-to-edge. */
@media (max-width: 991px) {
    .layout-fullwidth.checkout-index-index .page-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
    .checkout-index-index .opc-wrapper,
    .checkout-index-index .checkout-container > div#iosc-summary,
    .checkout-index-index #iosc-summary {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .checkout-index-index .checkout-container > div#iosc-summary,
    .checkout-index-index #iosc-summary {
        margin-top: 30px !important;
    }
    .checkout-index-index .opc-wrapper,
    .checkout-index-index .opc-wrapper .opc {
        display: flow-root !important;
    }
}

/* Nova Poshta city autocomplete dropdown — clean rounded results panel.
   Panel has no inner padding so the row separators span edge-to-edge; each
   row carries its own padding and a bottom border (suppressed on the last). */
.checkout-index-index .cities-list {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    padding: 0;
    max-height: 280px;
    overflow: hidden auto;
}

.checkout-index-index .cities-list:empty {
    display: none !important;
}

.checkout-index-index .cities-list ul,
.checkout-index-index .cities-list ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.checkout-index-index .cities-list ul,
.checkout-index-index .cities-list ol {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}

.checkout-index-index .cities-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    border-bottom: 1px solid #f0f0f0;
}

.checkout-index-index .cities-list li:last-child {
    border-bottom: none;
}

.checkout-index-index .cities-list li::marker {
    content: none !important;
}

.checkout-index-index .cities-list a,
.checkout-index-index .cities-list li > * {
    display: block;
    padding: 8px 14px;
    color: #222 !important;
    text-decoration: none !important;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease;
}

.checkout-index-index .cities-list a:hover,
.checkout-index-index .cities-list li:hover > *,
.checkout-index-index .cities-list .active,
.checkout-index-index .cities-list .ui-state-active,
.checkout-index-index .cities-list .ui-state-focus {
    background: #f6f6f6 !important;
    color: #222 !important;
    text-decoration: none !important;
}

/* The parent control needs relative positioning so the absolute dropdown anchors correctly */
.checkout-index-index .control._with-tooltip:has(.cities-list) {
    position: relative;
}

/* Thin custom scrollbar for the city suggestions dropdown */
.checkout-index-index .cities-list {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.checkout-index-index .cities-list::-webkit-scrollbar {
    width: 4px;
}
.checkout-index-index .cities-list::-webkit-scrollbar-track {
    background: transparent;
}
.checkout-index-index .cities-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.checkout-index-index .cities-list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Hide the native warehouse <select> but keep it in the DOM for KO
   bindings and jQuery Validation (.valid() call in customValidationHook). */
.np-warehouse-select-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    top: 0;
}

/* Nova Poshta warehouse searchable autocomplete — same visual style as city. */
.checkout-index-index .warehouses-list {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    padding: 0;
    max-height: 280px;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.checkout-index-index .warehouses-list:empty {
    display: none !important;
}
.checkout-index-index .warehouses-list ul,
.checkout-index-index .warehouses-list ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}
.checkout-index-index .warehouses-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    border-bottom: 1px solid #f0f0f0;
}
.checkout-index-index .warehouses-list li:last-child {
    border-bottom: none;
}
.checkout-index-index .warehouses-list li::marker {
    content: none !important;
}
.checkout-index-index .warehouses-list li > * {
    display: block;
    padding: 8px 14px;
    color: #222 !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease;
}
.checkout-index-index .warehouses-list li:hover > *,
.checkout-index-index .warehouses-list .selected {
    background: #f6f6f6 !important;
    color: #222 !important;
}
.checkout-index-index .control._with-tooltip:has(.warehouses-list) {
    position: relative;
}
.checkout-index-index .warehouses-list::-webkit-scrollbar {
    width: 4px;
}
.checkout-index-index .warehouses-list::-webkit-scrollbar-track {
    background: transparent;
}
.checkout-index-index .warehouses-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.checkout-index-index .warehouses-list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Cart — "Перейти до оформлення замовлення" button: restore vertical padding */
.cart-summary .checkout-methods-items .action.primary.checkout {
    padding-top: 14px;
    padding-bottom: 14px;
}