@charset "UTF-8";

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'PT Sans Narrow', sans-serif;
    scroll-behavior: smooth;
}
blockquote {
    background: #8630a33d;
    border-left: 6px solid #8630a3;
    padding: 15px;
}
blockquote p {margin: 0}
[v-cloak] {display:none}

/*::selection {*/
/*    background: transparent;*/
/*    text-shadow: none;*/
/*}*/

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{    
    border-width:1px 1px 1px 2px;    
    border-color: #777;    
    background-color: #999;    
    margin-left: -5px;
}
::-webkit-scrollbar-thumb:hover{    
    border-width: 1px 1px 1px 2px;    
    border-color: #555;    
    background-color: #777;
}
::-webkit-scrollbar-track{    
    border-width:0;
}
::-webkit-scrollbar-track:hover{    
    border-left: solid 1px #aaa;    
    background-color: #eee;
}
.logo {font-family: 'Jost', sans-serif}
a.nav-link.active {
    text-decoration: 5px underline #310062;
    text-underline-offset: 22px;
}

img.w-100.rounded.shadow-sm {
    /* margin-bottom: 20px; */
    border: 1px solid #dee2e6;
}


/* =========================================================
   PRODUCT SPECS CARD
   ========================================================= */

.pp-product-specs-card {
    max-width: 520px;

    margin-bottom: 18px;

    padding: 18px;

    background: #f8f9fa;

    border: 1px solid #eaedf0;
    border-radius: 14px;
}

.pp-product-specs-title {
    margin-bottom: 12px;

    color: #8a9096;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.pp-product-specs-grid {
    display: flex;
    flex-direction: column;
}

.pp-product-spec-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 8px 0;

    border-bottom: 1px solid #e8ebee;

    font-size: 13px;
    line-height: 1.4;
}

.pp-product-spec-row:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}

.pp-product-spec-row:first-child {
    padding-top: 0;
}

.pp-product-spec-row span {
    flex-shrink: 0;

    color: #90969c;
}

.pp-product-spec-row strong {
    color: #292e33;

    font-weight: 600;

    text-align: right;
}


/* =========================================================
   FULL WIDTH DESCRIPTION
   ========================================================= */

.pp-product-content-full {
    width: 100%;
    max-width: 1050px;
}

.pp-content-heading {
    margin-bottom: 20px;
}

.pp-content-heading > span {
    display: block;

    margin-bottom: 4px;

    color: #999fa5;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.pp-content-heading h2 {
    margin: 0;

    color: #202428;

    font-size: 22px;
    font-weight: 650;
}


/* =========================================================
   ADMIN DESCRIPTION ON PUBLIC PRODUCT PAGE
   ========================================================= */

.pp-admin-product-description {
    max-width: 1000px;

    color: #454a4f;

    font-size: 15px;
    line-height: 1.75;
}

.pp-admin-product-description p {
    margin-top: 0;
    margin-bottom: 16px;
}

.pp-admin-product-description p:last-child {
    margin-bottom: 0;
}

.pp-admin-product-description h2,
.pp-admin-product-description h3,
.pp-admin-product-description h4 {
    margin-top: 25px;
    margin-bottom: 10px;

    color: #252a2e;

    font-weight: 650;
}

.pp-admin-product-description ul,
.pp-admin-product-description ol {
    padding-left: 22px;

    margin-bottom: 18px;
}

.pp-admin-product-description li {
    margin-bottom: 6px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .pp-product-specs-card {
        max-width: 100%;

        padding: 15px;

        border-radius: 12px;
    }

    .pp-product-spec-row {
        gap: 15px;

        font-size: 12px;
    }

    .pp-product-spec-row strong {
        max-width: 60%;
    }

}



 .pp-order-page {
        min-height: calc(100vh - 160px);
        padding: 48px 0 72px;
        background:
            radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 34%),
            #f4f7fb;
    }

    .pp-order-container {
        width: min(1180px, calc(100% - 32px));
        margin: 0 auto;
    }

    .pp-order-topbar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 26px;
    }

    .pp-order-eyebrow {
        margin-bottom: 7px;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .pp-order-title {
        margin: 0;
        color: #0f172a;
        font-size: clamp(30px, 4vw, 44px);
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .pp-order-subtitle {
        margin: 10px 0 0;
        color: #64748b;
        font-size: 15px;
    }

    .pp-order-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        color: #0f172a;
        background: #fff;
        border: 1px solid #dfe6ef;
        border-radius: 14px;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    }

    .pp-order-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 20px;
        align-items: start;
    }

    .pp-order-card {
        overflow: hidden;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
    }

    .pp-order-success {
        position: relative;
        padding: 28px;
        color: #fff;
        background:
            linear-gradient(135deg, #0f172a 0%, #172554 58%, #1d4ed8 130%);
    }

    .pp-order-success::after {
        position: absolute;
        top: -65px;
        right: -55px;
        width: 210px;
        height: 210px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 50%;
        content: "";
    }

    .pp-order-success__content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .pp-order-success__icon {
        display: grid;
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
        place-items: center;
        color: #14532d;
        background: #dcfce7;
        border-radius: 18px;
    }

    .pp-order-success__icon svg {
        width: 28px;
        height: 28px;
    }

    .pp-order-success h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
    }

    .pp-order-success p {
        margin: 6px 0 0;
        color: #cbd5e1;
    }

    .pp-order-body {
        padding: 28px;
    }

    .pp-order-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 26px;
    }

    .pp-order-meta__item {
        padding: 15px 16px;
        background: #f8fafc;
        border: 1px solid #e8edf4;
        border-radius: 16px;
    }

    .pp-order-meta__label {
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .pp-order-meta__value {
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
        word-break: break-word;
    }

    .pp-order-section-title {
        margin: 0 0 14px;
        color: #0f172a;
        font-size: 18px;
        font-weight: 900;
    }

    .pp-order-products {
        display: grid;
        gap: 10px;
    }

    .pp-order-product {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 90px 130px;
        gap: 16px;
        align-items: center;
        padding: 16px;
        border: 1px solid #e5eaf1;
        border-radius: 17px;
    }

    .pp-order-product__index {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        color: #475569;
        background: #f1f5f9;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 900;
    }

    .pp-order-product__article {
        display: block;
        margin-bottom: 4px;
        color: #2563eb;
        font-size: 13px;
        font-weight: 900;
    }

    .pp-order-product__name {
        color: #0f172a;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.4;
    }

    .pp-order-product__qty,
    .pp-order-product__price {
        color: #0f172a;
        font-weight: 900;
        text-align: right;
        white-space: nowrap;
    }

    .pp-order-totals {
        width: min(390px, 100%);
        margin: 24px 0 0 auto;
    }

    .pp-order-total-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 12px 2px;
        color: #64748b;
        border-bottom: 1px solid #edf1f6;
    }

    .pp-order-total-row strong {
        color: #0f172a;
    }

    .pp-order-total-row--main {
        margin-top: 8px;
        padding: 18px;
        color: #fff;
        background: #0f172a;
        border: 0;
        border-radius: 16px;
    }

    .pp-order-total-row--main span {
        color: #cbd5e1;
    }

    .pp-order-total-row--main strong {
        color: #fff;
        font-size: 22px;
    }

    .pp-order-side {
        display: grid;
        gap: 16px;
    }

    .pp-order-side-card {
        padding: 22px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
    }

    .pp-order-side-card--dark {
        color: #fff;
        background: #0f172a;
        border-color: #0f172a;
    }

    .pp-order-side-card h3 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 900;
    }

    .pp-order-side-card p {
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.6;
    }

    .pp-order-side-card--dark p {
        color: #cbd5e1;
    }

    .pp-order-phone {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 18px;
        padding: 14px;
        color: #fff;
        background: rgba(255, 255, 255, .08);
        border-radius: 15px;
        text-decoration: none;
        font-weight: 900;
    }

    .pp-order-actions {
        display: grid;
        gap: 10px;
        margin-top: 18px;
    }

    .pp-order-action {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 16px;
        color: #fff;
        background: #2563eb;
        border-radius: 15px;
        font-weight: 900;
        text-decoration: none;
    }

    .pp-order-action--light {
        color: #0f172a;
        background: #f1f5f9;
    }

    .pp-order-error {
        padding: 18px;
        color: #991b1b;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 16px;
        font-weight: 800;
    }

    .pp-order-empty {
        padding: 40px;
        text-align: center;
    }

    .pp-order-empty h2 {
        margin: 0 0 10px;
        color: #0f172a;
        font-weight: 900;
    }

    .pp-order-empty p {
        color: #64748b;
    }

    @media (max-width: 980px) {
        .pp-order-layout {
            grid-template-columns: 1fr;
        }

        .pp-order-side {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 720px) {
        .pp-order-page {
            padding-top: 28px;
        }

        .pp-order-topbar {
            flex-direction: column;
        }

        .pp-order-meta {
            grid-template-columns: 1fr;
        }

        .pp-order-product {
            grid-template-columns: 36px minmax(0, 1fr);
        }

        .pp-order-product__qty,
        .pp-order-product__price {
            grid-column: 2;
            text-align: left;
        }

        .pp-order-side {
            grid-template-columns: 1fr;
        }

        .pp-order-success__content {
            align-items: flex-start;
        }
    }



.pp-cart-page {
    background: #f3f6fb;
    min-height: calc(100vh - 80px);
}

.pp-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}

.pp-cart-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.pp-cart-header h1 {
    margin: 4px 0 6px;
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
}

.pp-cart-header p {
    margin: 0;
    color: #64748b;
}

.pp-cart-clear {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 800;
    color: #ef4444;
}

.pp-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
}

.pp-cart-list {
    display: grid;
    gap: 12px;
}

.pp-cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 130px 140px 140px;
    gap: 16px;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.pp-cart-item__image {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.pp-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-cart-item__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pp-cart-item__article {
    font-size: 14px;
    font-weight: 900;
    color: #2563eb;
}

.pp-cart-item__brand {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.pp-cart-item__name {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
    line-height: 1.35;
}

.pp-cart-item__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pp-cart-item__meta span {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 5px 9px;
}

.pp-cart-item__remove {
    border: 0;
    background: #fff1f2;
    color: #e11d48;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.pp-cart-price {
    font-weight: 900;
    color: #0f172a;
}

.pp-cart-item__price span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #94a3b8;
}

.pp-cart-counter {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
}

.pp-cart-counter button {
    border: 0;
    background: #fff;
    height: 38px;
    display: grid;
    place-items: center;
    color: #0f172a;
}

.pp-cart-counter div {
    text-align: center;
    font-weight: 900;
}

.pp-cart-item__sum {
    text-align: right;
    font-weight: 900;
    color: #0f172a;
}

.pp-cart-summary__card {
    position: sticky;
    top: 20px;
    background: #0f172a;
    color: #fff;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .22);
}

.pp-cart-summary__card h2 {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 900;
}

.pp-cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: #cbd5e1;
}

.pp-cart-summary__row strong {
    color: #fff;
}

.pp-cart-summary__total {
    margin: 20px 0;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
}

.pp-cart-summary__total span {
    display: block;
    color: #cbd5e1;
    font-size: 13px;
}

.pp-cart-summary__total strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    font-weight: 900;
}

.pp-cart-checkout {
    width: 100%;
    border: 0;
    background: #2563eb;
    color: #fff;
    border-radius: 16px;
    padding: 15px 18px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pp-cart-legal {
    margin: 16px 0 0;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.5;
}

.pp-cart-legal a {
    color: #fff;
}

.pp-cart-empty {
    max-width: 560px;
    margin: 60px auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    padding: 42px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(15,23,42,.08);
}

.pp-cart-empty__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: #eff6ff;
    color: #2563eb;
    display: grid;
    place-items: center;
}

.pp-cart-empty h1 {
    margin: 0 0 10px;
    font-weight: 900;
}

.pp-cart-empty p {
    color: #64748b;
}

.pp-cart-primary {
    display: inline-flex;
    margin-top: 18px;
    background: #0f172a;
    color: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    text-decoration: none;
    font-weight: 900;
}

@media (max-width: 1200px) {
    .pp-cart-layout {
        grid-template-columns: 1fr;
    }

    .pp-cart-item {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .pp-cart-item__price,
    .pp-cart-counter,
    .pp-cart-item__sum {
        grid-column: 2;
    }

    .pp-cart-item__sum {
        text-align: left;
    }
}


 .error-sticky{
        position: sticky;
        top: 0;
        z-index: 50;
        background: #fff;
        padding: 12px 0;
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
        margin-bottom: 14px;
    }

    .search-form2{
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .search-form2 input{
        width: 100%;
        height: 44px;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 0 14px;
        font-size: 15px;
        outline: none;
    }

    .search-form2 button{
        height: 44px;
        padding: 0 18px;
        border: none;
        border-radius: 10px;
        background: #7a2cff;
        color: #fff;
        font-weight: 600;
        white-space: nowrap;
    }

    /* ===== category chips WITHOUT horizontal scroll ===== */
    .category-nav{
        display: flex;
        gap: 8px;
        flex-wrap: wrap;      /* <-- перенос строк */
        padding-top: 10px;
        max-width: 100%;
        overflow: hidden;     /* <-- чтобы точно не было горизонтального скролла */
    }

    .category-chip{
        border: 1px solid #e6e6e6;
        background: #fafafa;
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 13px;
        line-height: 1.1;
        cursor: pointer;
        text-align: left;
        max-width: 100%;
    }

    .category-chip:hover{
        background: #f1f1f1;
    }

    /* ===== highlight row ===== */
    .error-table2 tr.is-found{
        outline: 2px solid #7a2cff;
        outline-offset: -2px;
        background: rgba(122, 44, 255, 0.06) !important;
    }

    /* small fixes */
    .accordion-button{
        gap: 10px;
    }


.pp-product-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.pp-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* квадрат — идеально для каталога */
    background: linear-gradient(135deg, #f3e8ff, #f8f5ff);
    border-radius: 12px;
    overflow: hidden;
}

.pp-product-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 👉 занимает ВСЮ ширину */
    object-position: center;
}

.pp-product-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.pp-product-oem {
    font-size: 12px;
    color: #777;
}

.pp-product-price {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 700;
}

.pp-product-cta {
    margin-top: auto;
    font-size: 13px;
    color: #ff6a00;
    text-decoration: none;
}


.highlighted-error {
    background-color: yellow;
    font-weight: bold;
}

#promoCarousel1 h2 {
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

#promoCarousel1 .btn-outline-light:hover {
    background-color: #fff;
    color: #000;
    transition: all 0.2s ease-in-out;
}

#video-alert {
    background: linear-gradient(135deg, #d0ebff, #a5d8ff);
    color: #084298;
    font-size: 0.95rem;
}

  /* HERO (ОТДЕЛЬНЫЙ ДЛЯ КОНТАКТОВ) */
  .pp-hero-contact{
    position: relative;
    min-height: 320px;
    background-image: url(/img/contactt.jpeg);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--pp-border);
  }
  .pp-hero-contact::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(900px 360px at 20% 0%, rgba(255,122,0,.25), transparent 55%),
      radial-gradient(900px 360px at 95% 35%, rgba(49,0,98,.22), transparent 55%),
      linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.35));
  }
  .pp-hero-contact .container{ position: relative; z-index: 1; }
  .pp-hero-contact h1{
    letter-spacing: -0.03em;
    text-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  
  /* QR-блок как мини-карточка внутри */
.pp-qrbox{
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--pp-shadow-soft);
}
.pp-map--wide iframe{ height: 420px; }
@media (max-width: 576px){ .pp-map--wide iframe{ height: 360px; } }

/* Компактная карта */
.pp-map--compact iframe{ height: 260px; }
@media (max-width: 576px){ .pp-map--compact iframe{ height: 320px; } }
  
  @media (max-width: 576px){
    .pp-hero-contact{ min-height: 260px; }
  }

  /* SECTION */
  .pp-section{ padding: 56px 0; }
  @media (max-width: 576px){ .pp-section{ padding: 42px 0; } }

  /* PANELS */
    .pp-panel{ height: auto; }
    
  .pp-panel--tint{
    background:
      radial-gradient(1200px 420px at 20% 0%, rgba(255,122,0,.10), transparent 55%),
      radial-gradient(1000px 420px at 100% 40%, rgba(49,0,98,.10), transparent 55%),
      #fff;
  }
  .pp-panel__body{ padding: 24px; }
  @media (max-width: 576px){ .pp-panel__body{ padding: 18px; } }

  .pp-title{
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pp-ink);
    margin: 0;
  }
  .pp-muted{ color: var(--pp-muted); }

  .pp-divider{
    height: 1px;
    background: var(--pp-border);
    margin: 16px 0;
  }

  /* METRICS */
  .pp-metric{
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    padding: 14px 14px 12px;
    background: #fff;
  }
  .pp-metric__label{ font-size: 12px; color: var(--pp-muted); }
  .pp-metric__value{ font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--pp-ink); }

  /* CONTACT ITEMS */
  .pp-item{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--pp-border);
    background: #fff;
  }
  .pp-item__icon{
    width: 42px; height: 42px;
    border-radius: 14px;
    display:grid; place-items:center;
    border: 1px solid var(--pp-border);
    background: rgba(0,0,0,.02);
    flex: 0 0 auto;
  }
  .pp-item__icon svg{ display:block; }
  .pp-item__title{ font-weight: 700; margin:0; }
  .pp-item__text{ margin:0; color: var(--pp-muted); }

  /* BUTTONS */
  .pp-btn{
    border-radius: 14px;
    padding: 10px 14px;
    border: 1px solid var(--pp-border);
    background:#fff;
    font-weight: 600;
  }
  .pp-btn--accent{
    border-color: rgba(255,122,0,.35);
    box-shadow: 0 10px 26px rgba(255,122,0,.15);
  }

  /* MAP */
  .pp-map{
    overflow:hidden;
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow);
    background:#fff;
  }
  .pp-map iframe{ display:block; width:100%; height: 420px; border:0; }
  @media (max-width: 576px){ .pp-map iframe{ height: 360px; } }

  .pp-qr{
    width: 92px;
    border-radius: 16px;
    border: 1px solid var(--pp-border);
    padding: 10px;
    background:#fff;
    box-shadow: var(--pp-shadow-soft);
  }
  .pp-qr img{ width:100%; display:block; }

  a.pp-link{ color: var(--pp-ink); text-decoration: none; }
  a.pp-link:hover{ text-decoration: underline; }








:root{
  --pp-radius: 20px;
  --pp-border: rgba(0,0,0,.08);
  --pp-shadow: 0 18px 50px rgba(0,0,0,.08);
  --pp-shadow-soft: 0 10px 30px rgba(0,0,0,.06);
  --pp-muted: rgba(0,0,0,.62);
  --pp-ink: #0f172a;
}

.pp-section{ padding: 56px 0; }
@media (max-width: 576px){ .pp-section{ padding: 42px 0; } }

.pp-panel{
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-shadow-soft);
  padding: 26px;
  height: 100%;
}

.pp-panel--light{
  background: radial-gradient(1200px 400px at 20% 0%, rgba(255,140,0,.10), transparent 55%),
              radial-gradient(900px 380px at 100% 30%, rgba(49,0,98,.10), transparent 55%),
              #fff;
}

.pp-panel--white{ background: #fff; }

.pp-h2{
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pp-ink);
  margin: 0;
}

.pp-muted{ color: var(--pp-muted); }

.pp-divider{
  height: 1px;
  background: var(--pp-border);
  margin: 18px 0 0;
}

.pp-brand{ width: 36px; height: auto; opacity: .95; }
.pp-offer{ width: 70px; height: auto; margin-left: 6px; vertical-align: middle; }

.pp-metric{
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.pp-metric__label{ font-size: 12px; color: var(--pp-muted); }
.pp-metric__value{ font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--pp-ink); }

.pp-photo{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-shadow);
  background: #0b0b0b;
}
.pp-photo img{ display:block; width:100%; height:auto; }

.pp-search-content--hidden {
    display: none;
}

.pp-search-tab {
    cursor: pointer;
}
  /* HERO */
  .pp-hero-about {
    position: relative;
    min-height: 320px;
    background-image: url(/img/mainlogo.jpg);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--pp-border);
  }
  .pp-hero-about::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  }
  .pp-hero-about .container{
    position: relative;
    z-index: 1;
  }
  .pp-hero-about-title{
    letter-spacing: -0.02em;
    text-shadow: 0 6px 24px rgba(0,0,0,.35);
  }

  /* SECTIONS */
  .pp-section { padding: 56px 0; }
  @media (max-width: 576px){
    .pp-section { padding: 42px 0; }
    .pp-hero { min-height: 260px; }
  }

  /* BLOCKS */
  .pp-card{
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    background: #fff;
  }
  .pp-soft{
    background: rgba(0,0,0,.02);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
  }
  .pp-muted{ color: var(--pp-muted); }

  /* FACTS */
  .pp-fact{
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--pp-border);
    background: #fff;
  }
  .pp-fact b{
    font-size: 22px;
    letter-spacing: -0.02em;
  }

  /* ACTIVITY CARDS */
  .pp-activity{
    height: 100%;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: #fff;
    box-shadow: var(--pp-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .pp-activity:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
  }
  .pp-activity .pp-icon{
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid var(--pp-border);
    background: rgba(0,0,0,.02);
  }
  .pp-activity img{
    max-width: 44px;
    height: auto;
    opacity: .95;
  }

  /* MEDIA */
  .pp-media{
    border-radius: var(--pp-radius);
    overflow: hidden;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow);
/*     background: #000; */
  }

  /* SMALL UTILS */
  .pp-divider{
    height: 1px;
    background: var(--pp-border);
    margin: 18px 0 0;
  }


   :root {
            --pp-orange: #ff7a1a;
            --pp-orange-soft: #ffe5d0;
            --pp-dark: #1b1f27;
            --pp-gray: #8c8f99;
            --pp-border: #e4e6eb;
            --pp-bg: #ffffff;
            --pp-bg-soft: #f7f7fb;
            --radius-lg: 999px;
            --shadow-header: 0 8px 24px rgba(15, 23, 42, 0.08);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: #f5f5f8;
            color: var(--pp-dark);
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
        }

        /* === HEADER === */

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-header);
        }

        .header-inner {
            max-width: 1320px;
            margin: 0 auto;
            padding: 10px 20px 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Верхняя строка: логотип, поиск, контакты/иконки */

        .header-main-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 190px;
        }

        .logo-mark {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            background: radial-gradient(circle at 30% 20%, #ffffff 0, #ffffff 22%, #ffe4d0 55%, #ff7a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 20px;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .logo-title {
            font-weight: 700;
            font-size: 18px;
            letter-spacing: 0.03em;
        }

        .logo-sub {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--pp-gray);
            letter-spacing: 0.12em;
        }

        /* Поиск */

        .header-search {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .search-tabs {
            display: inline-flex;
            align-self: flex-start;
            background: var(--pp-bg-soft);
            border-radius: 999px;
            padding: 2px;
            gap: 2px;
        }

        .search-tab {
            padding: 4px 10px;
            border: none;
            border-radius: 999px;
            background: transparent;
            font-size: 11px;
            font-weight: 500;
            color: var(--pp-gray);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }

        .search-tab.is-active {
            background: #ffffff;
            color: var(--pp-dark);
        }

        .search-bar {
            display: flex;
            align-items: stretch;
            border-radius: var(--radius-lg);
            border: 1px solid var(--pp-border);
            background: #ffffff;
            overflow: hidden;
        }

        .search-input-wrap {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
            padding: 0 14px;
        }

        .search-input-wrap svg {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }

        .search-input {
            width: 100%;
            border: none;
            outline: none;
            font-size: 13px;
            color: var(--pp-dark);
        }

        .search-input::placeholder {
            color: var(--pp-gray);
        }

        .search-meta {
            font-size: 11px;
            color: var(--pp-gray);
            padding-inline: 16px;
            padding-top: 3px;
        }

        .search-submit {
            border: none;
            padding: 0 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            background: linear-gradient(135deg, #ff9f3c, #ff7a1a);
            color: #ffffff;
            border-radius: var(--radius-lg);
            margin: 4px 4px 4px 0;
        }

        .search-submit svg {
            width: 16px;
            height: 16px;
        }

        /* Контакты + иконки */

        .header-right {
            display: flex;
            align-items: center;
            gap: 18px;
            min-width: 250px;
            justify-content: flex-end;
        }

        .header-phones {
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-size: 11px;
        }

        .header-phones-main {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
        }

        .header-phones-main svg {
            width: 14px;
            height: 14px;
        }

        .header-phones-extra {
            color: var(--pp-gray);
        }

        .header-phones-extra span {
            margin-right: 4px;
        }

        .header-phones a {
            color: inherit;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .icon-btn {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 1px solid var(--pp-border);
            background: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
        }

        .icon-btn svg {
            width: 17px;
            height: 17px;
        }

        .icon-btn:hover {
            background: var(--pp-bg-soft);
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
        }

        .icon-btn:active {
            transform: translateY(1px);
            box-shadow: none;
        }

        .icon-btn--whatsapp {
            border: none;
            background: #25d366;
            color: #ffffff;
        }

        .icon-btn--primary {
            border: none;
            background: var(--pp-dark);
            color: #ffffff;
        }

        .icon-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: var(--pp-orange);
            color: #ffffff;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .burger-btn {
            display: none;
        }

        /* Нижняя строка: каталог + навигация (ширина на всю шапку) */

        .header-nav-row {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-top: 4px;
        }

        .catalog-wrap {
            position: relative;
        }

        .catalog-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            background: rgba(255, 122, 26, 0.08);
            color: var(--pp-dark);
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .catalog-btn span.badge {
            padding: 2px 6px;
            border-radius: 999px;
            background: #ffffff;
            color: var(--pp-orange);
            font-size: 11px;
            font-weight: 600;
        }

        .catalog-btn svg {
            width: 16px;
            height: 16px;
        }

        .main-nav {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between; /* теперь меню растянуто по ширине */
            gap: 16px;
            font-size: 13px;
        }

        .main-nav a {
            color: var(--pp-gray);
            position: relative;
            padding-bottom: 4px;
            flex-shrink: 0;
        }

        .main-nav a:hover {
            color: var(--pp-dark);
        }

        .main-nav a.is-active {
            color: var(--pp-dark);
            font-weight: 600;
        }

        .main-nav a.is-active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            border-radius: 999px;
            background: var(--pp-orange);
        }

        /* === ВЫПАДАЮЩИЙ КАТАЛОГ (переделан) === */

        .catalog-dropdown {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 12px;
            width: min(900px, 100vw - 32px); /* адекватная ширина, без пережатия текста */
            background: #ffffff;
            border-radius: 18px;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
            padding: 18px 20px 20px;
            display: none;
        }
        
        .catalog-wrap.is-open .catalog-dropdown {
            display: flex;            /* или block – как нужно по макету */
            gap: 24px;
        }
        .catalog-left {
            width: 260px;
            flex-shrink: 0;
            border-radius: 16px;
            background: #f8f8fc;
            padding: 14px 12px 14px;
        }

        .catalog-section-title {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--pp-gray);
            margin-bottom: 8px;
        }

        .brand-chips {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .brand-chip {
            padding: 9px 12px;
            border-radius: 999px;
            border: 1px solid var(--pp-border);
            font-size: 12px;
            cursor: pointer;
            background: #ffffff;
            text-align: center;
            transition: background 0.15s, border-color 0.15s, transform 0.05s;
        }

        .brand-chip:hover {
            background: var(--pp-bg-soft);
            border-color: var(--pp-orange-soft);
            transform: translateY(-1px);
        }

        .catalog-right {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px 24px;
            font-size: 13px;
        }

        .catalog-right ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .catalog-right li + li {
            margin-top: 6px;
        }

        .catalog-right a {
            color: var(--pp-dark);
            line-height: 1.35;
        }

        .catalog-right a span {
            display: block;
            color: var(--pp-gray);
            font-size: 11px;
        }

        .catalog-right a:hover {
            color: var(--pp-orange);
        }

        /* Мобильная адаптация */

        @media (max-width: 992px) {
            .header-inner {
                padding-inline: 12px;
            }

            .header-main-row {
                gap: 10px;
            }

            .header-left {
                min-width: auto;
            }

            .header-search {
                order: 3;
                width: 100%;
            }

            .header-right {
                min-width: auto;
                gap: 10px;
            }

            .header-phones {
                display: none;
            }

            .burger-btn {
                display: inline-flex;
            }

            .header-nav-row {
                display: none;
            }

            .header-inner.is-menu-open .header-nav-row {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }

            .header-inner.is-menu-open .header-nav-row .main-nav {
                flex-wrap: wrap;
                justify-content: flex-start;
                gap: 10px 16px;
            }

            .header-inner.is-menu-open .catalog-dropdown {
                position: static;
                width: 100%;
                margin-top: 10px;
            }

            .catalog-dropdown.is-open {
                flex-direction: column;
            }

            .catalog-left {
                width: 100%;
            }

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

        @media (max-width: 640px) {
            .header-main-row {
                align-items: center;
            }

            .header-search {
                order: 3;
            }

            .search-meta {
                display: none;
            }

            .header-actions {
                gap: 6px;
            }

            .search-tabs {
                display: none;
            }

            .header-inner.is-search-collapsed .header-search {
                display: none;
            }

            .header-inner.is-search-collapsed .header-main-row {
                justify-content: space-between;
            }

            .header-inner.is-search-collapsed .search-toggle-btn {
                display: inline-flex;
            }

            .search-toggle-btn {
                display: none;
            }
        }


.product-card{background:#fff}
.thumb-sz{width:var(--sz,56px);/* height:var(--sz,56px); */border-radius:10px;overflow:hidden;flex-shrink:0}
.thumb-sz img,.thumb-sz picture,.thumb-sz svg{width:100%;height:100%;display:block;object-fit:contain}
.thumb-sz > div{width:100%;height:100%;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
.line-clamp-2{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

        :root {
          --pp-orange: #ff7a00;
          --pp-orange-dark: #e86c00;
          --pp-border: #e5e5e5;
          --pp-gray-text: #777;
          --pp-bg: #fafafa;
          --pp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        }

        * { box-sizing: border-box; }

        body {
          margin: 0;
          padding: 0;
          font-family: var(--pp-font);
          background: #fff;
          color: #222;
        }

        a {
          color: inherit;
          text-decoration: none;
        }
        a:hover { text-decoration: underline; }

        /* COMMON WRAPPER */
        .pp-page {
          max-width: 1180px;
          margin: 0 auto;
          padding: 16px;
        }

        /* HERO / SEARCH */
        .pp-hero {
          display: grid;
          grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
          gap: 30px;
          margin: 0px 0 30px;
          align-items: center;
        }

        .pp-hero-left-title {
          font-size: 30px;
          font-weight: 700;
          margin-bottom: 10px;
          line-height: 1.25;
        }
        .pp-hero-left-sub {
          font-size: 15px;
          color: #555;
          margin-bottom: 18px;
          max-width: 520px;
        }

        .pp-search-box {
          border-radius: 10px;
          border: 1px solid var(--pp-border);
          background: #fdfdfd;
          padding: 14px 16px 16px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        }
        .pp-search-tabs {
          display: flex;
          gap: 8px;
          font-size: 13px;
          margin-bottom: 10px;
        }
        .pp-search-tab {
          padding: 5px 10px;
          border-radius: 999px;
          border: 1px solid transparent;
          cursor: pointer;
          white-space: nowrap;
        }
        .pp-search-tab--active {
          background: #111;
          color: #fff;
          border-color: #111;
        }
        .pp-search-tab--ghost {
          border-color: #ddd;
          color: #555;
        }

        .pp-search-row {
          display: flex;
          gap: 8px;
          margin-bottom: 8px;
          flex-wrap: wrap;
        }
        .pp-search-input {
          flex: 1 1 220px;
          padding: 9px 10px;
          border-radius: 6px;
          border: 1px solid var(--pp-border);
          font-size: 14px;
        }
        .pp-search-btn {
          padding: 9px 16px;
          border-radius: 6px;
          border: none;
          background: var(--pp-orange);
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          white-space: nowrap;
          transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
        }
        .pp-search-btn:hover {
          background: var(--pp-orange-dark);
          box-shadow: 0 2px 6px rgba(0,0,0,0.18);
          transform: translateY(-1px);
        }

        .pp-search-hint {
          font-size: 12px;
          color: #777;
          margin-top: 4px;
        }

        .pp-hero-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 10px;
          font-size: 12px;
        }
        .pp-hero-tag {
          padding: 3px 9px;
          border-radius: 999px;
          background: #f1f1f1;
          color: #555;
          cursor: pointer;
        }

        .pp-hero-right {
          border-radius: 12px;
          background: radial-gradient(circle at top left, #ffe0c4, #fff);
          border: 1px solid #f1f1f1;
          padding: 18px 18px 14px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .pp-hero-right-title {
          font-size: 15px;
          font-weight: 600;
          margin-bottom: 2px;
        }
        .pp-hero-stats {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          font-size: 13px;
        }
        .pp-hero-stat-item {
          flex: 1 1 120px;
        }
        .pp-hero-stat-value {
          font-size: 18px;
          font-weight: 700;
        }
        .pp-hero-stat-label {
          color: #666;
          font-size: 12px;
        }

        .pp-hero-list {
          margin-top: 6px;
          font-size: 13px;
          color: #555;
        }
        .pp-hero-list li {
          margin-bottom: 4px;
        }

        /* SECTION TITLES */
        .pp-section {
          margin-bottom: 28px;
        }
        .pp-section-header {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 10px;
          margin-bottom: 12px;
        }
        .pp-section-title {
          font-size: 20px;
          font-weight: 600;
        }
        .pp-section-link {
          font-size: 13px;
          color: var(--pp-orange-dark);
          white-space: nowrap;
        }

        /* QUICK CATEGORIES */
        .pp-quick-cats {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 10px;
        }
        .pp-quick-cat {
          border-radius: 8px;
          border: 1px solid var(--pp-border);
          background: #fff;
          padding: 10px 10px 9px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          cursor: pointer;
          font-size: 13px;
          transition: box-shadow 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
        }
        .pp-quick-cat:hover {
          box-shadow: 0 3px 8px rgba(0,0,0,0.06);
          transform: translateY(-1px);
          border-color: #ddd;
        }
        
        .pp-quick-cat a {
            text-decoration: none !important;
            color: inherit; /* по желанию — чтобы цвет не менялся */
        }
        
        .pp-quick-cat:hover a {
            text-decoration: none !important;
        }
        
        
        .pp-quick-cat-name {
          font-weight: 600;
          margin-bottom: 4px;
        }
        .pp-quick-cat-desc {
          color: #777;
          font-size: 12px;
          margin-bottom: 4px;
        }
        .pp-quick-cat-meta {
          font-size: 11px;
          color: #999;
        }

        /* BRANDS */
        .pp-brands-row {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }
        
        .pp-brand-pill {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
        }
        
        .pp-brand-pill:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
            background-color: #f2f2f2; /* можешь убрать, если нужен оригинальный фон */
        }
        
        .pp-brand-pill--accent {
          text-decoration: none !important;
          border-color: var(--pp-orange);
          background: #fff5eb;
        }

        /* BY VEHICLE TYPE */
        .pp-type-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px;
        }
        .pp-type-card {
          border-radius: 10px;
          border: 1px solid var(--pp-border);
          background: linear-gradient(135deg, #fafafa, #ffffff);
          padding: 10px 12px;
          font-size: 13px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 80px;
          cursor: pointer;
          transition: box-shadow 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
        }
        .pp-type-card:hover {
          box-shadow: 0 3px 8px rgba(0,0,0,0.06);
          transform: translateY(-1px);
          border-color: #ddd;
        }
        .pp-type-title {
          font-weight: 600;
          margin-bottom: 2px;
        }
        .pp-type-sub {
          font-size: 12px;
          color: #777;
          margin-bottom: 6px;
        }
        .pp-type-link {
          font-size: 12px;
          color: var(--pp-orange-dark);
        }

        /* ADVANTAGES */
        .pp-adv-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 12px;
        }
        .pp-adv-card {
          border-radius: 10px;
          border: 1px solid var(--pp-border);
          background: #fff;
          padding: 10px 12px;
          font-size: 13px;
        }
        .pp-adv-icon {
          width: 26px;
          height: 26px;
          border-radius: 50%;
          background: var(--pp-orange);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          margin-bottom: 6px;
        }
        .pp-adv-title {
          font-weight: 600;
          margin-bottom: 4px;
        }
        .pp-adv-text {
          font-size: 12px;
          color: #666;
        }

        /* STEPS */
        .pp-steps {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 10px;
          font-size: 13px;
        }
        .pp-step-card {
          border-radius: 8px;
          border: 1px dashed var(--pp-border);
          background: #fdfdfd;
          padding: 10px 10px 9px;
        }
        .pp-step-num {
          font-size: 11px;
          text-transform: uppercase;
          color: #999;
          margin-bottom: 2px;
        }
        .pp-step-title {
          font-weight: 600;
          margin-bottom: 4px;
        }
        .pp-step-text {
          font-size: 12px;
          color: #666;
        }

        /* PRODUCTS PREVIEW */
        .pp-products-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 10px;
        }
        .pp-product-card {
          border-radius: 8px;
          border: 1px solid var(--pp-border);
          background: #fff;
          padding: 8px;
          font-size: 13px;
        }
        .pp-product-card img {
          width: 100%;
          border-radius: 4px;
          margin-bottom: 6px;
          background: #f3f3f3;
        }
        .pp-product-name {
          font-weight: 600;
          margin-bottom: 2px;
        }
        .pp-product-oem {
          font-size: 11px;
          color: #777;
          margin-bottom: 4px;
        }
        .pp-product-price {
          font-weight: 700;
          margin-bottom: 4px;
        }
        .pp-product-cta {
          font-size: 11px;
          color: var(--pp-orange-dark);
        }

        /* ABOUT + CONTACTS */
        .pp-bottom-grid {
          display: grid;
          grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
          gap: 20px;
          margin-top: 10px;
          font-size: 13px;
        }
        .pp-about {
          border-radius: 10px;
          border: 1px solid var(--pp-border);
          background: #fff;
          padding: 12px 14px;
        }
        .pp-about h2 {
          font-size: 18px;
          margin: 0 0 6px;
        }
        .pp-about p {
          margin: 0 0 8px;
          color: #555;
        }
        .pp-about ul {
          margin: 0;
          padding-left: 18px;
          color: #555;
          font-size: 13px;
        }
        .pp-contacts {
          border-radius: 10px;
          border: 1px solid var(--pp-border);
          background: #fafafa;
          padding: 12px 14px;
        }
        .pp-contacts h2 {
          font-size: 18px;
          margin: 0 0 8px;
        }
        .pp-contacts-row {
          margin-bottom: 6px;
        }
        .pp-contacts-row span {
          color: #777;
          font-size: 12px;
          display: block;
        }
        .pp-contacts-main {
          font-weight: 600;
          font-size: 14px;
        }
        .pp-contacts-note {
          font-size: 12px;
          color: #777;
          margin-top: 6px;
        }

        /* FOOTER */
        .pp-footer {
          border-top: 1px solid #eee;
          padding: 12px 16px;
          font-size: 12px;
          color: #999;
          text-align: center;
          margin-top: 20px;
        }

        /* RESPONSIVE */
        @media (max-width: 1000px) {
          .pp-hero {
            grid-template-columns: minmax(0, 1fr);
          }
          .pp-bottom-grid {
            grid-template-columns: minmax(0, 1fr);
          }
          .pp-adv-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          .pp-steps {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          .pp-products-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          .pp-quick-cats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
          .pp-type-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }

        @media (max-width: 600px) {
          .pp-page {
            padding: 10px;
          }
          .pp-quick-cats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
          .pp-type-grid,
          .pp-adv-grid,
          .pp-products-grid,
          .pp-steps {
            grid-template-columns: minmax(0, 1fr);
          }
          .pp-hero-left-title {
            font-size: 24px;
          }
        }



    :root {
      --pp-orange: #ff7a00;
      --pp-orange-dark: #e86c00;
      --pp-border: #e5e5e5;
      --pp-gray-text: #777;
      --pp-bg: #fafafa;
      --pp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 0;
      font-family: var(--pp-font);
      background: #fff;
      color: #222;
    }

    a {
      color: var(--pp-orange-dark);
      text-decoration: none;
    }
    a:hover { text-decoration: underline; }

    .pp-logo {
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 16px;
    }
    .pp-header-right {
      font-size: 13px;
      color: #ccc;
    }

    /* ОСНОВНОЙ КОНТЕЙНЕР */
    .pp-page {
      max-width: 1420px;
      margin: 0 auto 40px;
      padding: 0px 0px 40px;
    }

    /* ХЛЕБНЫЕ КРОШКИ */
    .pp-breadcrumbs {
      font-size: 13px;
      margin: 0px 0 10px;
      color: var(--pp-gray-text);
    }
    .pp-breadcrumbs span { color: #999; }

    /* ЗАГОЛОВОК */
    .pp-product-title {
      font-size: 26px;
      font-weight: 700;
      margin: 10px 0 6px;
      line-height: 1.3;
    }
    .pp-product-subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 18px;
    }

    /* ВЕРХНИЙ БЛОК */
    .pp-product-top {
      display: flex;
      gap: 30px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* ГАЛЕРЕЯ */
    .pp-product-gallery {
      flex: 0 0 475px;
      max-width: 100%;
    }
/*     .pp-product-image-main img {
    width: 100%;
    max-width: 380px;
    height: 380px;           фиксируем высоту чтобы блок не разъезжался
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
} */
    .pp-product-thumbs {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .pp-product-thumbs img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #eee;
      cursor: pointer;
      transition: box-shadow 0.15s ease;
    }
    .pp-product-thumbs img:hover {
      box-shadow: 0 0 0 2px var(--pp-orange);
    }

    /* ПРАВАЯ КОЛОНКА */
    .pp-product-info {
      flex: 1 1 320px;
      min-width: 260px;
    }
    .pp-product-meta {
      font-size: 14px;
      margin-bottom: 12px;
    }
    .pp-product-meta div { margin-bottom: 4px; }
    .pp-product-meta span { color: var(--pp-gray-text); }

    .pp-product-stock-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 10px 0;
      font-size: 14px;
      flex-wrap: wrap;
    }
    .pp-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
    }
    .pp-badge-success {
      background: #e8f6ec;
      color: #1e8b3f;
    }
    .pp-stock-qty { color: #555; }

    .pp-product-price {
      font-size: 24px;
      font-weight: 700;
      margin: 8px 0 4px;
    }
    .pp-product-type {
      font-size: 13px;
      color: #666;
      margin-bottom: 12px;
    }

    .pp-product-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 260px;
      margin-bottom: 10px;
    }
    .pp-btn {
      border: none;
      border-radius: 4px;
      padding: 10px 16px;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease,
                  box-shadow 0.15s ease, transform 0.05s ease;
    }
    .pp-btn-primary {
      background: var(--pp-orange);
      color: #fff;
      font-weight: 600;
    }
    .pp-btn-primary:hover {
      background: var(--pp-orange-dark);
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }
    .pp-btn-secondary {
      background: #f2f2f2;
      color: #333;
    }
    .pp-btn-secondary:hover { background: #e4e4e4; }

    .pp-product-note {
      margin-top: 6px;
      font-size: 15px;
      color: #666;
    }

    .pp-product-quick {
      margin-top: 14px;
      font-size: 13px;
      background: #f9f9f9;
      border-radius: 6px;
      border: 1px dashed var(--pp-border);
      padding: 8px 10px;
    }
    .pp-product-quick b { color: #444; }

    .pp-vin-form {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .pp-vin-form input {
      flex: 1 1 140px;
      padding: 6px 8px;
      font-size: 13px;
      border-radius: 4px;
      border: 1px solid var(--pp-border);
    }
    .pp-vin-form button {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 4px;
      border: none;
      background: var(--pp-orange);
      color: #fff;
      cursor: pointer;
    }
    .pp-vin-form button:hover {
      background: var(--pp-orange-dark);
    }

    /* НИЖНИЙ БЛОК */
    .pp-product-bottom {
      display: flex;
      gap: 30px;
    /*   margin-top: 30px; */
      margin-top: -60px;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .pp-product-content {
      padding-top: 80px;
      flex: 1 1 60%;
      font-size: 14px;
      line-height: 1.6;
      min-width: 260px;
    }
    .pp-product-content h2 {
      font-size: 18px;
      margin: 20px 0 8px;
    }
    .pp-product-content p { margin: 0 0 10px; }
    .pp-product-content ul {
      padding-left: 18px;
      margin: 0 0 10px;
    }
    .pp-product-content li { margin-bottom: 4px; }
    .pp-small-text {
      font-size: 12px;
      color: #777;
    }
    .pp-product-seo {
      margin-top: 15px;
      font-size: 12px;
      color: #999;
    }

    /* САЙДБАР */
    .pp-product-sidebar {
      flex: 0 0 300px;
      min-width: 260px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .pp-card {
      margin-top: 80px;
      border: 1px solid var(--pp-border);
      border-radius: 6px;
      padding: 12px 14px;
      background: var(--pp-bg);
    }
    .pp-card h3 {
      font-size: 16px;
      margin: 0 0 8px;
    }
    .pp-spec-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 13px;
    }
    .pp-spec-list li { margin-bottom: 4px; }
    .pp-spec-list span { color: var(--pp-gray-text); }

    /* С ЭТИМ ТОВАРОМ ПОКУПАЮТ */
    .pp-related-section {
      margin-top: 30px;
    }
    .pp-related-title {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .pp-related-list {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }
    .pp-related-item {
      flex: 0 0 180px;
      border: 1px solid var(--pp-border);
      border-radius: 6px;
      padding: 8px;
      text-align: center;
      font-size: 13px;
      background: #fff;
    }
    .pp-related-item img {
      width: 100%;
      border-radius: 4px;
      margin-bottom: 6px;
    }
    .pp-related-item-title {
      margin-bottom: 4px;
    }
    .pp-related-item-price {
      font-weight: 600;
      margin-bottom: 6px;
    }

    /* БЛОК ДОВЕРИЯ */
    .pp-trust {
      margin-top: 35px;
      padding-top: 20px;
      border-top: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      font-size: 13px;
    }
    .pp-trust-item {
      flex: 1 1 200px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }
    .pp-trust-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--pp-orange);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .pp-trust-text-title {
      font-weight: 600;
      margin-bottom: 2px;
    }
    .pp-trust-text-sub {
      color: #666;
    }

    /* АДАПТИВ */
    @media (max-width: 900px) {
      .pp-product-top {
        flex-direction: column;
      }
      .pp-product-gallery,
      .pp-product-info {
        flex: 1 1 100%;
      }
      .pp-product-sidebar {
        flex: 1 1 100%;
      }
    }

    @media (max-width: 600px) {
      .pp-product-title { font-size: 22px; }
      .pp-product-price { font-size: 20px; }
      .pp-page {
        padding: 8px 10px 30px;
      }
    }



    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: var(--pp-font);
      background: #fff;
      color: #222;
    }

    a {
      color: var(--pp-orange-dark);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .pp-page {
      max-width: 1420px;
      margin: 0 auto 40px;
      padding: 0px 0px 40px;
    }

    .pp-product-top {
      display: flex;
      gap: 30px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .pp-product-gallery {
      flex: 0 0 475px;
      max-width: 100%;
    }

    .pp-product-image-main img {
        width: 100%;
        max-width: 500px; /* поставь ширину, которая должна быть */
        height: 457px;   /* фиксированная высота */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f2def7;
        border-radius: 6px;
        border: 1px solid #eee;
        overflow: hidden;
        flex-shrink: 0;   /* ВАЖНО! запрещает тянуться */
    }
    
    .pp-product-image-main img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .pp-product-thumbs {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .pp-product-thumbs img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #eee;
      cursor: pointer;
      transition: box-shadow 0.15s ease;
    }

    .pp-product-thumbs img:hover {
      box-shadow: 0 0 0 2px var(--pp-orange);
    }

    .pp-product-info {
      flex: 1 1 320px;
      min-width: 260px;
    }

    .pp-product-meta {
      font-size: 15px;
      margin-bottom: 12px;
    }

    .pp-product-meta div {
      margin-bottom: 4px;
    }

    .pp-product-meta span {
      color: var(--pp-gray-text);
    }

    .pp-product-stock-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 10px 0;
      font-size: 14px;
      flex-wrap: wrap;
    }

    .pp-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
    }

    .pp-badge-success {
      background: #e8f6ec;
      color: #1e8b3f;
    }

    .pp-stock-qty {
      color: #555;
    }

    .pp-product-price {
      font-size: 24px;
      font-weight: 700;
      margin: 8px 0 4px;
    }

    .pp-product-type {
      font-size: 13px;
      color: #666;
      margin-bottom: 12px;
    }

    .pp-product-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 260px;
      margin-bottom: 10px;
    }

    .pp-btn {
      border: none;
      border-radius: 4px;
      padding: 10px 16px;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    }

    .pp-btn-primary {
      background: var(--pp-orange);
      color: #fff;
      font-weight: 600;
    }

    .pp-btn-primary:hover {
      background: var(--pp-orange-dark);
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }

    .pp-btn-secondary {
      background: #f2f2f2;
      color: #333;
    }

    .pp-btn-secondary:hover {
      background: #e4e4e4;
    }

    .pp-product-note {
      margin-top: 6px;
      font-size: 15px;
      color: #666;
    }

    .pp-product-quick {
      margin-top: 14px;
      font-size: 13px;
      background: #f9f9f9;
      border-radius: 6px;
      border: 1px dashed var(--pp-border);
      padding: 8px 10px;
    }
    .pp-product-quick b {
      color: #444;
    }

    .pp-product-bottom {
      display: flex;
      gap: 30px;
      margin-top: -60px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .pp-product-content {
        padding-top: 80px;
      flex: 1 1 60%;
      font-size: 14px;
      line-height: 1.6;
      min-width: 260px;
    }

    .pp-product-content h2 {
      font-size: 18px;
      margin: 20px 0 8px;
    }

    .pp-product-content p {
      margin: 0 0 10px;
    }

    .pp-product-content ul {
      padding-left: 18px;
      margin: 0 0 10px;
    }

    .pp-product-content li {
      margin-bottom: 4px;
    }

    .pp-small-text {
      font-size: 12px;
      color: #777;
    }

    .pp-product-seo {
      margin-top: 15px;
      font-size: 12px;
      color: #999;
    }

    .pp-product-sidebar {
      flex: 0 0 300px;
      min-width: 260px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .pp-card {
        margin-top: 80px;
      border: 1px solid var(--pp-border);
      border-radius: 6px;
      padding: 12px 14px;
      background: var(--pp-bg);
    }

    .pp-card h3 {
      font-size: 16px;
      margin: 0 0 8px;
    }

    .pp-spec-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 13px;
    }

    .pp-spec-list li {
      margin-bottom: 4px;
    }

    .pp-spec-list span {
      color: var(--pp-gray-text);
    }

    .pp-vin-form {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .pp-vin-form input {
      flex: 1 1 140px;
      padding: 6px 8px;
      font-size: 13px;
      border-radius: 4px;
      border: 1px solid var(--pp-border);
    }
    .pp-vin-form button {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 4px;
      border: none;
      background: var(--pp-orange);
      color: #fff;
      cursor: pointer;
    }
    .pp-vin-form button:hover {
      background: var(--pp-orange-dark);
    }

    @media (max-width: 900px) {
      .pp-product-top {
        flex-direction: column;
      }
      .pp-product-gallery,
      .pp-product-info {
        flex: 1 1 100%;
      }
      .pp-product-sidebar {
        flex: 1 1 100%;
      }
    }

    @media (max-width: 600px) {
      .pp-product-price {
        font-size: 20px;
      }
      .pp-page {
        padding: 8px 10px 30px;
      }
    }


/* компактная, чистая мобильная карточка */
.product-card { background: #fff; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card .badge { font-weight: 600; }
.product-card a { text-decoration: none; }

.text-primary {
  color: #0056b3 !important;
  font-weight: 700;
  text-decoration: underline;
}


.brand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;            /* промежуток между логотипами */
}

.brand img {
  width: 110px;         /* желаемая ширина */
  height: 110px;        /* желаемая высота */
  object-fit: contain;  /* сохраняем пропорции, без обрезки */
}

.video-block {
    background-color: #fff;
    border: 1px solid #ddd;
    transition: box-shadow 0.3s ease-in-out;
}

.video-block:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
}

.video-block h2 {
    font-size: 1.25rem;
    color: #333;
}

video {
    max-height: 500px;
    object-fit: cover;
}

.badge-order {
    background-color: #ff4d4f; /* яркий красный */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 4px 20px;
    border-radius: 12px;
    display: inline-block;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


#analogs-section {
  scroll-margin-top: 190px;
}

.text-analog {
    padding-left: 0;
}

@media (max-width: 480px) {
    .text-analog {
        padding-left: 12px;
        display: block;
        margin-bottom: 8px;
    }
}

/* General Styles */
.border-bottom {
    border-bottom: 1px solid #ccc;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.fw-bold {
    font-weight: bold;
}


.search-result {
    background-color: #f8f9fa; /* Светло-серый фон */
    border-left: 5px solid #dc3545; /* Красная полоса слева */
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

@media (max-width: 390px){
    
}

.search-result p {
    margin: 0;
}

.search-result span {
    color: #007bff; /* Синий цвет для подписи */
}

.minimal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    transition: 0.2s ease;
    background: transparent;
}
.minimal-btn:hover {
    background-color: #333;
    color: #fff;
}

.minimal-btn.whatsapp {
    border-color: #25D366;
    color: #25D366;
    padding: 10px;
}
.minimal-btn.whatsapp:hover {
    background-color: #25D366;
    color: white;
    padding: 10px;
}


.custom-product-card {
    background-color: #2C2A3F;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.custom-product-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
}

.custom-product-card h3 span {
    font-weight: 400;
    color: #D1D5DB;
}

.custom-product-card .product-info {
    font-size: 14px;
    line-height: 1.6;
}

.custom-product-card .product-info p {
    margin-bottom: 8px;
}

.custom-product-card .product-info span {
    color: #E5E7EB;
}

.custom-product-card #product-price {
    color: #4ADE80;
    font-size: 16px;
    font-weight: 500;
}

.add-to-cart-btn {
    margin-top: 16px;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 8px;
}



.filter-sidebar {
    background-color: #f8f9fa; /* Светло-серый фон */
    border-radius: 8px; /* Округлённые углы */
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для глубины */
    max-height: 80vh; /* Ограничение высоты */
    overflow-y: auto; /* Прокрутка при большом количестве брендов */
    top: 20px; /* Фиксация сайдбара при прокрутке */
        margin-top: 120px;
        position: fixed;
        left: 0;
        top: 0;
        height: 99%;
        border-radius: 5px;
        width: 200px;
}

.filter-sidebar h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.form-check input {
    margin-right: 8px;
    cursor: pointer;
}

.form-check-label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.form-check input:checked + .form-check-label {
    color: #007bff; /* Цвет при выборе */
    font-weight: bold;
}

/* Для адаптивности */
@media (max-width: 992px) {
    .filter-sidebar {
        max-height: 50vh;
        position: relative;
    }
}

.quick-buy-modal {
    position: fixed;
    top: -8px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.quick-buy-content {
    background: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
}



.quick-buy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.quick-buy-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.quick-buy-text {
    margin-bottom: 15px;
}

.quick-buy-input-group {
    margin-bottom: 15px;
}

.quick-buy-input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.quick-buy-buttons {
    display: flex;
    justify-content: space-between;
}

.quick-buy-submit {
    flex: 1;
    margin-right: 10px;
    padding: 0.5rem;
    font-size: 1rem;
    background-color: #007bff;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.quick-buy-cancel {
    flex: 1;
    padding: 0.5rem;
    font-size: 1rem;
    background-color: #6c757d;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}



     .quick-buy-tooltip {
    position: absolute;
    top: -40px;
    right: 50%;
    transform: translateX(50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}


.quick-buy-button-wrapper:hover .quick-buy-tooltip {
    opacity: 1;
} 

.news-content {
                        padding-top: 20px;
                        max-height: 135px;
                        overflow-y: auto;
                        -ms-overflow-style: none;     /* IE и Edge */
                        scrollbar-width: none;        /* Firefox */
                        font-size: 14px;
                        line-height: 1.4;
                        word-break: break-word;
                        /*white-space: pre-line;*/
}

    .news-content::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

#brand-description p {
    font-size: 16px; /* Увеличьте зzение при необходимости */
    line-height: 1.5; /* Добавьте больше пространства между строками */
    color: #333; /* Убедитесь, что текст читаем */
}

#brand-description .highlight {
    font-size: 16px; /* Убедитесь, что размер совпадает с основным текстом */
    font-weight: bold; /* Выделите, если нужно */
}


.product-description {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.product-description:hover {
   box-shadow: 0 0 10px rgb(79 89 168 / 50%); /* Жёлтая тень */
    transition: box-shadow 0.3s ease-in-out;
}

.sort-btn {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff; /* Primary blue */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.sort-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.sort-btn:active {
    background-color: #003f7f; /* Even darker blue on active click */
}

@keyframes highlight {
    0% {
        background-color: rgb(52 35 189 / 50%);
    }
    100% {
        background-color: transparent;
    }
}

/* img.card-img-top.rounded {
    display: block;
    max-width: 100%;
    height: 180px;
    object-fit: contain;
    object-position: center;
    background-color: #f8f9fa;
    border-radius: 8px;
} */

.product-description {
    animation: highlight 2s ease-in-out;
}
.description-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.description-text {
      font-size: 16px;
    color: #555;
    text-align: justify;
}

.description-text-muted {
    color: #999;
    font-style: italic;
    text-align: center;
}


@media (min-width: 389px) and (max-width: 768px) {
    .phone-link {
        display: none; /* Скрыть блок на мобильных устройствах */
    }
    
}


/* Mobile Styles */
@media (min-width: 389px) and (max-width: 768px) {
  

   
    

    .row.border-bottom {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #ffffff;
    }

    .row.border-bottom > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        font-size: 14px;
    }

    .row.border-bottom > div:nth-child(1) {
        display: none; /* Hide image placeholder on mobile */
    }

    .row.border-bottom .col-md-2,
    .row.border-bottom .col-md-1 {
        width: 100%; /* Full-width for mobile */
    }

    .row.border-bottom .col-md-2 span,
    .row.border-bottom .col-md-1 span {
        font-weight: bold;
        color: #000;
    }

    /* Align the cart button at the bottom for mobile */
    .row.border-bottom > .col-md-1:last-child {
        text-align: right;
        margin-top: 10px;
    }

    /* Hide header row for mobile */
    .row.border-bottom.py-2.d-flex.align-items-center.bg-light.fw-bold {
        display: none;
    }
}

.selected-filters {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.filters-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    background-color: #007bff;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

.filter-badge:hover {
    background-color: #0056b3;
}

.filter-badge .remove-filter {
    color: #fff;
    margin-left: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.filter-badge .remove-filter:hover {
    color: #ccc;
}

.no-filters {
    color: #777;
    font-style: italic;
}

@media (min-width: 389px) and (max-width: 768px){
    /* Для мобильной версии */
    .row.border-bottom {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 15px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .row.border-bottom .col-12 {
        display: flex;
        /* flex-direction: column; */
        gap: 10px;
        justify-content: center;
        align-items: flex-start;
    }

    .row.border-bottom .col-12 img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 4px;
        margin: 0 auto;
    }

    .row.border-bottom .col-12 .text-dark {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

    .row.border-bottom .badge {
        font-size: 14px;
        padding: 8px 12px;
        margin-top: 5px;
        align-self: center;
    }

    .row.border-bottom .btn {
        width: 100%;
        font-size: 16px;
        padding: 12px;
        margin-top: 10px;
        text-align: center;
    }

    .row.border-bottom .text-center {
        margin-top: 10px;
        text-align: center;
        font-size: 16px;
    }
}

/*@media (min-width: 390px) and (max-width: 768px) {
    .product-card {
        background: #ffffff;
        border-radius: 15px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 340px;
        margin: 15px auto;
    }

    .product-card:hover {
        transform: scale(1.03);
    }

    /* 🔹 Изображение */
    .product-image {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 🔹 Детали */
    .product-details {
        padding: 12px;
        /* text-align: center; */
    }

    .product-name {
        font-size: 18px;
        font-weight: bold;
       /*  color: #0056b3; */
        text-decoration: none;
        display: block;
        margin-bottom: 5px;
        
    }

    .product-article {
        font-size: 14px;
        /* color: #666; */
        margin-bottom: 5px;
    }

    .product-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
    }

    /* 🔹 Цена и кнопка */
    .product-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: #f8f8f8;
        border-top: 1px solid #eaeaea;
    }

    .product-price {
        font-size: 18px;
        font-weight: bold;
        color: #28a745;
    }

    /* 🔹 Кнопка корзины */
    .add-to-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #7b42f6;
        color: #fff;
        border-radius: 50px;
        padding: 12px;
        transition: background 0.3s ease-in-out;
        width: 50px;
        height: 50px;
        border: none;
        cursor: pointer;
        box-shadow: 0px 4px 8px rgba(123, 66, 246, 0.3);
    }

    .add-to-cart:hover {
        background: #592bd5;
    }

    .add-to-cart svg {
        width: 22px;
        height: 22px;
        fill: #fff;
    }
}


/* мобильная адаптация тест */
/* General Styles for the Header */
nav.fixed-top {
    width: 100%;
    z-index: 1030; /* Ensure it stays above other elements */
}

.bg-light {
    background-color: #f8f9fa !important;
}

.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* General Styling */
.navbar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Individual Links */
.navbar-nav .nav-link {
    text-decoration: none;
    font-size: 16px;
    color: #333;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: #6c63ff;
    color: #fff;
}

/* Dropdown */
.navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
}



/* Адаптация только для маленьких экранов */
@media (max-width: 768px) {
    .ms-auto {
        margin-left: 0.5rem;
    }
}



@media (max-width: 670px) and (max-height: 380px){
    .mobile-seaction-narrow{
        margin-top: 10vh !important;
    }
}
/* Mobile Menu */
@media (max-width: 768px) {
    .mobile-seaction{
        margin-top: 13vh !important;
    }

    .nav-mobile{
        display: none !important;
    }


    .mobile-search {
        position: fixed;
        top: 10px;
        left: 80%;
        transform: translateX(-50%);
        z-index: 1000;
        padding: 5px;
        /* border-radius: 5px; */
        max-width: 460px;
        width: 120%;
    }

    .mobile-search .form-control {
        max-width: 60%; /* Поле ввода растягивается на всю ширину формы */
        font-size: 0.9rem; /* Чуть увеличиваем шрифт для читаемости */
    }

    .mobile-search .btn {
        padding: 5px 10px; /* Оставляем как есть */
    }

@media (max-width: 767px) {
      

        .d-flex.align-items-center[style*="flex: 1; max-width: 100%; padding-left: 10px;"],
        .basket-pc {
            position: fixed;
            top: 10px; /* Под логотипом */
            right: 15px; /* Отступ справа */
            z-index: 1000; /* Выше меню */
            /* background: #fff; Фон для видимости */
            padding: 5px;
            /* border-radius: 5px; */
            /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Тень для выделения */
            max-width: 200px; /* Ограничение ширины */
        }
        .basket-pc .btn {
            /* padding: 5px 10px; Корректировка кнопки корзины */
            padding: 0px 10px;
            margin-top: 39px;
        }
        .join-pc{
            display: none !important;
        }

    }

   

.mobile-brand{
    margin-top: 90px;
}

.mobile{
    display: none !important;
}


.searching-pc{
    display: none !important;
}
   

    .label-mobile{
        display: none !important;
    }

    
.delete-mobile{
    display: block !important;
}




  

    .whatsapp-button-pc {
        background-color: #25D366;
        color: white;
        border: none;
        display: none;
    }

    .whatsapp-button {
        background-color: #25D366;
        color: white;
        border: none;
        display: none;
    }

    .whatsapp-button-mobile{
        background-color: #25D366;
    }


    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .navbar-nav .nav-item {
        width: 100%; /* Full width for menu items */
    }

    .navbar-nav .nav-link {
        display: block;
        width: 100%; /* Take full width */
        text-align: left;
        padding: 0px;
        font-size: 14px;
        border-bottom: 1px solid #eaeaea;
    }

    /* Dropdown Menu */
    .navbar-nav .dropdown-menu {
        position: static; /* Inline dropdown */
        display: none; /* Hidden by default */
        width: 100%;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 10px 15px;
        font-size: 14px;
        color: #333;
    }

    .navbar-nav .dropdown-menu .dropdown-item:hover {
        background-color: #f8f8f8;
    }
}



.phone-link {
    font-size: 14px; /* Увеличенный размер шрифта */
    font-weight: bold;
}

.btn-lg {
    font-size: 16px;
    padding:    6px 24px; /* Увеличенный внутренний отступ */
    border-radius: 6px;
}

.whatsapp-button {
    background-color: #25D366;
    color: white;
    border: none;
}

.cart-button {
    border: 2px solid #333;
    background-color: #f8f9fa;
    color: #333;
}






@media (min-width: 390px) and (max-width: 768px) {

 

    .cart-button{
        display:none;
    }
    .whatsapp-button-pc {
        background-color: #25D366;
        color: white;
        border: none;
        display: none;
    }

}

/* Эффекты при наведении */
.btn:hover, .phone-link:hover {
    background-color: #f1f1f1;
    transform: scale(1.1); /* Небольшое увеличение */
    transition: transform 0.2s ease-in-out;
border: 1px solid #333; border-radius: 6px;
    
}

.whatsapp-button:hover {
    background-color: #20b957;
}

.cart-button:hover {
    background-color: #e0e0e0;
    color: #000;
}


.btn-success:hover {
    background-color: #007bff !important; /* Синий цвет */
    color: #fff !important; /* Белый текст */
    border-color: #007bff !important; /* Граница совпадает с фоном */
}

/* Для кнопки Выход */
.btn-danger:hover {
    background-color: #e60023 !important; /* Красный, но более насыщенный */
    color: #fff !important; /* Белый текст */
    border-color: #e60023 !important; /* Граница совпадает с фоном */
}


.btn-dark:hover{
    background-color: #007bff !important;
    color: #fff;
    border-color: #007bff;
    
}

.signin {
    margin-left: -35px;
}

/* Mobile Adaptation */
@media (min-width: 390px) and (max-width: 768px) {



    .delete-search{
        display: none!important;
    }

   
    /* Adjust top container */
    .container.d-flex {
        flex-wrap: wrap; /* Allow wrapping of elements */
        gap: 10px; /* Add spacing between items */
        padding: 10px;
    }

    /* Adjust Navbar Brand (Logo + Name) */
    .navbar-brand {
        flex: 1 1 100%; /* Take full width */
        text-align: center; /* Center-align on mobile */
        gap: 5px;
    }

    .navbar-brand img {
        max-width: 50px; /* Reduce logo size */
    }

    .navbar-brand span {
        font-size: 14px; /* Adjust font size */
    }

     form#sendForm {
            flex: 1 1 100%; /* Форма занимает всю ширину */
            display: flex !important; /* Принудительно показываем форму */
            /*             gap: 5px;
            margin-left: -20px; */
        }
    
        form#sendForm input {
            flex: 1; /* Растягиваем поле ввода */
            display: block !important; /* Принудительно показываем */
            font-size: 14px;
        }
    
        form#sendForm button {
            flex-shrink: 0;
            padding: 5px 10px;
            display: block !important; /* Принудительно показываем */
        }

    /* Contacts and Actions */
    .d-flex.align-items-center.gap-3 {
        flex: 1 1 100%; /* Full width */
        justify-content: center; /* Center-align items */
    }

    .d-flex.align-items-center.gap-3 a {
        font-size: 14px;
    }

    /* Cart Button */
    .d-flex.align-items-center.gap-3 a.btn {
        padding: 5px 8px;
    }

    /* Menu Toggle Button */
    .navbar-toggler {
        /* margin: 0 auto; */ /* Center-align toggle button */
       
    }

    .navbar-collapse {
        max-height: 70vh; /* Ограничиваем высоту до 70% от высоты экрана */
        overflow-y: auto; /* Включаем вертикальную прокрутку */
        -webkit-overflow-scrolling: touch; /* Улучшаем прокрутку на мобильных устройствах */
    }
    
    /* Дополнительный стиль для выпадающего списка */
    .dropdown-menu {
        max-height: 50vh; /* Устанавливаем максимальную высоту для выпадающего списка */
        overflow-y: auto; /* Добавляем вертикальную прокрутку */
        -webkit-overflow-scrolling: touch; /* Поддержка плавной прокрутки на iOS */
    }

   
}




.catalog-description {
    max-width: 100%; 
    padding: 20px 0px; 
    margin: auto; 
}

.catalog-description p {
    font-size: 0.6em;
    font-weight: 400; 
    line-height: 1.5;
    text-align: justify; 
    color: #333; 
    background-color: #f9f9f9; 
    padding: 15px; 
    border-radius: 5px; 
}

.catalog-description ul {
    font-size: 0.6em;
}
.highlight {
    background-color: #f0d9f6; /* Light yellow background */
    padding: 2px 4px; /* Padding to make the highlight stand out */
    border-radius: 3px; /* Rounded edges for smoothness */
    font-weight: 500; /* Slightly bolder to draw attention */
    color: #333; /* Keep the text color consistent */
    font-size: 0.6em;
}

#brandList {
    max-height: 600px; /* Ограничиваем высоту блока */
    overflow-y: auto; /* Добавляем вертикальную прокрутку */
/*     border: 1px solid #ddd; 
background-color: #fff;  */
    padding: 10px; /* Отступы внутри блока */
    border-radius: 5px; /* Скругленные углы */
}

#typeProductList{
    max-height: 600px; /* Ограничиваем высоту блока */
    overflow-y: auto; /* Добавляем вертикальную прокрутку */
/*     border: 1px solid #ddd; 
background-color: #fff;  */
    padding: 10px; /* Отступы внутри блока */
    border-radius: 5px; /* Скругленные углы */
}

/* Базовый стиль: мобильные устройства */
.container.position-relative.py-4.py-lg-2 {
    padding-left: 0; /* Без отступа на маленьких экранах */
    display: block; /* Убедитесь, что элементы отображаются вертикально */
}

/* Для больших экранов (например, от 790px) */
@media (min-width: 790px) {
   .mobile-mobile{
    display: none !important;
   }


    .container.position-relative.py-4.py-lg-2 {
        padding-left: 58px; /* Добавляем отступ для блока фильтров */
    }

    .oil-filter-sidebar {
        position: relative; /* Оставляем фильтр на месте */
    }
}

@media (min-width: 1024px) {
    .oil-filter-sidebar {
        position: fixed;
        top: 100px; /* Отступ сверху */
        left: 0; /* Отступ слева */
        width: 252px;
    }

    .product-list {
        margin-left: 252px; /* Сдвигаем список товаров */
    }
}



/* Общий стиль для контейнера товаров */
.container.position-relative.py-4.py-lg-2 {
    /* margin-left: auto; */
    transition: margin 0.3s ease;
}
/* 
Для широких экранов
@media (min-width: 1240px) {
    .container.position-relative.py-4.py-lg-2 {
        padding-left: 230px; Отступ только для широких экранов
    }
}


@media (max-width: 920px) {
    .container.position-relative.py-4.py-lg-2 {
        padding-left: 0; 
    } */

/* Для мобильных устройств
@media (max-width: 1800px) { Планшеты и ниже
    .oil-filter-sidebar {
        width: 100%; Сайдбар занимает всю ширину
        position: relative; Убираем фиксированное позиционирование
        height: auto;
        border-right: none;
    }

}

Для мобильных устройств (телефоны)
@media (max-width: 576px) { 
    .oil-filter-sidebar {
        display: block; Сайдбар отображается как блок сверху
        margin-bottom: 20px; Отступ снизу
    }

    .container.position-relative.py-4.py-lg-2 {
        margin-top: 20px; Добавляем отступ сверху после сайдбара
    }
} */


.oil-approval-header {
    margin: 10px 0; /* Отступы сверху и снизу */
}

.oil-sub-toggle-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #444; /* Темный фон для кнопок */
    color: #fff; /* Белый текст */
    border: none;
    border-radius: 5px; /* Скругленные углы */
    font-size: 14px;
    font-weight: bold;
    text-align: left; /* Текст выравнивается по левому краю */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ховер-эффект */
.oil-sub-toggle-btn:hover {
    background-color: #007bff; /* Синий фон при наведении */
    color: #fff; /* Белый текст */
}

/* Активное состояние */
.oil-sub-toggle-btn.active {
    background-color: #0056b3; /* Темно-синий фон для активного состояния */
    color: #fff; /* Белый текст */
}

/* Опции внутри заголовков */
.oil-approval-options {
    padding-left: 15px; /* Отступ слева для вложенного списка */
    margin-top: 5px;
    background-color: #3c3c3c; /* Фон для вложенных опций */
    border-left: 3px solid #444; /* Линия слева */
    border-radius: 5px;
}
/* Фильтр как сайдбар */
.oil-filter-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 99%;
    border-radius: 5px;
    width: 10vw; 
    background-color: #212121;
    padding: 15px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    z-index: 1000;
}

/* Контейнер фильтров */
.oil-filter-container {
     padding-top: 120px;
    color: #fff;
    font-family: Arial, sans-serif;
}

/* Заголовки фильтров */
.oil-filter-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

/* Кнопки заголовков */
.oil-toggle-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    background-color: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.oil-toggle-btn:hover {
    background-color: #444;
}

/* Списки фильтров */
.oil-filter-buttons {
    display: none;
    padding: 10px;
    margin-top: 5px;
    max-height: 600px;
    overflow-y: auto;
    background-color: #2c2c2c;
    border-radius: 5px;
}

/* Кнопки фильтров */
.oil-filter-btn {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 8px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 3px;
    text-align: left;
    cursor: pointer;
}

.oil-filter-btn.active {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.oil-filter-btn:hover {
    background-color: #0056b3;
}

/* Заголовки допусков */
.oil-approval-header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #ccc;
}

.oil-approval-options {
    margin-bottom: 15px;
}



/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .oil-filter-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding-left: 22px;
        border-right: none;
        margin-top: 40px;
    }

    .oil-filter-buttons {
        max-height: 150px; /* Уменьшаем высоту списков для мобильных */
    }
    
    .oil-filter-container {
    padding-top: 0px;
    }
}



/*.filter-container {
     position: fixed; 
    height: 99%;
    border-radius: 5px;
    width: 300px; 
    background-color: #212121;
    padding: 15px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    z-index: 1000;
         color: #fff;
    font-family: Arial, sans-serif;
}*/
    .filter-container {
        position: fixed;
        left: 0;
        top: 30px;
        height: 99%;
        border-radius: 5px;
        width: 10vw; 
        background-color: #212121;
        padding: 15px;
        border-right: 1px solid #ccc;
        overflow-y: auto;
        z-index: 1000;
    }
.filter-header {
    margin-bottom: 10px;
}

.toggle-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    background-color: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 5px;
}

.toggle-btn:hover {
    background-color: #444;
}

.filter-buttons {
    margin-top: 10px;
}

.filter-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    background-color: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 5px;
}

.filter-btn.active {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.filter-btn:hover {
    background-color: #0056b3;
    color: #fff;
}



/*.filter-container {
    position: fixed; Фиксируем фильтр слева
    top: 117px; Отступ сверху
    left: 20px; Отступ слева
    width: 250px; Ширина фильтра
    max-height: calc(100vh - 120px); Высота экрана минус отступы
    overflow-y: auto; Добавляем прокрутку для длинного списка
    background-color: #f8f9fa; Цвет фона
    border: 1px solid #ddd; Граница
    border-radius: 5px; Радиус углов
    padding: 10px; Внутренний отступ
    z-index: 10; Чтобы фильтр был выше контента
}

.filter-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; Расстояние между кнопками
}

.filter-btn {
    flex: 1 0 calc(50% - 10px); Кнопки занимают 50% ширины с учетом gap
    box-sizing: border-box;
    padding: 10px 15px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
}

.filter-btn:hover {
    background-color: #007bff;
    color: white;
}

.filter-btn.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
} */ 


/* Адаптация для мобильных устройств */
@media (max-width: 1200px) {
    .filter-container {
        width: 10vw;
        top: 80px;
        left: 15px;
    }

    .filter-title {
        font-size: 15px;
    }

    .filter-btn {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    form#filter_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
    
}

@media (max-width: 992px) {
    .filter-container {
        width: 15vw;
        top: 70px;
        left: 10px;
    }

    .filter-title {
        font-size: 14px;
    }

    .filter-btn {
        font-size: 12px;
        padding: 7px 10px;
    }
    
    form#filter_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
}

@media (max-width: 768px) {
.delete-price{
    display: none !important;
}


    .filter-container {
        position: static; /* Фиксированный фильтр может мешать на маленьких экранах */
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        border: none;
        background-color: transparent;
    }

    .filter-buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }

    .filter-btn {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    form#filter_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
}

@media (max-width: 576px) {
    .filter-container {
        width: 100%;
        margin: 5px 0;
        padding: 5px;
    }

    .filter-title {
        font-size: 13px;
    }

    .filter-buttons {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    .filter-btn {
        font-size: 11px;
        padding: 6px 8px;
    }
    
    form#filter_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
}

@media (max-width: 375px) {
    .filter-btn {
        font-size: 10px;
        padding: 5px 7px;
    }
    
    form#filter_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
}




.alert.alert-info.d-flex.gap-2.align-items-center.fade.show.border-0 {
    margin-top: 10px;
    width: 35%;
}


.col-md-2.name {
    padding-left: 0px;
}

.col-md-2{
    padding-left: 40px;
}


.DongBanner.p-5.bg-dark.text-white.rounded{
    margin-top: 25px;
}

.textarticle{
    font-size: xx-large;
}

.textprice{
    font-size: xx-large;
}

.description-block{
 font-size: large;   
}


.article-header h1 {
    font-size: 2em;
    font-weight: bold;
}

.article-content {
    margin-top: 20px;
}

.article-image img {
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}


.product-line {
    min-height: 65px;
}

.product-line .btn {
    padding: 6px 10px;
}

.product-line .title-limited a {
    color: #000;
    text-decoration: none;
    font-size: 15px;
}

.product-line .title-limited a:hover {
    text-decoration: underline;
}


.analog-highlight {
    transition: background-color 0.3s ease;
    border-radius: 6px;
}

.analog-highlight:hover {
    background-color: #ccffcc; 
}


.product-details {
    font-family: Arial, sans-serif;
}

.price-section p {
    font-size: 1.5rem;
    color: #333;
}

.product-characteristics {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.product-characteristics h5 {
    color: #0056b3;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

.product-characteristics li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.product-characteristics li:last-child {
    border-bottom: none;
}

.product-characteristics li span {
    color: #555;
}

.product-description h6 {
    color: #6c757d;
}
h5.fw-bold.text-primary {
    color: #365661 !important;
}




/* Стили для текста "Возможные замены" */
.hover-text {
    cursor: pointer;
    color: #543964;
    font-weight: bold;
    display: inline-block;
}

/* Скрытый блок, который будет отображаться при наведении */
.tooltip-text {
    display: none;
    position: absolute;
    left: 0;
    top: 100%; /* Появляется под текстом */
    width: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Лёгкая тень */
    z-index: 100;
    margin-left: 150px;
    margin-top: -45px;
    border-radius: 5px;
}

/* Показ блока при наведении на текст */
.hover-text:hover + .tooltip-text {
    display: block;
}


.title-limited {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Показывать только 2 строки */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  /*height: 3em; Высота для двух строк*/
/*     line-height: 1.5em; Высота строки */
}

span.badge.badge-position.rounded-pill.text-bg-danger.px-3 {
    position: absolute;
    top: 16px; 
    left: 18%; 
    transform: translateX(-50%); 
    z-index: 10; 
    background-color: #ff4d4d; 
    color: white; 
    padding: 5px 10px; 
    border-radius: 12px; 
    font-weight: bold; 
} 

.card {
    position: relative; /* Установить позицию родительского элемента */
}


/* Скрываем текст по умолчанию */
.hover-text-turkey {
    display: none;
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 105%; /* Чтобы текст появился справа от блока */
    transform: translateY(-50%); /* Центрируем по вертикали */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 200px; /* Задаем ширину для удобства */
}

/* Появление текста при наведении */
.col-12.col-md-1:hover .hover-text-turkey {
    display: block;
}

/* Стрелка */
.hover-text-turkey::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px; /* Расположение стрелки */
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent #f5f5f5 transparent transparent;
}


.Error_text_size{
    
    font-size: 23px;
    display: inline-block;
    padding: 7px 5px 5px 7px;
    background-color: #ffecec;
    border-radius: var(--bs-border-radius) !important;
}

.container12 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: 10px;
}

.desc_text {
    max-width: 600px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
}

.desc_text::first-letter {
    font-size: 24px;
    font-weight: bold;
}

.desc_text p {
    margin-bottom: 10px;
}

                            .modal-overlay {
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: rgba(0, 0, 0, 0.5);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                z-index: 1000;
                            }
                            
                            .modal-content-click {
                                background: #fff;
                                padding: 20px;
                                margin-top:145px;
                                border-radius: 8px;
                                max-width: 500px;
                                width: 100%;
                            }
                            
                            .form-group {
                                margin-bottom: 15px;
                            }
                            
                            .btn-click {
                                margin-right: 10px;
                            }
                            
                           
                            .form-grid {
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                            }
                            
                            .form-group-click {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }
                            
                            .form-group label {
                                flex: 1;
                                margin-right: 10px;
                            }
                            
                            .form-group input {
                                flex: 2;
                            }
/* meida for modal and clickbutton */
@media (max-width: 768px) {
    .modal-content-click {
        padding: 15px;
        margin-top: 100px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-grid {
        gap: 8px;
    }

    .btn-click {
        margin-right: 8px;
    }
}

@media (max-width: 480px) {
    .modal-content-click {
        padding: 10px;
        margin-top: 50px;
    }

    .form-group {
        margin-bottom: 8px;
    }

    .form-grid {
        gap: 5px;
    }

    .btn-click {
        margin-right: 5px;
    }

    .form-group-click {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label, .form-group input {
        flex: unset;
        width: 100%;
    }

    .form-group label {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

@media screen and (min-width:390px) and (max-width:844px){
   .alert.alert-info.d-flex.gap-2.align-items-center.fade.show.border-0 {
        margin-top: 10px;
        width: 96%;
    }
}


@media (max-width: 768px) {
    .fixed-bottom {
        display: block; /* Показываем элемент на мобильных устройствах */
    }
}

/* Скрыть элемент на устройствах с шириной экрана больше 768px */
@media (min-width: 769px) {
    .pc-brand-narrow{
        
    }
  
   
    .navigation-pc{
        display: none !important;
    }


.navbar-expand-lg-mobile{
    display: none !important;
}

.delete-mobile{
    display: none !important;
}

    .fixed-bottom {
        display: none !important; /* Скрываем элемент на устройствах с шириной экрана больше 768px */
    }
    
    .basket-mobile{
        display: none;
    }
    
}

.nav-link {color: #000}
.text {
    font-family: 'Jost', sans-serif; 
    font-weight: 400;
}
.shock-wive {
    text-decoration: 81px underline #ddcfde5e;
    text-decoration-style: wavy;
    display: inline-block;
}
.shock-wive-inline {
    text-decoration: 159px underline #ddcfde5e;
    text-decoration-style: wavy;
    display: block;
}
.swal2-styled.swal2-default-outline:focus {
    box-shadow: none !important;
}
.swal2-icon-content .material-symbols-outlined {
    font-size: 40px;
}
.ng::before {
    position: absolute;
    content: '';
    background-image: url(/img/free-png.ru-458.png);
    width: 550px;
    height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -180px;
    left: -105px;
    opacity: 0.1;
}
    
section#about {
    height: 64%;
}

/* Изображение для десктопа */
section#about {
    background-image: url('/img/mainlogo.jpeg');
    background-size: cover;
    background-position: center; /* Центрирует изображение */
    background-repeat: no-repeat;
    height: 500px;
}

/* Стили для мобильных устройств */
@media (max-width: 389px) {
    
}


@media (max-width: 768px) {
    


    button.carousel-control-next {
        display: none;
    }
    .navbar-expand-lg-pc{
        display: none !important;
    }





.input.form-control {
    width: 50%;
}
.req_form-mb-3 {
        display: flex;
        gap: 10px;
}




    
    
       .info_container {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        max-width: 400px; /* или любая другая ширина */
        /*margin: 0 auto;*/
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* добавленная тень */
        }
        .info_container p {
            margin: 10px 0;
        }
        .info_container h3 {
            margin-top: 0;
        }
    
        
        .contact_container {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        max-width: 263px; /* или любая другая ширина */
        /*margin: 0 auto;*/
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* добавленная тень */
        }
        .contact_container p {
            margin: 10px 0;
        }
        .contact_container h3 {
            margin-top: 0;
        }
        
        
        
        .coop_container {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        max-width: 263px; /* или любая другая ширина */
        /*margin: 0 auto;*/
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* добавленная тень */
        }
        .coop_container p {
            margin: 10px 0;
        }
        .coop_container h3 {
            margin-top: 0;
        }
    
        .addres_container{
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            max-width: 400px; /* или любая другая ширина */
            /*margin: 0 auto;*/
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* добавленная тень */
        }
        .addres_container p{
             margin: 10px 0;
        }
        .addres_container h3 {
            margin-top: 0;
        }
            
    }
        
        @media screen and (max-width: 767px) and (min-width: 389px){
            .contact_container {
                 margin-left: 46px;
            }
        }
        
        @media screen and (max-width: 767px) and (min-width: 389px){
            .coop_container {
                 margin-left: 46px;
            }
        }

  



            .block-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 25px;
            grid-row-gap: 10px;
            }
            
            
            
            
       /*      .div1 { grid-area: 1 / 1 / 2 / 2; }
       .div2 { grid-area: 1 / 2 / 2 / 3; }
       .div3 { grid-area: 1 / 3 / 2 / 4; }
       .div4 { grid-area: 1 / 4 / 2 / 5; }
       .div5 { grid-area: 2 / 1 / 3 / 2; }
       .div6 { grid-area: 2 / 2 / 3 / 3; }
       .div7 { grid-area: 2 / 3 / 3 / 4; }
       .div8 { grid-area: 2 / 4 / 3 / 5; } */
        .div1 { grid-area: 1 / 1 / 2 / 2; }
        .div2 { grid-area: 1 / 2 / 2 / 3; }
        .div3 { grid-area: 1 / 3 / 2 / 4; }
        .div4 { grid-area: 1 / 4 / 2 / 5; }
        .div5 { grid-area: 2 / 1 / 3 / 2; }
        .div6 { grid-area: 2 / 2 / 3 / 3; }
        .div7 { grid-area: 2 / 3 / 3 / 4; 
            height: 80%
        }
        .div8 { grid-area: 2 / 4 / 3 / 5; 
                height: 90%;
        }
        .div9 { grid-area: 3 / 1 / 4 / 2;
                height: 85%;
        }
            
            .div1:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div1:hover img {
            filter: saturate(100%);
            }
            
            .div2:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div2:hover img {
            filter: saturate(100%);
            }
            
            .div3:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div3:hover img {
            filter: saturate(100%);
            }
            
            .div4:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div4:hover img {
            filter: saturate(100%);
            }
            
            .div5:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div5:hover img {
            filter: saturate(100%);
            }
            
            .div6:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div6:hover img {
            filter: saturate(100%);
            }
            
            .div7:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div7:hover img {
            filter: saturate(100%);
            }
                
            .div8:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div8:hover img {
            filter: saturate(100%);
            }
            
            .div9:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .div9:hover img {
            filter: saturate(100%);
            }
        
        
        .text-center.mt-2 {
            color:black;
        }
        
        
        .offcanvas-collapse {
        position: fixed;
        height: 100vh;
        width: 100%;
        background-color: #343a40;
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        top: 56px; /* Adjust based on your navbar height */
        }
         
        .offcanvas-collapse.open {
            transform: translateX(250px);
        }
         
        .offcanvas-collapse.open a {
            color: #007bff;
        }
         
        nav#sidebar{
            min-width: 270px;
            max-width: 270px;
            color: #fff;
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            position: relative;
            z-index: 0;
            border-left: 1px solid rgba(0, 0, 0, 0.05);
        }
         
        /* public/css/styles.css */
         
        .offcanvas-collapse {
            transition: transform 0.3s ease-in-out;
            overflow-y: auto;
        }
         
        .offcanvas-collapse.closed {
            transform: translateX(-250px);
        }
         
        .tagcloud a {
            text-transform: uppercase;
            display: inline-block;
            padding: 4px 10px;
            margin-bottom: 7px;
            margin-right: 4px;
            border-radius: 4px;
            color: #000;
            border: 1px solid #ccc;
            font-size: 11px;
        }
         
        a.tag-cloud-link {
                color: #310062;
                transition: all 0.3s ease 0s;
        }
        
        .showcase-items {
            display: flex;
            flex-direction: row;
        }
        
        .showcase-filter {
            position: sticky;
            top: 80px;
        }
        
        .rotate{
          min-width: 270px;
          max-width: 270px;
        }
            
        
   /*       .col-lg-3{
      min-width: 270px;
      max-width: 270px;
           } */
        /*         .border-text{
            border: 1px solid #E7EAF1;
            background: #FFF;
            box-shadow: 0px 4px 16px -4px rgba(99, 105, 116, 0.07);
        } */
        
        .text {
            /*  display: flex;
            flex-wrap: wrap; */
            }
            
            .info_container, .contact_container, .coop_container, iframe {
                margin-bottom: 1.5rem;
            }
            
            /* Add custom styles for responsive layout if needed */
            @media (min-width: 768px) {
                .text > .col-md-4 {
                    max-width: 33.333333%;
                }

                .nav-pc{
                    display: none !important;
                }
            }
        
    .carousel-control-next-icon, .carousel-control-prev-icon {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100% 100%;
        filter: invert(100%);
        
    }
    
    button.carousel-control-next {
    position: absolute;
/*     top: 0; */
    bottom: 0;
    z-index: 1;
    /* display: flex; */
    align-items: center;
    justify-content: center;
/*     width: 0%; */
    padding: 0px;
    margin-right: -110px;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}
    button.carousel-control-prev {
    position: absolute;
/*     top: 0; */
    bottom: 0;
    z-index: 1;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    /* width: 15%; */
    margin-left: -110px;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}

    .justify-content-around {
        justify-content: space-around!important;
        padding: 140px;
    }
    .carousel {
    position: relative;
    margin-top: 0px;
/*     margin-bottom: -170px; */
    }
    .description-pos{
        padding-top: 0px;
    }
    
/*    .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.carousel-item.active {
  position: relative;
  opacity: 1;
  transform: none;
}

.carousel-item-next, .carousel-item-prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.carousel-item-next {
  transform: translateX(100%);
}

.carousel-item-prev {
  transform: translateX(-100%);
}

.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
  transform: translateX(0);
  opacity: 1;
}

.carousel-control-prev, .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  cursor: pointer;
}  */

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: scale(0.98); /* Легкий масштаб для появления */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.carousel-item.active {
  position: relative;
  opacity: 1;
  transform: scale(1); /* Возвращаем масштаб */
}

.carousel-item-next, .carousel-item-prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.carousel-item-next {
  transform: translateX(100%);
}

.carousel-item-prev {
  transform: translateX(-100%);
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  transform: translateX(0);
  opacity: 1;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  cursor: pointer;
}


        .product-card {
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        width: 267px;  
        text-align: center;
        background-color: #fff;
        box-sizing: border-box; 
        }
        
        .product-link {
        text-decoration: none;
        color: inherit;
        }
        
        .product-image {
        width: 267px;  
        height: 254px;
        object-fit: cover;
        margin-bottom: 10px;
        }
        
        .product-caption {
        padding: 10px;
        padding-top: 0px;
        }
        
        .product-price {
        font-size: 1rem;
        color: #000;
        margin-bottom: 5px;
        text-align: start;
        }




/* Для мобильных устройств */
@media (max-width: 767px) {
    .product-card {
        width: 100%;
        margin-bottom: 15px;
    }
    .product-image {
        width: 100%;
        height: auto;
    }
    .product-caption {
        padding: 10px 5px;
    }
    .product-price {
        font-size: 0.85rem;
    }
}

.product-title {
font-size: 1rem;
font-weight: bold;
margin-bottom: 5px;
text-align: start;
} 
        
/*         .add-to-cart {
background-color: #8630a3;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
margin: 10px auto; 
margin-left: 0px;
}

.add-to-cart:hover {
background-color: #5a6268;
}  */

/* .product-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    width: 320px;  Установите фиксированную ширину
    text-align: center;
    background-color: #fff;
    box-sizing: border-box;  Включите отступы и границы в общую ширину и высоту элемента
    margin: 10px;  Добавим отступ между карточками
}

.product-link {
    text-decoration: none;
    color: inherit;
}

.product-image {
    width: 100%;  Убедитесь, что изображение занимает всю ширину карточки
    height: 150px;  Высота изображения
    object-fit: cover;
    margin-bottom: 10px;
}

.product-caption {
    padding: 10px;
}

.product-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

.add-to-cart {
    background-color: #8630a3;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    display: block;
    margin: 10px auto;  Центрируйте кнопку внутри карточки
}

.add-to-cart:hover {
    background-color: #5a6268;
}

Flexbox стили для родительского элемента
.carousel-item .d-flex {
    justify-content: space-around;  Распределение пространства вокруг элементов
    align-items: stretch;  Растянуть элементы до одинаковой высоты
} */


@media (max-width: 768px) {



    .product-card {
        width: 100%;  /* Полная ширина для маленьких экранов */
    }

    .carousel-item .d-flex {
        flex-direction: column;  /* Расположение элементов в колонку */
        align-items: center;
    }
}

                    
           .tag-cloud-link:hover {
            transition: transform 0.1s, box-shadow 0.3s;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }
            
            .tag-cloud-link:hover{
            filter: saturate(100%);
            }
        
        
       @media(max-width: 640px){
            .showcase-items {
            flex-direction: column;
            }
        }
/*.card:hover {
    transform: scale(1.05); Увеличивает карту при наведении
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); Добавляет тень
}

.card:hover img {
    filter: saturate(100%); Изменяет насыщенность изображения при наведении
}*/

/*hover эффекты при наведении на карточки товаров */
/*     .card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.card:hover img {
    filter: saturate(100%);
} */

.label,
.label-danger {
    position: relative;
    background: #d3f7d1;
    color: #1ca113;
   /*  display: inline-flex; */      /* фиксирует высоту */
    align-items: center;         /* вертикальное выравнивание */
    justify-content: center;     /* горизонтальное выравнивание */
    border-radius: 5px;
    padding: 4px 9px;           /* чуть больше, чтобы не сплющивалось */
    line-height: 1;              /* НИКОГДА не 0 */
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;         /* не переносить */
}


/* .label::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50em;
    background: #1ca113;
    left: 8px;
    top: 7px;
} */


/* .label-danger::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50em;
    background: #dc3545;
    left: 8px;
    top: 7px; 
} */
.modal-open > .parent{
    filter: blur(4px);
}
.form-control:focus {
    border-color: #8630a3;
    outline: none;
    box-shadow: none;
}

.form-control{
    /* border-color: #8630a3; */
     border: 1px solid #eee;;
     
}


.bg-hero {
/*         background: linear-gradient( 196deg, rgb(235 179 119) 0%, 
rgb(255 255 255) 35%, rgb(255 255 255 / 31%) 127% 
    ); */
}
.text-primary {
    color: #bf00ff !important;
    
}



@media screen and (min-width:389px) and (max-width:768px) {
    p.fs-6.w-100.text{
            margin-top: 68px;
    }
}

p.fs-6.w-100.text {
    color: white;
}




strong.fs-1.text.fw-bold {
    color: white;
}
p.m-0 {
    color: white;
}
p.fs-4.text.m-0 {
    color: black;
}

.btn-primary:hover {
    background-color: #6610f2 !important;
    border-color: #6610f2 !important
}

.btn-primary {
    border: 1px solid #8630a3;
    background-color: #8630a3;
}



@media screen and (min-width:389px) and (max-width:768px) {
        .navbar-nav{
            display: flex;
            align-items: center;
        }
        .btn-primary{
          display: none;
        }
}

.navbar-nav{
    display: flex;
    align-items: center;
}
.nav-item{
    white-space: nowrap; /* Prevent text from wrapping */
}





@media screen and (max-width:768px){
        .btn-group
        {
            display: none;
        }
        .btn-primary{
            display: none;
          }
}


.spin {
    animation: 1s linear 0s normal none infinite running load;
    -webkit-animation: 1s linear 0s normal none infinite running load;
}
@keyframes load {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }
    @-webkit-keyframes load {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.progress {
    position: fixed;
    top: 0;
    z-index: 1500;
    width: 100%;
    height: 5px;
    background-color: #ddd;
    display: none; /* Прогресс-бар будет видим только при загрузке */
}

#progressbar {
    position: absolute;
    width: 0%; /* Начальная ширина */
    height: 100%;
    background-color: #4CAF50; /* Новый цвет вместо красного */
    transition: width 0.4s ease; /* Плавная анимация расширения */
}

#searchForm .btn-close {
    color: #d3f7d1 !important;
}



a.d-flex.flex-column.align-items-center.text-decoration-none.text-dark{
    margin-left: 50px;
}


/* Stars Raiting */
.rating-result {
	position: relative;
    bottom: -8px;
}
.rating-result span {
	padding: 0;
    font-size: 20px;
    margin: 0;
	line-height: 1;
	color: lightgrey;
}
.rating-result > span:before {
	content: '★';
}
.rating-result > span.active {
	color: #f7d441;
}
.rating-area {
	overflow: hidden;
}
.rating-area:not(:checked) > input {
	display: none;
}
.rating-area:not(:checked) > label {
	float: right;
	width: 42px;
	padding: 0;
	cursor: pointer;
	font-size: 32px;
	line-height: 32px;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-area:not(:checked) > label:before {
	content: '★';
}
.rating-area > input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}


.line .badge {display: none;}



@media screen and (min-width:389px) and (max-width:768px) {

    .marquee {
    display:none;
}
.btn-primary{
    display: none;
  }
}



.marquee {
    width: 100%;
    overflow: hidden;
    background-color: transparent;
    color: #ffffff;
    padding-top: 80px;
    font-size: 18px;
    text-align: center;
}

.marquee p {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
}


@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}



.searchForm {
    background-color: #f8f9fa; /* The background color when the input is not active */
    box-shadow: inset 0px -1px 5px #91915947;
    width: 100%;
    cursor: text !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    height: 3rem;
}

.searchForm:focus {
    background-color: #e9ecef;
    box-shadow: inset 0px -1px 5px rgba(0, 0, 0, 0.1), 0px 0px 8px rgba(0, 0, 0, 0.2); /* Highlight the input when focused */
    outline: none; /* Remove the default outline */
}


.search-wrapper {
    background: linear-gradient(90deg, #b3b3b3b6,);
    padding: 10px;
    border-radius: 30px;    
 
}

.searchFormS {
    background-color: #f8f9fa;
    box-shadow: inset 0px -1px 5px #91915947;
    width: 100%;
    cursor: text !important;
/*     margin-top: 20px; */
    border-radius: 20px;
    padding: 15px;
    transition: all 0.3s ease;
}

/*.searchFormS:focus {
    background-color: #dbd2e3;
    box-shadow: inset 0px -1px 5px #b19dc5, 0 0 10px rgba(255, 255, 255, 0.6); 
    width: 950px;
    cursor: text !important;
}*/

/*  .searchForm:focus {
   background-color: #dbd2e3;
   box-shadow: inset 0px -1px 5px #b19dc5;
   width: 910px;
   cursor: text !important;
}

.searchForm {
   background-color: #f8f9fa;
   box-shadow: inset 0px -1px 5px #91915947;
   width: 100%;
   cursor: text !important;
}

.searchFormS {
   background-color: #f8f9fa;
   box-shadow: inset 0px -1px 5px #91915947;
   width: 100%;
   cursor: text !important;
   margin-top: 50px;
}
 */

/* .searchForm {
    background-color: #f8f9fa;
    box-shadow: inset 0px -1px 5px #91915947;
    width: 100%;
    cursor: text !important;
}

form .searchFormS {

    height: 50px;
    padding: 0 20px;
    font-size: 1.2rem;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

form .searchFormS:focus {
    border: 2px solid #4A90E2;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    outline: none;
}

form .searchFormS::placeholder {
    color: #aaa;
    font-style: italic;
}

form .searchFormS + span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

form .searchFormS + span svg {
    width: 25px;
    height: 25px;
    fill: #333;
}

form:hover .searchFormS {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} */

    /* Сбрасываем стандартное оформление ссылок */
    .card-link {
        text-decoration: none;
        color: inherit;
    }

    /* Эффект увеличения карточки при наведении */
    .card-link .card {
        transition: transform 0.3s ease; /* Плавная анимация */
    }

    .card-link:hover .card {
        transform: scale(1.05); /* Увеличиваем размер при наведении */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Тень для визуального эффекта */
    }


.cp {cursor: pointer;}

.card-data.order {
    width: 100%;
}
.card h5, .card-data h5 {
    font-family: 'Jost', sans-serif;
}
.card-data h5:hover {
    text-decoration: 3px underline #8630a3;
    cursor: pointer;
}
.card-data img {
    height: 15em;
    width: 15rem;
    object-fit: cover;
    filter: saturate(200%);
}

.card img {
    height: 15em;
    width: 100%;
    object-fit: cover;
    filter: saturate(150%);
}
.card-data:hover img {
    opacity: 0.9;
    cursor: pointer;
    filter: saturate(200%);
}
.catalog .card-data:hover img {
    opacity: 0.9;
    cursor: pointer;
    filter: saturate(100%);
}


.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
   /*  height: 80%;  */
}


.blue {background-color: blue;}
.coral::after {
    position: absolute;
    content: '';
    /* background-color: #6495ed69; */
    /*background-image: url(/img/46354756.png);*/
    /*background-image: url(/img/val.mp4);*/
    background-position: -1px 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 750px;
    top: 0;
    right: -1px;
    z-index: 2;
    opacity: 0.3;
}


.display-6 {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 300;
    line-height: 1.2;
}

h2.fw-bold.display-6.text {
    text-align: center;
}


@media screen and (min-width:389px) and (max-width:844px) {
   .display-6 {
    padding-top: 15px;
}
}





#myVideo {
  display: block;
  min-width: 100vw;
  min-height: 100vh;
  position: absolute;
  top: 0px;
  left: -10px;
  object-fit: contain;
}

@media screen and (min-width:389px) and (max-width:844px) {
    #myVideo {
          display: block;
          min-width: 100vw;
          min-height: 100vh;
          position: absolute;
          top: 0px;
          left: -10px;
          object-fit: contain;
    }
}

#video_calenval { 
    border: 2px solid #a8a6d5;
    display: block;
    width: 87%;
    /* height: 51%; */
    top: -100px;
    position: relative;
    margin-top: -304px;
    left: 161px;
    object-fit: contain;
    min-width: unset;
    min-height: unset;
}

@media (max-width: 1366px){
    .container.py-1 {
        margin-bottom: -10px;
    }
}


@media (max-width: 389px){
    section.bg-secondary-subtle {
        margin-top: -75px;
    }
}

@media (min-width: 1000px){
    section.bg-secondary-subtle {
    margin-top: -80px;
/*     padding-left: 120px; */
    }
    
    
}

section#bestsellers {
    margin-top: -100px;
}


@media (max-width: 389px){
    .mobile-search {
        position: fixed;
        top: 10px; /* Оставляем как есть */
        left: 45%; /* Центрируем по горизонтали */
        transform: translateX(-50%); /* Сдвигаем на половину ширины влево для точного центрирования */
        z-index: 1000; /* Выше меню */
        /* background: #fff; Фон для видимости */
        padding: 5px;
        /* border-radius: 5px; */
        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Тень для выделения */
        max-width: 300px; /* Увеличиваем ширину (можно сделать ещё больше, например, 350px) */
        width: 45%; /* Делаем ширину адаптивной, чтобы не выходить за края экрана */
    }

    .mobile-search .form-control {
        max-width: 100%; /* Поле ввода растягивается на всю ширину формы */
        font-size: 0.9rem; /* Чуть увеличиваем шрифт для читаемости */
    }

    .mobile-search .btn {
        padding: 5px 10px; /* Оставляем как есть */
    }


    .mobile-brand-narrow{
        margin-top: 90x;
    }


    .narrow-mobile{
        display: none !important;
    }

    section#bestsellers  {
        margin-top: -123px;
        padding-left: 7px;
    }
    
    .col-12.col-lg-8.offset-lg-2.text-center
    {
        display: none;    
    }
    .carousel.slide{
        display:none;
    }
    section#brand{
        display:none;
    }
    .col-8.offset-2.text-center.mt-4{
        display:none;
    }
    section#advantages{
        display:none;
    }
    .bg-light.border-bottom.py-2{

        /* display:none; */
    }
    .mobile-only {
        display: block !important;
    }
    .mobile-only a {
    text-decoration: none;
    }
    .mobile-only img {
        /* border: none; */
    }
    main{
        margin-top: -63px;        
    }


}




.play {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 
}

h1.fw-bold.lh-1.display-4 {
    text-shadow: rgb(255, 255, 255) 1px 1px 0px; 
    color: ghostwhite;
}

.copyright {
    position: absolute;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 49%;
    left: -30px;
    color: #999;
}
.copyright::after {
    position: absolute;
    content: "";
    border-bottom: 1px solid;
    width: 100px;
    margin-top: 14px;
    left: 187px;
    color: #cfcfcf;
}

.copyright::before {
    position: absolute;
    content: "";
    border-bottom: 1px solid;
    width: 100px;
    margin-top: 11px;
    right: 187px;
    color: #cfcfcf;
}
.spates::after {
    position: absolute;
    content: '';
    width: 150px;
    height: 150px;
    background-color: #310062;
    filter: blur(5.5rem);
    border-radius: 50em;
    right: -30px;
    top: 55%;
    z-index: 0;
}
.spates::before {
    position: absolute;
    content: '';
    width: 100px;
    height: 100px;
    border-radius: 50em;
    background-color: rgb(235 179 119);
    filter: blur(3.5rem);
}
.material {
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: left;
    background: #edd8be;
}
/* img.material {
    opacity: .75;
} */
.consumables strong a:hover{
    text-decoration: 3px underline #310062 !important;
    cursor: pointer;
}
.card-title a:hover{
    text-decoration: 3px underline #310062 !important;
    cursor: pointer;
}
.card-title a,
.breadcrumb a {
    color: #000;
    text-decoration: none !important;
}
.breadcrumb a:hover{
    text-decoration: 3px underline #310062 !important;
    cursor: pointer;
}
.bg-primary {
    background-color: #310062 !important;
}
.feat::before {
    position: absolute;
    content: '.....';
    color: #f7dbbd;
    font-size: 36px;
    margin-top: 57px;
    margin-left: 5px;
    transform: rotate(90deg);
    letter-spacing: 3px;
    font-family: cursive;
}

.badge .legend-indicator {
    margin-right: 0.3125rem;
}
.bg-soft-success {
    background-color: rgba(0,201,167,.1)!important;
}
.bg-soft-info {
    background-color: rgba(9,165,190,.1)!important;
}
.bg-soft-dark {
    background-color: rgba(19,33,68,.1)!important;
}
.bg-soft-warning {
    background-color: rgba(245,202,153,.1)!important;
}
.bg-soft-danger {
    background-color: rgba(245, 107, 125, 0.1)!important;
}
.legend-indicator {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #bdc5d1;
    border-radius: 50%;
    margin-right: 0.4375rem;
}


.border-class{
    border: 1px solid #E7EAF1;
    background: #FFF;
    box-shadow: 0px 4px 16px -4px rgba(99, 105, 116, 0.07);
    height: 151px;
}

            .border-class:hover {
            transition: transform 0.3s, box-shadow 0.3s;
            transform: scale(1.05);
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
            }
            
            .border-class:hover img {
            filter: saturate(100%);
            }
            
main.pp-page > section {
    padding: 30px 0 30px; /* или сколько тебе нужно */
}

/* Если где-то еще внутри main есть section (вдруг),
   тоже уберём лишний отступ */
main.pp-page section {
    /* padding-top: 0; */
    padding-bottom: 0;
}

section {
  /*   padding: 90px 0; */
}

footer {
    padding: 25px 0;
}

footer a {
    color: #ddd;
    text-decoration: none;
}
footer a:hover {
    color: #fff;
    text-decoration: underline;
}
#search::placeholder {
    color: #8f8f8f;
    opacity: 1;
    font-size: 15px;
}
  
#search:-ms-input-placeholder {
   color: #8f8f8f;
   font-size: 15px;
}
  
#search::-ms-input-placeholder {
   color: #8f8f8f;
   font-size: 15px;
}
#search::selection {
    color: #fff;
    background-color: #310062;
}
.select::selection {
    color: #f9e086;
    background-color: #310062;
}
.active>.page-link, 
.page-link.active {
    color: #fff !important;
    background-color: #1b1b27;
}

.dropdown-item:active {
    background-color: #310062;
}
.dropdown-item:active span{
    color: #f9e293 !important;
}
.text-justify {
    text-align: justify;
}
.bar {
    width: 15%;
    padding-bottom: 4px;
    margin: 0 auto 25px;
    height: 2px;
    background: #310062;
    border: 0;
    opacity: 1;
}
.btn-check:checked+.btn svg path {
    fill: #fff;
}

@media screen and (max-width:767px) {
    .delete {
        color: #fff;
        background-color: #dc3545;
    }
    .delete svg path {
        fill: #fff !important;
    }
    .indicator {
        font-size: 13px;
        top: 6px !important;
        left: auto;
        right: -18px;
    }
    .nav-link {
        font-size: 25px;
    }
    h1 {
        font-size: 40px !important;
    }
    footer, section {
       /*  padding: 70px 0; */
    }
    .parent {
        display: block !important;
        grid-template-columns: 1fr;  
    }
    .spates::after {
        position: absolute;
        content: '';
        width: 100px;
        height: 100px;
        filter: blur(5.5rem);
        border-radius: 50em;
        right: 90px;
        top: 93%;
        z-index: 0;
    }
    .ng::before {
        width: 100%;
    }
    .card img {
        height: 20em;
    }
    nav ul li {
        padding: 10px;
    }
    .navbar-toggler:focus {
        text-decoration: none;
        outline: none !important;
        box-shadow: none !important;
        
    }
    .brand img {
        width: 40% !important;
    }
    .catalog .card img {
        /* height: 2em; */
        height: 6em;
        width: 100%;
        object-fit: cover;
        filter: saturate(100%);
    }
    
    
    
}
@media screen and (min-width:768px) and (max-width:991px) {
    .indicator {
        font-size: 11px;
        top: 8px;
        left: 35px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .indicator {
        font-size: 12px;
        top: 8px;
        left: 35px;
    }
}
@media screen and (min-width: 1200px) {
    .catalog .card img {
        height: 15em;
        width: 100%;
        object-fit: cover;
        filter: saturate(100%);
    }
    .indicator {
        font-size: 10px;
        top: 8px !important;
        left: 35px;
    }
    .delete {background-color: transparent;}
    .delete svg path {
        fill: #b02a37;
    }
}


/**, 
*:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 
// css для медиа required */
.section-header {
  text-align: center;
  margin: 0 auto;
  padding-top: 70px;
  margin-bottom: 30px;
  font: 300 60px 'Lato', sans-serif;
  letter-spacing: 3px;
  color: #222;
}

.section-header-underline {
  border: 1px solid #222;
  width: 15rem;
  margin: 0 auto;
  margin-bottom: 20px;
}


/* .video-gallery {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1920px;
    list-style: none;
    text-align: center;
  font-family: 'Raleway', sans-serif;
}

.video-gallery figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
     
  max-width: 441px;
    max-height: 250px;
  
    background: #000;
    text-align: center;
    cursor: pointer;
}

.video-gallery figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.video-gallery figure figcaption {
    padding: 2px;
    color: #fff;
    text-transform: uppercase;
    font-size: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.video-gallery figure figcaption::before,
.video-gallery figure figcaption::after {
    pointer-events: none;
}

.video-gallery figure figcaption,
.video-gallery figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Anchor will cover the whole item by default
.video-gallery figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.video-gallery figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.video-gallery figure h2 span {
    font-weight: 800;
}

.video-gallery figure h2,
.video-gallery figure p {
    margin: 0;
}

.video-gallery figure p {
    letter-spacing: 1px;
    font-size: 8px;
}  */

/* Individual effects */


/*----------------------*/
/***** gallery-item *****/
/*----------------------*/

figure.gallery-item {
	background: #000;
}

figure.gallery-item img {
	max-width: none;
	width: -webkit-calc(100% + 20px);
	width: calc(100% +20px );
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.gallery-item:hover img {
	opacity: 0.4;
	
}

figure.gallery-item figcaption {
	text-align: left;
}

figure.gallery-item h2 {
	position: relative;
	overflow: hidden;
	padding: 0.5em 0;
}

figure.gallery-item h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}

figure.gallery-item:hover h2::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.gallery-item p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.gallery-item:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


a.page-link.text-primary.border-0 {
    color: #000000 !important;
}

h2.text-white.pt-5.mb-0.mt-1 {
    /* color: black!important; */
    padding: 130px;
}

/* video#ppmeida {
    display: block;
    min-width: 60vw;
    min-height: 60vh;
    margin: 0 auto;
    padding-bottom: 60px;
    object-fit: contain;
    position:relative;
} */

.alert.alert-warning.d-flex.gap-2.align-items-center.fade.show.border-0 {
    margin-top: 20px;
    width: 35%;
}


.gallery44 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 10px;
}

/* Изображения */
.gallery44 img {
    width: 100%; /* Изображение занимает всю ширину родительского контейнера */
    height: auto; /* Сохраняет пропорции */
    cursor: pointer; /* Указатель при наведении */
    transition: transform 0.2s ease; /* Анимация при наведении */
    border-radius: 8px; /* Сглаженные углы для эстетики */
}

/* Эффект при наведении */
.gallery44 img:hover {
    transform: scale(1.1); /* Легкое увеличение */
}

/* Адаптация для планшетов */
@media (max-width: 768px) {
    .gallery44 {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Уменьшаем минимальную ширину колонок */
    }
}

/* Адаптация для мобильных */
@media (max-width: 480px) {
    .gallery44 {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Уменьшаем минимальную ширину ещё больше */
    }

    .gallery44 img {
        border-radius: 4px; /* Уменьшение радиуса для мобильных */
    }
}
    
    p.text-justify.textt {
    text-align: center;
}

    /* Стили для модального окна */
     .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal-content {
        margin: auto;
        display: block;
        margin-top: 50px;
        width: 80%;
        max-width: 1080px;
        cursor: pointer; /* Добавлен курсор для указания на возможность закрытия */
    }

    .close {
        position: relative;
        top: 122px;
        right: -73px;
        font-size: 40px;
        color: #f1f1f1;
        cursor: pointer;
    }
    
    
    @media (min-width: 389px) and (max-width: 768px) {
        .modal-content {
        margin: auto;
        display: block;
        margin-top: 263px;
        width: 80%;
        max-width: 1080px;
        cursor: pointer; /* Добавлен курсор для указания на возможность закрытия */
        }
    }
    @media (min-width: 389px) and (max-width: 768px) {
        .close {
        position: relative;
        top: 263px;
        right: -73px;
        font-size: 40px;
        color: #f1f1f1;
        cursor: pointer;
        }
    }

/* start */
    .flex-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        flex-direction: column;
    }
    
    .cell {
        padding: 60px;
        margin: 10px 35px;
        border: 1px solid #ccc;
        cursor: pointer;
        text-align: center;
    }
    .cell-error {
        padding: 20px;
        margin: 0 35px;
        border: 1px solid #ccc;
        cursor: pointer;
    }

    .error-list {
        margin-top: 20px;
    }

      .error-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .error-table th, .error-table td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }

    .no-errors {
        margin-top: 20px;
        text-align: center;
    }
/* end */

a.btn.btn-success {
    margin-left: 4px;
}

.search-form {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 35px;
    flex-direction: row;
}

.search-form input[type="text"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-form input[type="text"]:focus {
  border-color: #6c5ce7;
}

.search-form button {
  background-color: #8826ea;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.search-form button:hover {
  background-color: #4a3db8;
}

button.bi.bi-copy.copy-button {
    margin-left: -55px;
    margin-top: -45px;
    border: 0;
    background: none;
}

button.bi1.bi-copy1.copy-button {
    border: 0;
    background: none;
}

.parallax-section {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-content {
    z-index: 2;
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2rem;
    border-radius: 1rem;
}

.ProductGrid.mb-5.row.g-2 .col-md-4, 
.ProductGrid.mb-5.row.g-2 .col-6 {
    transition: transform 0.3s ease-in-out;
    margin-bottom: 1%; /* Добавлено для правильного вертикального расстояния */
}

.ProductGrid.mb-5.row.g-2 .col-md-4:hover, 
.ProductGrid.mb-5.row.g-2 .col-6:hover {
    transform: scale(1.05);
}

.ProductGrid.mb-5.row.g-2 img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ProductGrid.mb-5.row.g-2 .col-md-4::after, 
.ProductGrid.mb-5.row.g-2 .col-6::after {
    content: attr(data-description);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
    white-space: nowrap; /* Чтобы текст не переносился */
    font-size: 12px;
}

.ProductGrid.mb-5.row.g-2 .col-md-4:hover::after, 
.ProductGrid.mb-5.row.g-2 .col-6:hover::after {
    opacity: 1;
    bottom: 0px; 
}

.ProductGrid .col-md-4 a {
    display: block;
    position: relative;
}

.ProductGrid .col-md-4 a img {
    transition: opacity 0.5s ease;
}

.ProductGrid .col-md-4 a:hover img {
    opacity: 0;
}

.ProductGrid .col-md-4 a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ProductGrid .col-md-4 a:hover::before {
    opacity: 1;
}


.info-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    height: 370px;
    width: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0px -48px 254px 86px rgba(0, 0, 0, 0.7);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.info-block:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}

.info-content {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    transition: background 0.3s ease;
}

.info-block:hover .info-content {
    background: rgba(0, 0, 0, 0.7);
}

h2 {
    color: #8630a3;
}

.d-flex.flex-column.gap-3.position-relative.z-3.p-3.p-lg-0 {
    top: 20px;
/*     left: 50px; */
    right: -15px;
    
}

@media (max-width: 768px) {
    .d-flex.flex-column.gap-3.position-relative.z-3.p-3.p-lg-0 {
        top: -80px;
        left: 17px; /* Значение, как вы просили */
    }
}



.d-grid.d-lg-flex.align-items-center.gap-3.gap-lg-4.w-100 {
    margin-left: -20px;
}

/* полноширинный баннер */
.error-hero{
  min-height: 360px;           /* можно подстроить */
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 768px){
  .error-hero{ min-height: 420px; }
}

/* фон-картинка */
.error-hero__bg{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .6s ease;
}

/* затемнение снизу, как у верхнего блока */
.error-hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%);
}

/* лёгкий эффект при ховере */
.error-hero:hover .error-hero__bg{ transform: scale(1.06); }

.Navigation_Block {
    margin-top: 50px;
}

@media (max-width: 389px) and (max-width: 760px){
    /* .Navigation_Block  {
        margin-top: -22px;
        padding-left: 23px;
    } */
}

.full-width {
    width: 100%;
}

/* Блок "Наши бренды" с логотипами */

.pp-section-sub {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
}

/* сетка логотипов */
.pp-brand-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

/* карточка бренда */
.pp-brand-logo-card {
    position: relative;          /* для ::before */
    overflow: hidden;            /* чтобы псевдоэлемент не вылезал */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pp-brand-logo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    border-color: #f97316; /* акцент как в остальном дизайне */
}

/* контейнер для самой картинки */
.pp-brand-logo-img {
    width: 100%;
    max-width: 140px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

/* логотип внутри (базовый вид) */
.pp-brand-logo-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s ease, filter 0.25s ease;
    /* при желании можно сделать чуть менее ярким до ховера */
    filter: grayscale(0.3);
}

/* подпись под логотипом */
.pp-brand-logo-name {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    text-align: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* скрываем название бренда при ховере */
.pp-brand-logo-card:hover .pp-brand-logo-name {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}




/* цветная версия логотипа поверх — по data-description */
.pp-brand-logo-card::before {
    content: "";
    position: absolute;
    inset: 10px 10px 32px; /* сверху/слева/справа и снизу, чтобы не перекрывать подпись */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
}

/* при ховере показываем цветную картинку и скрываем серую */
.pp-brand-logo-card:hover::before {
    opacity: 1;
}

.pp-brand-logo-card:hover .pp-brand-logo-img img {
    opacity: 0;
    filter: none;
}

/* Маппинг data-description -> цветные картинки */

/* MERCEDES-BENZ */
.pp-brand-logo-card[data-description*="MERCEDES-BENZ"]::before {
    background-image: url('/img/goods/promo/561.png');
}

/* Lianzhong */
.pp-brand-logo-card[data-description*="Lianzhong"]::before {
    background-image: url('/img/goods/promo/Lianzhongcolor.png');
}

/* PROXMANN */
.pp-brand-logo-card[data-description*="PROXMANN"]::before {
    background-image: url('/img/goods/promo/proxmancolor.png');
}

/* MVS */
.pp-brand-logo-card[data-description*="MVS"]::before {
    background-image: url('/img/goods/promo/mvscolor.png');
}

/* SUNEX */
.pp-brand-logo-card[data-description*="SUNEX"]::before {
    background-image: url('/img/goods/promo/sunexcolor.png');
}

/* POWERHUB Фильтры */
.pp-brand-logo-card[data-description*="POWERHUB Фильтры"]::before {
    background-image: url('/img/goods/promo/powerhubFcolor.png');
}

/* DONGFA */
.pp-brand-logo-card[data-description*="DONGFA"]::before {
    background-image: url('/img/goods/promo/dongfacolor.png');
}

/* POWERHUB Тормозные диски/колодки */
.pp-brand-logo-card[data-description*="POWERHUB Тормозные диски/колодки"]::before {
    background-image: url('/img/goods/promo/powerhubcolor.png');
}

/* SUOTEPOWER */
.pp-brand-logo-card[data-description*="SUOTEPOWER"]::before {
    background-image: url('/img/goods/promo/suotepowercolor.png');
}

/* GMS */
.pp-brand-logo-card[data-description*="GMS"]::before {
    background-image: url('/img/goods/promo/gmscolor.png');
}

/* АКБ */
.pp-brand-logo-card[data-description*="АКБ"]::before {
    background-image: url('/img/goods/promo/akbcolor.png');
}

/* ROWE */
.pp-brand-logo-card[data-description*="ROWE"]::before {
    background-image: url('/img/goods/promo/oilcolor.png');
}

/* адаптив: чуть крупнее карточки на мобильных */
@media (max-width: 575.98px) {
    .pp-brand-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pp-brand-logo-card {
        padding: 10px 8px;
    }

    .pp-brand-logo-img {
        max-width: 120px;
        height: 48px;
    }
}




.ProductGrid .col-6.full-width img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

/* Specific background images for each item */


[data-description*="MERCEDES-BENZ"] a::before {
    background-image: url('/img/goods/promo/561.png');
}

[data-description*="Lianzhong"] a::before {
    background-image: url('/img/goods/promo/Lianzhongcolor.png');
} 

[data-description*="PROXMANN"] a::before {
    background-image: url('/img/goods/promo/proxmancolor.png');
}

[data-description*="MVS"] a::before {
    background-image: url('/img/goods/promo/mvscolor.png');
}

[data-description*="SUNEX"] a::before {
    background-image: url('/img/goods/promo/sunexcolor.png');
}

[data-description*="POWERHUB Фильтры"] a::before {
    background-image: url('/img/goods/promo/powerhubFcolor.png');
}

[data-description*="DONGFA"] a::before {
    background-image: url('/img/goods/promo/dongfacolor.png');
}

[data-description*="POWERHUB Тормозные диски/колодки"] a::before {
    background-image: url('/img/goods/promo/powerhubcolor.png');
}

[data-description*="SUOTEPOWER"] a::before {
    background-image: url('/img/goods/promo/suotepowercolor.png');
}

[data-description*="GMS"] a::before {
    background-image: url('/img/goods/promo/gmscolor.png');
}


[data-description*="АКБ"] a::before {
    background-image: url('/img/goods/promo/akbcolor.png');
}

[data-description*="ROWE"] a::before {
    background-image: url('/img/goods/promo/oilcolor.png');
}



@media (max-width: 767px) {
    .ProductGrid.mb-5.row.g-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ProductGrid.mb-5.row.g-2 .col-md-4,
    .ProductGrid.mb-5.row.g-2 .col-6 {
        flex: 0 0 48%;
        max-width: 48%;
        margin-bottom: 10px;
    }

    .ProductGrid.mb-5.row.g-2 img {
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
}

@media screen and (max-width: 767px) and (min-width: 389px){
    .ErrorPage.col-12.pb-5 {
        padding-top: 15px;
    }
}




@media only screen and (min-width: 389px) and (max-width: 844px){
        .alert.alert-warning.d-flex.gap-2.align-items-center.fade.show.border-0 {
            margin-top: 20px;
            width: 350px;
        }
}



@media screen and (max-width: 50em) {
	.video-gallery figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}


/* Для ширины экрана от 1042px до 1439px */
@media screen and (min-width: 1042px) and (max-width: 1439px) {
li.nav-item-phone {
    width: 97px;
}
button.bi.bi-copy.copy-button {
    margin-left: -2px;
    margin-top: -45px;
    border: 0;
    background: none;
}
}

/* Для ширины экрана от 992px до 1073px */
@media screen and (min-width: 992px) and (max-width: 1073px) {
li.nav-item-phone {
    width: 97px;
}
button.bi.bi-copy.copy-button {
    margin-left: -2px;
    margin-top: -45px;
    border: 0;
    background: none;
}
}



/* Для ширины экрана от 0px до 1041px */
@media screen and (max-width: 1041px) {
li.nav-item-phone {
   /*  width: 97px; */
}
button.bi.bi-copy.copy-button {
    margin-left: -450px;
   /*  margin-left: -2px; */
    margin-top: -45px;
    border: 0;
    background: none;
}
}


@media screen and (min-width: 389px) and (max-width: 640px){
    button.bi.bi-copy.copy-button {
        margin-left: -150px;
        margin-top: -45px;
        border: 0;
        background: none;
    }
}


/* Плавная анимация для слайдера */
.carousel-item {
    transition: opacity 0.3s ease-in-out, transform 1s ease-in-out !important; 
    /* transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
     */
}


/* Центрирование стрелок на слайдере */
.carousel-control-prev.centered-arrow,
.carousel-control-next.centered-arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
    background: white !important;
}

.carousel-control-prev.centered-arrow:hover,
.carousel-control-next.centered-arrow:hover {
    opacity: 1 !important;
}

/* Перемещение стрелок внутрь изображения */
.carousel-control-prev.centered-arrow {
    left: 130px !important; /* Отступ от левого края изображения */
}

.carousel-control-next.centered-arrow {
    right: 130px !important; /* Отступ от правого края изображения */
}

/* Hover-эффект для блоков promo-box */
.promo-box {
            height: 56%;
            transition: transform 0.3s ease, box-shadow 0.3s ease !important;
            width: 118% !important; Растягиваем блоки на всю ширину
        }

        .promo-box:hover {
            transform: scale(1.02) !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
        }

        /* Стили для текста в блоках */
        .promo-box p {
            margin: 0.5rem 0 !important;
            word-wrap: break-word; /* Перенос длинных слов */
        }

        .promo-box .btn {
            margin-top: 1rem !important;
        }
          
          
         @media (max-width: 390px) {
            .promo-box.custom-product-card {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            /* Слайдер с товарами */
            #promoCarousel img {
                height: 300px; /* Уменьшаем высоту изображений */
                object-fit: cover;
            }
            #promoCarousel .carousel-control-prev,
            #promoCarousel .carousel-control-next {
                width: 10%; /* Увеличиваем область клика для стрелок */
            }
            #promoCarousel .carousel-indicators {
                bottom: 10px; /* Поднимаем точки ближе к изображению */
            }
        
            .promo-box.custom-product-card {
                margin-top: 18px;
            }
            /* Правая часть с описанием */
            .promo-box {
                padding: 1.5rem; /* Уменьшаем отступы */
            }
            .promo-box h3 {
                font-size: 1.5rem; /* Уменьшаем заголовок */
            }
            .promo-box p {
                font-size: 0.9rem; /* Уменьшаем текст */
            }
        
            /* Секция поиска (если активировать) */
            #searchForm {
                flex-direction: column; /* Вертикальное расположение на мобильных */
                align-items: center;
            }
            #searchForm input {
                width: 100%; /* Полная ширина поля ввода */
                margin-bottom: 10px;
                border: 1px solid #ced4da; /* Восстанавливаем границы */
            }
            #searchForm button {
                width: 50%; /* Уменьшаем ширину кнопки */
            }
            #searchForm div {
                margin: 0 0 10px 0; /* Убираем правый отступ */
                font-size: 1rem; /* Уменьшаем текст "Введите артикул" */
            }
        
            /* Секция "Бренды" */
            .ProductGrid .col-6 {
                flex: 0 0 100%; /* По одному бренду в ряд на маленьких экранах */
                max-width: 100%;
            }
        
            /* Блоки навигации */
            .Navigation_Block .col-md-6 {
                flex: 0 0 100%; /* По одному блоку в ряд */
                max-width: 100%;
            }
            .info-block {
                max-width: 100%; /* Убираем ограничение ширины */
            }
        
            /* Баннер "Аккумуляторы" */
            .DongBanner h2 {
                font-size: 1.8rem; /* Уменьшаем заголовок */
            }
            .DongBanner .btn {
                font-size: 1rem; /* Уменьшаем кнопку */
                padding: 0.5rem 1.5rem;
            }
        
            /* Секция "Хиты продаж" */
            #bestsellers-carousel .carousel-item .col-12 {
                padding: 0 10px; /* Уменьшаем отступы между карточками */
            }
            #bestsellers-carousel .card-title {
                font-size: 1rem; /* Уменьшаем заголовок карточки */
            }
            #bestsellers-carousel .btn {
                font-size: 0.9rem; /* Уменьшаем кнопку */
                padding: 0.5rem;
            }
        
            /* Секция "Запасные части" */
            #spareparts {
                display: block !important; /* Показываем на мобильных */
            }
            #spareparts .col {
                flex: 0 0 50%; /* По два бренда в ряд */
                max-width: 50%;
            }
            #spareparts .card-body {
                padding: 1rem; /* Уменьшаем отступы */
            }
            #spareparts h5 {
                font-size: 1rem; /* Уменьшаем текст */
            }
        
            /* Секция "Наши преимущества" */
            .feat span svg {
                width: 30px; /* Уменьшаем размер иконок */
                height: 30px;
            }
            .feat strong {
                font-size: 1.5rem; /* Уменьшаем заголовки */
            }
            .feat p {
                font-size: 0.9rem; /* Уменьшаем текст */
            }
            #advantages .display-3 {
                font-size: 2rem; /* Уменьшаем главный заголовок */
            }
            #advantages img {
                margin-bottom: 20px; /* Добавляем отступ под изображением */
            }
        }
        
        @media (max-width: 390px) {
           .promo-box {
                width: 100% !important;
            }
        }

        .nav-item.nav-pc {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            margin-left: 0; /* Align to the left */
            margin-right: auto; /* Ensure no margin on the right */
            margin-top: 0;
            margin-bottom: 0;
          }
          
          .nav-link {
            /* font-family: 'Roboto', sans-serif; */
            transition: color 0.3s ease;
          }
          
          .nav-link:hover {
            color: #3498db;
          }
          
          .nav-list {
            list-style: none;
            padding: 0;
            margin-top: 10px;
          }
          
          .nav-list-item {
            display: block;
            text-decoration: none;
            color: #333;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s ease;
            border: 1px solid #e0e0e0; /* Border around each item */
            margin-bottom: 5px; /* Space between items */
          }
          
          .nav-list-item:hover {
            background-color: #3498db;
            color: white;
            transform: translateX(5px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-color: #3498db; /* Change border color on hover */
          }
        
          .nav-item.nav-pc {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            margin-left: 0; /* Align to the left */
            margin-right: auto; /* Ensure no margin on the right */
            margin-top: 0;
            margin-bottom: 0;
          }
          
          .nav-link {
            transition: color 0.3s ease;
          }
          
          .nav-link:hover {
            color: #3498db;
          }
          
          .nav-list {
            list-style: none;
            padding: 0;
            margin-top: 10px;
          }
          
          .nav-list li:not(:last-child) .nav-list-item {
            border-bottom: 1px solid #e0e0e0; /* Divider between items */
          }
          
          .nav-list-item {
            display: block;
            text-decoration: none;
            color: #333;
            font-size: 16px;
            font-family: 'Roboto', sans-serif;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s ease;
          }
          
          .nav-list-item:hover {
            background-color: #3498db;
            color: white;
            transform: translateX(5px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          }
          
@media (max-width: 576px) {
    .product-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 0;
        font-size: 14px;
    }

    .product-row .col-12 {
        padding: 4px 0;
    }

    .product-row .product-image {
        width: 45px;
        height: 45px;
        margin-right: 10px;
    }

    .product-row .product-info {
        flex: 1 1 60%;
    }

    .product-row .product-status {
        flex: 1 1 40%;
        text-align: right;
    }

    .product-row .product-name,
    .product-row .product-article,
    .product-row .product-title {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-row .product-price {
        font-weight: bold;
        margin-top: 4px;
    }

    .product-row .product-button {
        margin-top: 6px;
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
  .product-row .cart-button {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }
}

/* === БАЗОВЫЙ ОТСТУП ДЛЯ ВСЕХ СТРАНИЦ === */
/* Шапка fixed-top висит поверх всего, поэтому даём main отступ сверху */
main {
    padding-top: 0px !important;
}

/* === УСИЛЕННЫЙ ОТСТУП ДЛЯ ТОВАРОВ, СКЛАДА, МАСЛА === */

/* Десктоп */
.products-page main {
    padding-top: 80px !important;
}

/* Планшеты */
@media (max-width: 1024px) {
    .products-page main {
        padding-top: 105px !important;
    }
}

/* Мобильные */
@media (max-width: 768px) {
    .products-page main {
        padding-top: 10px !important;
    }
}

/* Маленькие экраны */
@media (max-width: 480px) {
    .products-page main {
        padding-top: 10px !important;
    }
}