:root {
    --accent: #d4af37;
    --black: #111;
    --muted: #6b6b6b;
    --bg: #ffffff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
    color: var(--black);
    line-height: 1.5;
}

/* HEADER */

/* ===== MAIN HEADER ===== */
.logo {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #111;
}

.logo:hover {
    color: #d4af37;
}

.main-nav a {
    text-decoration: none;
    color: #111;
    font-weight: 500;
    margin-left: 28px;
    position: relative;
    transition: color .25s ease;
}

.main-nav a:hover {
    color: #d4af37;
}

/* тонкая линия под активной ссылкой */
.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #d4af37;
}

/* CARDS */

.card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* TABLE PREMIUM */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

th {
    background: var(--black);
    color: var(--accent);
    padding: 14px;
    text-align: left;
}

td {
    padding: 14px;
    border-bottom: 1px solid #f2f2f2;
}

tr:hover {
    background: rgba(212,175,55,0.04);
}

/* SIDEBAR */

/* ===== Premium sidebar styles ===== */
:root{
    --sb-bg: #0b0b0b;        /* sidebar background */
    --sb-accent: #d4af37;    /* gold accent */
    --sb-text: #f5f5f5;      /* main text */
    --sb-sub: #cfcfcf;       /* sub text */
    --sb-radius: 12px;
    --sb-width: 300px;
    --sb-shadow: 0 10px 40px rgba(0,0,0,0.4);
}


/* top row */
.sidebar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sidebar-title{font-size:20px;color:var(--sb-accent);font-weight:700;margin:0}
.sidebar-collapse{background:transparent;border:0;color:var(--sb-text);cursor:pointer;display:flex;gap:4px;align-items:center}
.sidebar-collapse .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.08);display:inline-block}
.sidebar-collapse:hover .dot{background:var(--sb-accent)}

/* groups */
.nav-group{margin-top:16px}
.group-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:transparent;
    border:0;
    padding:8px 6px;
    color:var(--sb-text);
    font-weight:700;
    cursor:pointer;
    border-radius:8px;
    transition:background .15s, color .15s;
}
.group-toggle:hover{background:rgba(255,255,255,0.02)}
.group-toggle .group-name{font-size:15px}
.group-toggle .chev{color:var(--sb-accent);transform:rotate(0deg);transition:transform .18s}

/* open state */
.nav-group[aria-open="true"] .chev{transform:rotate(90deg)}
.nav-group[aria-open="true"] .group-toggle{color:var(--sb-accent)}

/* list */
.group-list{list-style:none;padding-left:10px;margin:8px 0 0 0;max-height:1000px;transition:max-height .28s;overflow:hidden}
.group-list li{margin:7px 0}
.group-list a{
    color:var(--sb-sub);
    text-decoration:none;
    display:block;
    padding:8px 10px;
    border-radius:8px;
    transition:background .12s, color .12s, transform .08s;
    font-size:14px;
}
.group-list a:hover{
    color:var(--sb-text);
    background:rgba(255,255,255,0.02);
    transform: translateX(4px);
}

/* active */
.group-list a.active{
    color:var(--sb-accent);
    background:linear-gradient(90deg, rgba(212,175,55,0.08), transparent);
    box-shadow: inset 4px 0 0 rgba(212,175,55,0.12);
}

/* footer cta */
.nav-footer{margin-top:20px;border-top:1px solid rgba(255,255,255,0.03);padding-top:14px;color:var(--sb-sub);font-size:13px}
/* ===== Premium Minimal CTA ===== */

/* ===== FINAL PREMIUM CTA ===== */

/* ===== HARD OVERRIDE PREMIUM CTA ===== */

.premium-sidebar .cta-offer {
    display: block;
    width: 100%;
    margin-top: 18px;

    padding: 12px 16px;
    border-radius: 6px;

    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
    text-decoration: none;

    background: transparent;
    color: #d4af37;

    border: 1px solid #d4af37;

    transition: background .25s ease, color .25s ease;
}

.premium-sidebar .cta-offer:hover {
    background: #d4af37;
    color: #111;
}

/* custom scrollbar (WebKit) */
.premium-sidebar::-webkit-scrollbar{width:10px}
.premium-sidebar::-webkit-scrollbar-track{background:transparent}
.premium-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:8px}
.premium-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.12)}

/* responsive */
@media (max-width:1000px){
    .premium-sidebar{width:100%;position:relative;height:auto;top:0;margin-bottom:12px}
}


/* SEARCH */

.search-input {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #eee;
    font-size: 16px;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* FOOTER */

footer {
    border-top: 1px solid #eee;
    padding: 20px;
    color: var(--muted);
    font-size: 14px;
}
/* ===== PREMIUM HERO ===== */

.hero-premium{
    position: relative;
    width: 100%;
    height: 650px;

    background: url("images/u4839766217_Modern_minimalist_interior_with_solid_European_oa_d8ae60ef-1111-40c6-9690-9b2feb378989_0.png") center center / cover no-repeat;

    display: flex;
    align-items: center;

    padding-left: 8%;
    padding-bottom:120px;
}

.hero-left {
    flex: 1;
}

.hero-left h1 {
    font-size: 46px;
    line-height: 1.15;
    margin-bottom: 18px;
    font-weight: 700;
    color:#fff;
    text-shadow: 0 6px 25px rgba(0,0,0,0.4);
}

.hero-sub {
    font-size: 18px;
    color: #f2f2f2;
    margin-bottom: 28px;
    text-shadow:0 3px 15px rgba(0,0,0,0.3);
}

.cta-row {
    margin-bottom: 28px;
}

.btn-main:hover {
    background: #d4af37;
    color: black;
}

.btn-secondary:hover {
    background: #111;
    color: white;
}

.trust {
    margin-top: 10px;
    font-size: 15px;
    display: grid;
    gap: 6px;
    color:#e8e8e8;
    text-shadow:0 2px 12px rgba(0,0,0,0.35);
}
.hero-right {
    width: 420px;
}

.logo-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    text-align: center;
    transition: 0.4s;
}

.logo-card img {
    width: 100%;
    max-width: 280px;
}

.logo-caption {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

/* Responsive */

@media (max-width: 1000px) {
    .hero-right {
        width: 100%;
    }

    .hero-left h1 {
        font-size: 32px;
    }
}
/* ===== Sidebar: visual polish ===== */

/* Скрыть маленькие стрелочки у заголовков групп */
.group-toggle .chev {
    display: none !important;
}

/* Скрыть 3 точки вверху (толкать туда не нужно) */
.sidebar-collapse {
    display: none !important;
}

/* Премиум-стиль для кнопки "Vraag offerte" (sidebar) */


/* немного интерактива при ховере */

/* Вид активной подкатегории — ясная рамка + фон */
.group-list a.active {
    color: var(--sb-accent); /* уже задано, оставляем золото */
    background: linear-gradient(90deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02));
    box-shadow:
            inset 6px 0 0 rgba(212,175,55,0.16),    /* золотая полоска слева */
            0 6px 20px rgba(0,0,0,0.06);            /* лёгкая внешняя тень */
    border-radius: 9px;
    padding-left: 12px; /* чуть смещаем текст от полоски */
    border: 1px solid rgba(212,175,55,0.06);
}

/* Фокус при табе — для доступности */
.group-list a:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(212,175,55,0.08);
}

/* Уберём лишний отступ у group-toggle (т.к. стрелки убрали) */
.group-toggle {
    padding-right: 8px;
}

/* Немного смягчим текст в подэлементах для премиального вида */
.group-list a {
    color: var(--sb-sub);
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* Если нужно — чуть изменить палитру: */
:root{
    /* при желании поменяй эти два значения */
    --sb-accent: #d4af37; /* золото */
    --sb-sub: #d9d7d0;
}
html {
    scroll-behavior: smooth;
}
.group-title {
    font-size: 26px;
    margin-top: 60px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}
.group-list a.active {
    color: #d4af37;
    background: transparent;
    box-shadow: inset 3px 0 0 #d4af37;
}

.sidebar-indicator {
    position: absolute;
    left: 0;
    width: 4px;
    background: #d4af37;
    border-radius: 4px;
    transition: top 0.35s ease, height 0.35s ease;
}
/* ===== PAGE LOADER ===== */

#page-loader{
    position: fixed;
    inset: 0;
    background: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .6s ease, visibility .6s ease;
}

#page-loader.hide{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner{
    text-align: center;
}

.loader-logo{
    font-size: 22px;
    letter-spacing: 2px;
    color: #d4af37;
    font-weight: 600;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeLogo 1.2s ease forwards;
}

.loader-line{
    width: 0;
    height: 2px;
    background: #d4af37;
    animation: loadLine 1.8s ease forwards;
}

@keyframes loadLine{
    0%{width:0;}
    100%{width:220px;}
}

@keyframes fadeLogo{
    to{opacity:1;}
}
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.section {
    margin-bottom: 70px;
}

.section h2 {
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-bottom: 22px;
}
h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.3px;
}

p {
    color: #444;
}
section {
    padding-top: 20px;
}
/* ===== HEADER SCROLL EFFECT ===== */



.main-header.shrink {
    padding: 8px 0;
}

.main-header.shrink .header-inner {
    padding: 12px 40px;
}

.main-header.shrink .logo {
    font-size: 16px;
}


.price-btn .plus {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}


th:last-child,
td.price-cell {
    width: 220px;
    text-align: center;
}

.price-cell {
    padding-right: 20px;
}

.price-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.price-text {
    min-width: 70px;
    text-align: right;
    font-weight: 500;
    font-size: 15px;
}
/* ===== PREMIUM ADD TO CART BUTTON ===== */

.price-btn{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #d4af37;
    background: transparent;
    color: #111;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.price-btn:hover{
    background: rgba(212,175,55,0.08);
    transform: scale(1.05);
}

/* состояние добавлено */
.price-btn.added{
    background: #d4af37;
    color: #111;
    box-shadow: 0 0 20px rgba(212,175,55,0.45);
    transform: scale(1.1);
}

.price-btn .plus{
    transition: all .3s ease;
}

.price-btn.added .plus{
    transform: scale(0);
    opacity: 0;
}

/* галочка */
.price-btn::after{
    content: "✓";
    position: absolute;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.6);
    transition: all .3s ease;
}

.price-btn.added::after{
    opacity: 1;
    transform: scale(1);
}
/* ===== CART INDICATOR ===== */

.cart-link{
    position: relative;
    margin-left: 20px;
    text-decoration: none;
    font-size: 20px;

}

.cart-icon{
    transition: transform .25s ease;
}

.cart-link:hover .cart-icon{
    transform: scale(1.1);
}

.cart-count{
    position: absolute;
    top: -6px;
    right: -10px;
    background: #d4af37;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ===== MINI CART ===== */

.mini-cart{
    position: fixed;
    top: 0;
    right: -400px;
    width: 360px;
    height: 100%;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
    padding: 30px;
    transition: right .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.mini-cart.open{
    right: 0;
}

.mini-cart-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mini-cart-header h3{
    margin: 0;
    font-size: 18px;
}

#close-cart{
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.mini-cart-items{
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
}

.mini-cart-item{
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.empty-cart{
    color: #888;
}

.mini-cart-footer{
    padding-top: 20px;
}

.cart-submit{
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: none;
    background: #111;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.cart-submit:hover{
    background: #d4af37;
    color: #111;
}
/* ===== CART OVERLAY ===== */

.cart-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
    z-index: 9998;
}

.cart-overlay.open{
    opacity: 1;
    visibility: visible;
}

.remove-item{
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    transition: .2s;
}

.remove-item:hover{
    color: #d4af37;
}
.cart-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.remove-item{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    color:#999;
    transition:.2s;
}

.remove-item:hover{
    color:#d4af37;
}
.clear-cart-btn{
    width:100%;
    padding:12px;
    margin-bottom:12px;
    border:none;
    background:#f5f5f5;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.clear-cart-btn:hover{
    background:#eee;
}

.mini-cart-item{
    transition:.2s ease;
}

.cart-bounce {
    animation: cartPulse .4s ease;
}

@keyframes cartPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
/* ===== ORDER MODAL ===== */

.order-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:10000;
}

.order-overlay.open{
    opacity:1;
    visibility:visible;
}

.order-modal{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.95);
    background:#fff;
    padding:40px;
    border-radius:14px;
    width:400px;
    max-width:90%;
    box-shadow:0 30px 80px rgba(0,0,0,0.15);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:10001;
}

.order-modal.open{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}

.order-modal input{
    width:100%;
    padding:14px;
    margin:20px 0;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
}

.order-actions{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.order-actions button{
    flex:1;
    padding:12px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
}

#cancel-order{
    background:#f2f2f2;
}

#confirm-order{
    background:#111;
    color:#fff;
}

#confirm-order:hover{
    background:#d4af37;
    color:#111;
}
/* ===============================
   ABOUT PAGE PREMIUM
=============================== */

.about-hero {
    color: white;
    text-align: center;
    position:relative;
    background:url("images/eikenchenebe-planken-gent-hout.jpg") center/cover no-repeat;
    padding:140px 40px;
}
.about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

.about-hero h1 {
    font-size: 42px;
    margin-bottom: 20px;
}

.about-hero p {
    max-width: 700px;
    margin: 0 auto;
    color: #ddd;
    font-size: 18px;
}

.about-section {
    padding: 80px 40px;
}

.about-section.light {
    background: #fafafa;
}

.about-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
}

.about-grid.reverse {
    flex-direction: row-reverse;
}

.about-text h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.about-text p {
    color: #555;
    margin-bottom: 16px;
    line-height: 1.6;
}

.about-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* Gallery */

.about-gallery {
    padding: 80px 40px;
    text-align: center;
}

.about-gallery h2 {
    margin-bottom: 40px;
    font-size: 30px;
}

.gallery-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.gallery-item img {
    width: 100%;
    border-radius: 14px;
    transition: transform .4s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

/* Responsive */

@media (max-width: 900px) {
    .about-grid {
        flex-direction: column;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .about-hero h1 {
        font-size: 30px;
    }
}
.about-features {
    padding: 90px 40px;
    background: #111;
    color: white;
}

.features-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.features-inner h2 {
    margin-bottom: 50px;
    font-size: 30px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-card {
    background: rgba(255,255,255,0.04);
    padding: 30px;
    border-radius: 14px;
    transition: .3s;
}

.feature-card:hover {
    background: rgba(212,175,55,0.1);
    transform: translateY(-6px);
}

.feature-card h3 {
    margin-bottom: 15px;
    color: #d4af37;
}

.feature-card p {
    color: #ccc;
    font-size: 14px;
}

@media (max-width: 1000px){
    .features-grid {
        grid-template-columns: 1fr;
    }
}
.about-stats {
    padding: 80px 40px;
    background: #fafafa;
}

.stats-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat h2 {
    font-size: 36px;
    color: #d4af37;
    margin-bottom: 10px;
}

.stat p {
    color: #666;
}

@media (max-width: 800px){
    .stats-inner {
        flex-direction: column;
        gap: 30px;
    }
}
/* ===== ABOUT LOCATION ===== */

.about-location{
    padding: 80px 40px;
    background: #fafafa;
}

.about-location-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.location-text h2{
    font-size: 32px;
    margin-bottom: 25px;
}

.location-text p{
    margin-bottom: 25px;
    color: #555;
    line-height: 1.6;
}

.opening-hours{
    margin-bottom: 30px;
}

.hours-row{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}

.hours-row span:last-child{
    color: #666;
}

.appointment-note{
    margin-top: 15px;
    font-size: 14px;
    color: #777;
}

.route-btn{
    display: inline-block;
    padding: 12px 22px;
    background: #111;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.route-btn:hover{
    background: #d4af37;
    color: #111;
}

.location-map iframe{
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* responsive */

@media (max-width: 1000px){
    .about-location-inner{
        grid-template-columns: 1fr;
    }

    .location-map iframe{
        height: 350px;
    }
}
/* ===== PREMIUM FOOTER ===== */

.premium-footer{
    background: #0b0b0b;
    color: #eee;
    padding-top: 70px;
    margin-top: 80px;
}

.footer-inner{
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

.footer-col h3{
    color: #d4af37;
    font-size: 20px;
    margin-bottom: 18px;
}

.footer-col h4{
    color: #d4af37;
    font-size: 15px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p{
    margin-bottom: 10px;
    font-size: 14px;
    color: #aaa;
}

.footer-col a{
    display: block;
    text-decoration: none;
    color: #aaa;
    font-size: 14px;
    margin-bottom: 10px;
    transition: 0.3s;
}

.footer-col a:hover{
    color: #d4af37;
    transform: translateX(4px);
}

.footer-email{
    color: #d4af37;
    font-weight: 600;
}

.footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: #777;
}

/* responsive */

@media (max-width: 1000px){
    .footer-inner{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px){
    .footer-inner{
        grid-template-columns: 1fr;
    }
}
/* ===== FOOTER SOCIALS ===== */

.footer-socials{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-link{
    text-decoration: none;
    color: #aaa;
    font-size: 14px;
    transition: 0.3s;
    position: relative;
    padding-left: 18px;
}

.social-link::before{
    content: "●";
    position: absolute;
    left: 0;
    color: #444;
    transition: 0.3s;
}

.social-link:hover{
    color: #d4af37;
    transform: translateX(4px);
}

.social-link:hover::before{
    color: #d4af37;
}

/* WhatsApp accent */

.social-link.whatsapp{
    color: #25D366;
    font-weight: 600;
}

.social-link.whatsapp:hover{
    color: #1ebe57;
}

.quality-btn{
    padding:8px 16px;
    border-radius:20px;
    border:1px solid #ddd;
    background:white;
    cursor:pointer;
    transition:.3s;
    font-size:14px;
}

.quality-btn.active{
    background:#111;
    color:white;
    border-color:#111;
}

.quality-btn:hover{
    border-color:#d4af37;
    color:#d4af37;
}

.cart-quality{
    font-size:12px;
    font-weight:600;
    color:#d4af37;
}
.bordes-note{
    margin-top: 25px;
    padding: 18px 22px;
    background: #fafafa;
    border-left: 4px solid #d4af37;
    border-radius: 8px;
    font-size: 15px;
    color: #444;
}

.bordes-note strong{
    color: #111;
}

.note-small{
    margin-top: 6px;
    font-size: 14px;
    color: #777;
}
.bordes-cta{
    display: inline-block;
    margin-top: 15px;
    padding: 12px 22px;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all .3s ease;
}

.bordes-cta:hover{
    background: #d4af37;
    color: #111;
    transform: translateY(-2px);
}
.product-preview{
    margin: 20px 0;
    text-align: right;
}

.preview-btn{
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #d4af37;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    transition: .3s;
}

.preview-btn:hover{
    background: #d4af37;
    color: #111;
}

/* modal */
.preview-modal.open{
    opacity: 1;
    visibility: visible;
}

.preview-content{
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
}

.preview-content img{
    width: 100%;
    border-radius: 10px;
}

#close-preview{
    float: right;
    cursor: pointer;
    font-size: 18px;
}
.preview-modal {
    border-radius: 14px;
}

/* ===============================
   PREMIUM PRODUCT PREVIEW MODAL
================================ */

.preview-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
    z-index: 9998;
}

.preview-overlay.open{
    opacity: 1;
    visibility: visible;
}

.preview-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.95);
    opacity: 0;
    visibility: hidden;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    z-index: 9999;

    width: 720px;
    max-width: 92%;
    background: transparent; /* ВАЖНО */
}


.preview-modal.open{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* рамка */
.preview-frame{
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    position: relative;
}

/* картинка */
.preview-frame img{
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* стрелки */
.preview-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .25s ease;
}

.preview-arrow:hover{
    background: #111;
    color: #fff;
    border-color: #111;
}

.preview-prev{
    left: -60px;
}

.preview-next{
    right: -60px;
}

/* крестик */
.preview-close{
    position: absolute;
    top: -55px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.preview-close:hover{
    background: #111;
    color: #fff;
    border-color: #111;
}


/* адаптив */
@media(max-width:768px){
    .preview-frame img{
        height: 260px;
    }
    .preview-prev{ left: 10px; }
    .preview-next{ right: 10px; }
}


.cart-controls{
    display:flex;
    align-items:center;
    gap:10px;
}

.qty-plus,
.qty-minus{
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid #d4af37;
    background:transparent;
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.qty-plus:hover,
.qty-minus:hover{
    background:#d4af37;
    color:#111;
}

.qty-count{
    min-width:20px;
    text-align:center;
    font-weight:600;
}
.size-note{
    margin-top: 25px;
    padding: 20px;
    border-radius: 12px;
    background: #faf9f6;
    border: 1px solid #eee;
    text-align: center;
}

.size-note p{
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #555;
}

.size-note-btn{
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
}

.size-note-btn:hover{
    background: #d4af37;
    color: #111;
}


.quick-lookup{ margin-bottom:20px; }

/* ===== REQUEST FORM LAYOUT FIX ===== */

#request-form {
    max-width: 1100px;
    margin: 80px auto;
    padding: 50px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow:
            0 30px 80px rgba(0,0,0,0.05),
            0 8px 30px rgba(0,0,0,0.03);
}

#quick-result{ font-weight:600;color:var(--accent); }

.small-input {
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    font-size: 15px;
    transition: all 0.25s ease;
}

.small-input:focus {
    outline: none;
    border-color: #111;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

#req-notes {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    resize: vertical;
    min-height: 90px;
    transition: all 0.25s ease;
}

#req-notes:focus {
    outline: none;
    border-color: #111;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.btn {
    padding: 14px 28px;
    border-radius: 999px;
    border: none;
    background: #111;
    color: white;
    font-weight: 500;
    transition: all 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}


.request-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 40px;
    box-shadow:
            0 20px 60px rgba(0,0,0,0.06),
            0 4px 12px rgba(0,0,0,0.04);
}

#request-form h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

#request-form h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, #111, #777);
}

.quick-lookup {
    background: linear-gradient(145deg, #ffffff, #f7f7f7);
    border-radius: 32px;
    padding: 35px 40px;
    box-shadow:
            0 25px 60px rgba(0,0,0,0.05),
            0 6px 20px rgba(0,0,0,0.03);
    margin-bottom: 50px;
}
.lookup-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
}

.lookup-sub {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}
#quick-search {
    padding: 16px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, #111, #333);
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
}

#quick-search:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.quick-lookup .small-input {
    border-radius: 18px;
    padding: 14px 18px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.quick-lookup .small-input:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
#scroll-to-request {
    border-radius: 999px;
    padding: 10px 22px;
    background: transparent;
    border: 1px solid #e5e5e5;
    color: #111;
    transition: all 0.3s ease;
}

#scroll-to-request:hover {
    background: #111;
    color: #000000 !important;
    border-color: #111;
}
.hero-section {
    margin-bottom: 40px;
}

.hero-text h1 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 6px;
}

.hero-features {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    color: #444;
    font-size: 14px;
}

.feature-item {
    background: #f8f8f8;
    padding: 8px 14px;
    border-radius: 30px;
}
.quality-info-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #111;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.quality-info-btn:hover {
    transform: scale(1.1);
}

#quality-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}

#quality-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: white;
    padding: 40px;
    border-radius: 20px;
    width: 600px;
    max-width: 90%;
    display: none;
    z-index: 1000;
    transition: 0.3s ease;
}

#quality-modal.open {
    display: block;
    transform: translate(-50%, -50%) scale(1);
}

#quality-modal-overlay.open {
    display: block;
}

#quality-close {
    position: absolute;
    top: 15px;
    right: 20px;
    border: none;
    background: none;
    font-size: 28px;
    cursor: pointer;
}

.quality-block img {
    width: 100%;
    border-radius: 14px;
    margin-top: 10px;
}
.note-small {
    margin-top:15px;
    color:#777;
    font-size:14px;
}
.section h2 {
    font-size:22px;
    margin-bottom:6px;
}

.section {
    padding-top:20px;
    border-top:1px solid #f3f3f3;
}


.lookup-controls {
    margin-bottom: 25px;
}
.quality-info-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #111;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.quality-info-btn:hover {
    transform: scale(1.1);
}

@media (max-width: 900px){

    .premium-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        margin-bottom: 20px;
    }

    .content {
        width: 100%;
    }
}
.lookup-inputs {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.lookup-inputs .small-input {
    flex: 1;
}
#page-loader {
    display: none !important;
}

/* INFO BUTTON */
.quality-info-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:#111;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.quality-info-btn:hover{
    transform:scale(1.1);
}

@keyframes floatIn{
    from{
        transform:translateY(-20px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* ===== HEADER QUALITY SWITCH ===== */

.header-quality-switch{
    position:relative;
    display:flex;
    align-items:center;
    background:#f3f3f3;
    border-radius:999px;
    padding:4px;
    width:110px;
    height:34px;
    margin-right:18px;
    overflow:visible;
}

.hq-slider{
    position:absolute;
    top:4px;
    left:4px;
    width:48px;
    height:26px;
    background:#111;
    border-radius:999px;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    z-index:1;
}

.hq-option{
    flex:1;
    border:none;
    background:transparent;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    z-index:2;
    color:#111;
    transition:.3s;
}

.hq-option.active{
    color:#fff;
}

.hq-option:hover{
    transform:scale(1.05);
}
/* ======================================
   HEADER QUALITY SWITCH (FINAL CLEAN)
====================================== */

.header-quality-switch{
    position:relative;
    display:flex;
    align-items:center;
    background:#f5f5f5;
    border-radius:999px;
    padding:4px;
    width:120px;
    height:38px;
    margin-right:22px;
    overflow:visible;
}

/* sliding background */
.hq-slider{
    position:absolute;
    top:4px;
    left:4px;
    width:54px;
    height:30px;
    background:#111;
    border-radius:999px;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    z-index:1;
}

/* buttons */
.hq-option{
    flex:1;
    border:none;
    background:transparent;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    z-index:2;
    color:#111;
    transition:.25s ease;
    letter-spacing:.3px;
}

.hq-option.active{
    color:#fff;
}

.hq-option:hover{
    transform:scale(1.05);
}

/* subtle glow when active */
.header-quality-switch.active-bc .hq-slider{
    box-shadow:0 0 18px rgba(0,0,0,0.25);
}

.header-quality-switch.active-ab .hq-slider{
    box-shadow:0 0 18px rgba(0,0,0,0.25);
}

/* spacing near cart */
.header-actions{
    display:flex;
    align-items:center;
    gap:18px;
}
.layout{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap:24px;
    padding:28px;
    max-width:1300px;
    margin:0 auto;
}

.main-nav {
    display: flex;
    gap: 28px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #f1f1f1;
    transition: all .35s ease;
}
.header-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    color: #111;
}
.main-nav {
    display: flex;
    gap: 36px;
}

.main-nav a {
    text-decoration: none;
    color: #111;
    font-weight: 500;
    position: relative;
}

.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #d4af37;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-quality-switch {
    position: relative;
    background: #f4f4f4;
    border-radius: 30px;
    padding: 4px;
    display: flex;
}

.hq-option {
    position: relative;
    z-index: 2;
    border: none;
    background: none;
    padding: 6px 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 20px;
}

.hq-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 58px;
    height: 28px;
    background: #111;
    border-radius: 20px;
    transition: 0.3s ease;
}

.hq-option.active {
    color: #fff;
}
.cart-link {
    position: relative;
    font-size: 20px;
    text-decoration: none;
    color: #111;
    display: flex;
    align-items: center;
}

#cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #d4af37;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.layout-wrapper{
    display:flex;
    align-items:flex-start;
    gap:40px;
    max-width:1300px;
    margin:0 auto;
    padding:40px;
}

.premium-sidebar{
    width:280px;
    background:linear-gradient(180deg,#0f0f0f,#151515);
    color:#fff;
    padding:26px 22px;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
    position:sticky;
    top:110px; /* ниже header */
    align-self:flex-start;
    transition:all .3s ease;
    max-height:calc(100vh - 130px);
    overflow-y:auto;
}
.premium-sidebar:hover{
    transform:translateY(-4px);
}
.sidebar-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:18px;
    color:#d4af37;
    letter-spacing:.5px;
}

.group-list a{
    display:block;
    padding:10px 14px;
    border-radius:10px;
    color:#ccc;
    text-decoration:none;
    transition:.2s;
}

.group-list a:hover{
    background:rgba(212,175,55,.08);
    color:#fff;
    transform:translateX(6px);
}

.group-list a.active{
    background:rgba(212,175,55,.12);
    color:#d4af37;
}
/* ===== REQUEST FORM QUALITY SWITCH ===== */

.quality-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #f3f3f3;
    border-radius: 999px;
    padding: 4px;
    height: 38px;
    overflow: hidden;
}

.quality-switch::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 130px;
    height: 30px;
    background: #111;
    border-radius: 999px;
    transition: 0.35s cubic-bezier(.4,0,.2,1);
    z-index: 1;
}

.quality-switch.ab-active::before {
    transform: translateX(130px);
}

.quality-option {
    position: relative;
    z-index: 2;
    border: none;
    background: transparent;
    padding: 0 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #111;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    transition: 0.3s;
}

.quality-option.active {
    color: #fff;
}
.preview-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

.preview-overlay.open{
    opacity:1;
    visibility:visible;
}

.preview-modal{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.9);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9999;
    width:800px;
    max-width:90%;
}

.preview-modal.open{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}

.preview-frame{
    background:#fff;
    padding:20px;
    border-radius:20px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.2);
}

.preview-frame img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:14px;
}

.preview-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    transition:.3s;
}

.preview-arrow:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

.preview-prev{
    left:-60px;
}

.preview-next{
    right:-60px;
}

.preview-close{
    position:absolute;
    top:-50px;
    right:0;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    font-size:18px;
    transition:.3s;
}

.preview-close:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}
.product-text{
    flex:1;
}

.product-text h2{
    font-size:26px;
    margin-bottom:10px;
}

.product-sub{
    color:#666;
    margin-bottom:20px;
}

.product-image{
    width:420px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.product-image img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:.4s ease;
}

.product-image img:hover{
    transform:scale(1.04);
}

.more-photos-btn{
    margin-top:10px;
    padding:10px 18px;
    border-radius:8px;
    border:1px solid #d4af37;
    background:transparent;
    cursor:pointer;
    font-weight:500;
    transition:.3s;
}

.more-photos-btn:hover{
    background:#d4af37;
    color:#111;
}
.product-image-slider{
    position:relative;
    width:420px;
    height:320px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    cursor:pointer;
}

.product-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.product-image-slider:hover .product-main-image{
    transform:scale(1.05);
}

/* стрелки */
.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:all .3s ease;
}

.slider-arrow.left{
    left:15px;
}

.slider-arrow.right{
    right:15px;
}

/* появляются при наведении */
.product-image-slider:hover .slider-arrow{
    opacity:1;
}

/* hover эффект */
.slider-arrow:hover{
    background:#d4af37;
    color:#111;
}
.product-text{
    flex:1;
}

.product-image-slider{
    width:420px;
    height:320px;
}

/* mobile */
@media(max-width:900px){
    .product-top{
        flex-direction:column;
    }

    .product-image-slider{
        width:100%;
        height:260px;
    }
}
.product-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    margin-bottom:30px;
}

.product-text{
    flex:1;
}

.product-title{
    font-size:32px;
    font-weight:600;
    margin:0;
    letter-spacing:0.5px;
}

.product-sub{
    margin-top:8px;
    font-size:15px;
    color:#777;
    letter-spacing:0.3px;
}

.product-divider{
    margin-top:18px;
    width:80px;
    height:3px;
    background:#d4af37;
    border-radius:2px;
}
.product-image-slider{
    position:relative;
    width:340px;
    height:220px;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
}

.product-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
}
.product-spec{
    margin-top:6px;
    font-size:14px;
    color:#555;
    font-weight:500;
}
.product-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    margin-bottom:30px;
}

.product-info{
    flex:1;
}

.product-heading h2{
    font-size:28px;
    margin:0;
    font-weight:700;
}

.product-sub{
    margin-top:6px;
    font-size:14px;
    color:#666;
}

.product-badges{
    margin-top:16px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.badge{
    padding:6px 14px;
    font-size:13px;
    border-radius:30px;
    background:#f3f3f3;
    font-weight:600;
}

.badge.highlight{
    background:#111;
    color:white;
}

/* ===== IMAGE SLIDER ===== */

.product-image-slider{
    position:relative;
    width:380px;
    height:240px;
    border-radius:12px;
    overflow:hidden;
}

.product-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
    transition:0.3s ease;
}

/* стрелки */

.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.6);
    color:white;
    border:none;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    opacity:0;
    transition:0.3s;
}

.slider-arrow.left{
    left:12px;
}

.slider-arrow.right{
    right:12px;
}

.product-image-slider:hover .slider-arrow{
    opacity:1;
}

/* адаптив */

@media(max-width:900px){
    .product-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .product-image-slider{
        width:100%;
        height:220px;
    }
}
.sub-section {
    margin-top: 50px;
}

.sub-sub-section {
    margin-top: 30px;
}

.sub-title {
    font-size: 22px;
    margin-bottom: 18px;
    font-weight: 600;
    border-left: 4px solid var(--accent);
    padding-left: 14px;
}

.sub-sub-title {
    font-size: 17px;
    margin-bottom: 14px;
    font-weight: 600;
    color: #333;
}

.poot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.poot-list li {
    background: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    transition: 0.2s ease;
    font-weight: 500;
}

.poot-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
/* ======================================
   PREMIUM PRODUCT HERO — FINAL VERSION
====================================== */

.product-hero{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:80px;
    align-items:center;
    margin-bottom:60px;
}

/* IMAGE */

.product-hero-image{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 40px 80px rgba(0,0,0,0.08);
}

.product-main-image{
    width:100%;
    height:460px;
    object-fit:cover;
    transition:transform .6s ease;
}

.product-hero-image:hover .product-main-image{
    transform:scale(1.04);
}

/* arrows */

.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.65);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    opacity:0;
    transition:all .3s ease;
}

.product-hero-image:hover .slider-arrow{
    opacity:1;
}

.slider-arrow.left{
    left:18px;
}

.slider-arrow.right{
    right:18px;
}

.slider-arrow:hover{
    background:#d4af37;
    color:#111;
    transform:translateY(-50%) scale(1.1);
}

/* TEXT */

.product-label{
    font-size:12px;
    letter-spacing:2px;
    color:#d4af37;
    margin-bottom:14px;
}

.product-title{
    font-size:42px;
    font-weight:600;
    margin:0 0 12px 0;
    letter-spacing:-0.5px;
}

.product-spec{
    font-size:18px;
    color:#666;
    margin-bottom:26px;
}

.product-divider{
    width:70px;
    height:3px;
    background:#111;
    margin-bottom:24px;
}

.product-description{
    font-size:15px;
    color:#555;
    line-height:1.7;
    max-width:420px;
}

/* responsive */

@media(max-width:1000px){
    .product-hero{
        grid-template-columns:1fr;
        gap:40px;
    }

    .product-main-image{
        height:320px;
    }

    .product-title{
        font-size:32px;
    }
}

.hero-image-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.hero-image-card img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.hero-image-card:hover img {
    transform: scale(1.05);
}

/* Тёмный градиент слева → направо */
.hero-premium::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
            90deg,
            rgba(0,0,0,0.35) 0%,
            rgba(0,0,0,0.2) 30%,
            rgba(0,0,0,0.08) 55%,
            rgba(0,0,0,0) 75%
    );

    z-index:1;
}

.hero-premium > * {
    position: relative;
    z-index: 2;
}
.hero-left h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 18px;
}

.btn-main:hover {
    background: #c29c2b;
    transform: translateY(-2px);
}

.btn-secondary {
    display: inline-block;
    padding: 14px 24px;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

.delivery-note {
    margin-top: 18px;
    font-size: 14px;
    opacity: 0.85;
    color:#dddddd;
    text-shadow:0 2px 10px rgba(0,0,0,0.3);
}
.hero-premium h1 {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 20px;
}

.btn-main {
    background: #d4af37;
    color: #111;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-main:hover {
    background: #e7c65a;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}



.btn-secondary:hover {
    background: #fff;
    color: #111;
}
.hero-premium::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:160px; /* меньше высота */

    background:linear-gradient(
            to bottom,
            rgba(248,246,243,0) 0%,
            rgba(248,246,243,0.15) 60%,
            rgba(248,246,243,0.35) 80%,
            rgba(248,246,243,0.6) 100%
    );

    z-index:2;
}
.btn-secondary {
    border: 2px solid rgba(255,255,255,0.6);
    color: rgba(255,255,255,0.9);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}
.about-stats {
    padding: 100px 40px;
    background: #fafafa;
}

.stats-inner {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;

    text-align: center;
}

.stat h2 {
    font-size: 48px;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 8px;
}

.stat p {
    font-size: 15px;
    color: #777;
}
.stat {
    position: relative;
    padding: 30px 40px;
    transition: 0.3s ease;
}

.stat:hover {
    transform: translateY(-6px);
}

.stat h2 {
    font-size: 42px;
    color: #d4af37;
    transition: 0.3s;
}

.stat:hover h2 {
    text-shadow: 0 0 20px rgba(212,175,55,0.4);
}
.feature-card {
    transition: transform .4s ease, box-shadow .4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}
.about-section.light {
    background: linear-gradient(180deg, #fafafa 0%, #f3f1ed 100%);
}
.about-grid {
    gap: 80px;
}
.about-grid.reverse .about-image {
    transform: translateY(40px);
}
.mini-cart-item strong{
    font-size:14px;
    display:block;
    margin-bottom:4px;
}
/* ===== ADD TO CART BUTTON FIX ===== */

.price-btn{
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #d4af37;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ПЛЮС */
.price-btn .plus{
    font-size: 18px;
    font-weight: 600;
    transition: all .3s ease;
}

/* ГАЛОЧКА */
.price-btn::after{
    content: "✓";
    position: absolute;
    font-size: 16px;
    opacity: 0;
    transform: scale(.6);
    transition: all .3s ease;
}

/* HOVER */
.price-btn:hover{
    background: rgba(212,175,55,0.08);
    transform: scale(1.05);
}

/* СОСТОЯНИЕ ДОБАВЛЕНО */
.price-btn.added{
    background: #d4af37;
    border-color: #d4af37;
    transform: scale(1.1);
}

/* Скрываем плюс */
.price-btn.added .plus{
    opacity: 0;
    transform: scale(0);
}

/* Показываем галочку */
.price-btn.added::after{
    opacity: 1;
    transform: scale(1);
}
.table-separator td{
    padding:18px 20px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#d4af37;

    background:linear-gradient(90deg,
    rgba(212,175,55,0.08),
    rgba(212,175,55,0.03)
    );

    border-top:1px solid rgba(212,175,55,0.25);
    border-bottom:1px solid rgba(212,175,55,0.15);

    text-align:left;
}
.product-prices {
    max-width: none !important;
}
/* === TRUST NUMBERS SECTION === */

.trust-numbers {
    padding: 80px 20px;
    background: #f8f8f8;
}

.trust-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.trust-item {
    background: #ffffff;
    padding: 40px 20px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.trust-item strong {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.trust-item span {
    font-size: 15px;
    color: #666;
    letter-spacing: 0.3px;
}
@media (max-width: 900px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trust-item {
        padding: 30px 20px;
    }

    .trust-item strong {
        font-size: 32px;
    }}
.products-hero {
    padding: 80px 20px 50px;
    text-align: center;
}

.products-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.products-hero h1 {
    font-size: 42px;
    margin-bottom: 20px;
}

.products-hero-sub {
    font-size: 18px;
    color: #666;
    margin-bottom: 25px;
}

.products-hero-trust {
    font-size: 15px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.hero-proof{
    margin-top:14px;
    font-size:14px;
    color:#ddd;
    opacity:.9;
}
.quick-benefit{
    margin-top:-20px;
}

.qb-box{
    background:#fff;
    padding:16px 24px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    font-size:15px;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0.45) 40%,
            rgba(0,0,0,0.15) 100%
    );
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.cta-row {
    display: flex;
    gap: 16px;
    margin-top: 28px;
}

/* GOLD PRIMARY */

.btn-primary-premium {
    background: #d4af37;
    color: #111;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.btn-primary-premium:hover {
    transform: translateY(-2px);
    background: #e0bc4b;
}

/* MINIMAL OUTLINE */

.btn-ghost-premium {
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: 0.3s;
}

.btn-ghost-premium:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}
.hero-logo{
    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
    width:240px;
    opacity:0.12;
    pointer-events:none;
}
.hero-logo{
    filter: drop-shadow(0 0 30px rgba(255,255,255,0.15));
}
.trust-premium {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    opacity: 0.9;
}
.trust-premium {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
}
.hero-left h1 {
    color: #fff;
    text-shadow: 0 6px 30px rgba(0,0,0,0.4);
}

.hero-sub {
    color: rgba(255,255,255,0.9);
}
.hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-left {
    max-width: 600px;
}
.hero-logo img {
    width: 320px;
    opacity: 0.15;
    filter: blur(0.2px);
}
.hero-logo {
    position: relative;
}

.hero-logo::after {
    content: "";
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
    z-index: -1;
}
.trust-premium {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    color: rgba(255,255,255,0.9);
}
.hero-premium {
    position: relative;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: url("images/u4839766217_Modern_minimalist_interior_with_solid_European_oa_d8ae60ef-1111-40c6-9690-9b2feb378989_0.png") center/cover no-repeat;
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(0,0,0,0.6) 0%,
            rgba(0,0,0,0.4) 40%,
            rgba(0,0,0,0.2) 100%
    );
    z-index: 1;
}
.hero-content{
    position: relative;
    background: url("images/u4839766217_Modern_minimalist_interior_with_solid_European_oa_d8ae60ef-1111-40c6-9690-9b2feb378989_0.png") center center / cover no-repeat;
    padding: 140px 0 160px;
    color: #fff;
}

.hero-content::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
}

.hero-grid{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}
.trust-premium{
    margin-top:20px;
    display:grid;
    gap:6px;
    color:#f2f2f2;
    font-size:15px;
    text-shadow:0 2px 12px rgba(0,0,0,0.35);
}
.hero-content{
    position: relative;
    width: 100%;
    min-height: 80vh;
    background: url("images/eikenchenebe-planken-gent-hout.jpg") center center / cover no-repeat;
    display:flex;
    align-items:center;
}

.hero-content::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
            90deg,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0.45) 40%,
            rgba(0,0,0,0.15) 100%
    );
}
.cta-row{
    display:flex;
    gap:14px;
    margin-top:28px;
}

.btn-main{
    background:#D6B25E;
    color:#111;
    padding:14px 28px;
    border-radius:999px;
    font-weight:600;
    text-decoration:none;
    transition:all .25s ease;
    box-shadow:0 10px 25px rgba(214,178,94,0.25);
}

.btn-main:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 35px rgba(214,178,94,0.35);
}

.btn-secondary{
    padding:14px 28px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.35);
    color:#fff;
    text-decoration:none;
    backdrop-filter: blur(6px);
    transition:all .25s ease;
}

.btn-secondary:hover{
    background:rgba(255,255,255,0.08);
}
.hero-left h1{
    font-size:52px;
    line-height:1.15;
    max-width:680px;
    text-shadow:0 4px 20px rgba(0,0,0,0.35);
}

.hero-sub{
    color:#f1f1f1;
    margin-top:16px;
    font-size:18px;
    text-shadow:0 2px 12px rgba(0,0,0,0.35);
}

.trust-premium{
    margin-top:22px;
    color:#eaeaea;
}
.hero-left{
    padding-left: 6vw;
    max-width: 700px;
    position: relative;
    z-index: 2;
}
.hero-logo-watermark {
    position: absolute;
    right: 10%;
    top: 55%;
    transform: translateY(-50%);

    width: 420px;

    opacity: 1;

    pointer-events: none;
    user-select: none;
}
.hero-premium {
    position: relative;
}
.hero-left {
    position: relative;
    z-index: 2;
}
.hero-logo-watermark {
    position: absolute;
    right: -90%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    max-width: 420px;
    height: auto;

}
.hero-overlay {
    z-index: 0;
}
.about-proof{
    padding: 60px 40px;
    background:#fafafa;
}

.proof-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.proof-card{
    background:white;
    padding:30px;
    border-radius:14px;
    box-shadow:0 15px 40px rgba(0,0,0,0.05);
    transition:.3s;
}

.proof-card:hover{
    transform:translateY(-4px);
}

.proof-card h3{
    margin-bottom:12px;
    color:#111;
}

.proof-card p{
    color:#555;
}
.about-production{
    padding:80px 40px;
    background:#111;
    color:white;
    text-align:center;
}

.production-inner{
    max-width:900px;
    margin:0 auto;
}

.production-text h2{
    font-size:36px;
    margin:20px 0;
}

.production-text p{
    color:#ccc;
    margin-bottom:15px;
}

.production-highlight{
    color:#d4af37;
    font-weight:600;
    margin-top:20px;
}
.about-cta{
    padding:100px 40px;
    background:#fafafa;
    text-align:center;
}

.cta-inner{
    max-width:800px;
    margin:0 auto;
}

.cta-badge{
    display:inline-block;
    background:#111;
    color:white;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    margin-bottom:15px;
}

.cta-inner h2{
    font-size:38px;
    margin-bottom:10px;
}

.cta-inner p{
    color:#666;
    margin-bottom:30px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:25px;
}

.cta-primary{
    background:#d4af37;
    color:black;
    padding:14px 26px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}

.cta-secondary{
    border:1px solid #ccc;
    padding:14px 26px;
    border-radius:30px;
    text-decoration:none;
    color:#333;
}

.cta-trust{
    color:#777;
    font-size:14px;
}
.about-clients{
    padding:80px 40px;
    background:white;
    text-align:center;
}

.clients-inner{
    max-width:1000px;
    margin:0 auto;
}

.clients-inner h2{
    font-size:34px;
    margin:20px 0 40px;
}

.clients-grid{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:20px;
}

.client-card{
    background:#f5f5f5;
    padding:25px;
    border-radius:12px;
}

.client-card h3{
    margin-bottom:10px;
}

.client-card p{
    color:#666;
    font-size:14px;
}

.clients-note{
    margin-top:30px;
    color:#777;
}
.about-loyalty{
    padding:80px 40px;
    background:#f8f8f8;
    text-align:center;
}

.loyalty-inner{
    max-width:1000px;
    margin:0 auto;
}

.loyalty-inner h2{
    font-size:34px;
    margin:20px 0 40px;
}

.loyalty-grid{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:20px;
}

.loyalty-item{
    background:white;
    padding:25px;
    border-radius:12px;
}

.loyalty-item strong{
    display:block;
    margin-bottom:10px;
}

.loyalty-item p{
    color:#666;
    font-size:14px;
}

.loyalty-note{
    margin-top:30px;
    font-weight:500;
}
.about-final-cta{
    padding:100px 40px;
    background:#111;
    color:white;
    text-align:center;
}

.final-cta-inner{
    max-width:900px;
    margin:0 auto;
}

.final-cta-inner h2{
    font-size:38px;
    margin:20px 0;
}

.final-cta-text{
    color:#ccc;
    max-width:600px;
    margin:0 auto 40px;
}

.final-cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:25px;
}

.final-cta-trust{
    font-size:14px;
    color:#aaa;
}
.about-seo{
    padding:60px 40px;
    background:#fafafa;
    text-align:center;
}

.about-seo p{
    max-width:700px;
    margin:0 auto 15px;
}

.about-geo{
    text-align:center;
    font-size:14px;
    color:#777;
    padding:30px;
}
.home-factory{
    padding:80px 40px;
    text-align:center;
    background:#fafafa;
}

.home-factory p{
    max-width:700px;
    margin:0 auto 15px;
}

.home-geo{
    text-align:center;
    font-size:14px;
    color:#777;
    padding:40px;
}

.home-proof{
    padding:60px 40px;
    background:white;
}

.proof-grid{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}

.proof-item{
    text-align:center;
}

.proof-item strong{
    display:block;
    font-size:32px;
    font-weight:600;
}

.proof-item span{
    color:#777;
}
.brand-block{
    padding:30px 0 -10px;
    text-align:center;
}

.brand-inner img{
    height:120px;
    max-width:280px;
}
.category-seo{
    background:#0b0b0b;
    padding:80px 20px;
    width:100%;
    margin:0;
}

.category-seo-inner{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.category-seo h2{
    color:#d4af37;
    font-size:32px;
    margin-bottom:25px;
}

.category-seo p{
    color:#ffffff;
    font-size:17px;
    line-height:1.7;
    margin-bottom:18px;
}

.products-trust-line{
    margin-top:30px;
    font-weight:500;
    color:#ffffff;
}
.products-trust-line{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    margin-top:30px;
}

.products-trust-line span{
    position:relative;
    padding-left:24px;
}

.products-trust-line span:before{
    content:'✓';
    position:absolute;
    left:0;
    color:#d4af37;
    font-weight:bold;
}
/* ===== PRODUCTS SEO BLACK BLOCK ===== */

.category-seo{
    background:#0b0b0b;
    color:#fff;
    padding:80px 20px;
    text-align:center;
}

.category-seo-inner{
    max-width:900px;
    margin:0 auto;
}

.category-seo h2{
    color:#d4af37;
    font-size:28px;
    margin-bottom:25px;
}

.category-seo p{
    color:#e0e0e0;
    line-height:1.7;
    margin-bottom:20px;
}

.products-trust-line{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    font-weight:500;
}

.products-trust-line span{
    position:relative;
    padding-left:22px;
}

/* yellow checkmarks */
.products-trust-line span::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#d4af37;
}
section.category-seo{
    background:#0b0b0b !important;
    color:#fff !important;
    padding:80px 20px;
    text-align:center;
}

.category-seo-inner{
    max-width:900px;
    margin:0 auto;
}

.category-seo h2{
    color:#d4af37 !important;
    font-size:28px;
    margin-bottom:25px;
}

.category-seo p{
    color:#e0e0e0 !important;
    line-height:1.7;
    margin-bottom:20px;
}

.products-trust-line{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    font-weight:500;
}

.products-trust-line span{
    position:relative;
    padding-left:22px;
}

.products-trust-line span::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#d4af37;
}
.about-hero{
    position:relative;
    background:url('images/eikenchenebe-planken-gent-hout.jpg') center/cover no-repeat;
    padding:120px 20px;
    display:flex;
    align-items:center;
}

.about-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
            to bottom,
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.45)
    );
}

.about-hero-inner{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:0 auto;
    text-align:center;
    color:#fff;
}

.about-hero-inner h1{
    font-size:42px;
    font-weight:600;
    margin-bottom:20px;
    color:#fff;
    text-shadow:0 2px 15px rgba(0,0,0,0.4);
}

.about-hero-inner p{
    font-size:18px;
    line-height:1.6;
    color:#fff;
    opacity:0.95;
}
.about-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin:100px 0;
}

.about-row.reverse{
    direction:rtl;
}

.about-row.reverse .about-text{
    direction:ltr;
}

.about-img img{
    width:100%;
    border-radius:16px;
    box-shadow:0 25px 60px rgba(0,0,0,0.08);
}

.about-text h2{
    font-size:32px;
    margin-bottom:20px;
}

.about-text p{
    font-size:16px;
    line-height:1.7;
    margin-bottom:12px;
    color:#555;
}
.about-text h2::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:#c8a84e;
    margin-top:12px;
}
.about-feature{
    margin:120px 0;
}

.about-feature-inner{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap:60px;
    align-items:center;
    max-width:1100px;
    margin:auto;
    background:white;
    padding:60px;
    border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,0.05);
}

.about-feature-img img{
    width:100%;
    border-radius:14px;
    transform:translateX(-40px);
}

.about-feature-text h2{
    font-size:32px;
    margin:10px 0 20px;
}

.feature-label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#c8a84e;
    font-weight:600;
}
.about-feature-text h2::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:#c8a84e;
    margin-top:12px;
}
/* ===== HOME FACTORY ===== */

.home-factory {
    padding: 100px 20px;
    background: #fff;
}

.factory-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.factory-text h2 {
    font-size: 34px;
    margin-bottom: 20px;
}

.factory-intro {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.factory-benefits {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-weight: 500;
}

.factory-benefits span {
    background: #f5f5f5;
    padding: 8px 14px;
    border-radius: 20px;
}

/* IMAGE */

.factory-visual {
    position: relative;
}

.factory-visual img {
    width: 100%;
    border-radius: 14px;
}

.factory-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #000;
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
}

/* QUICK BENEFIT */

.quick-benefit {
    padding: 60px 20px;
    background: #f9f9f9;
    text-align: center;
}

.qb-inner {
    max-width: 800px;
    margin: auto;
}

.qb-title {
    display: block;
    font-weight: 600;
    margin-bottom: 20px;
}

.qb-items {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.qb-items div {
    background: white;
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: 500;
}
/* WHY PREMIUM */

.why-premium {
    padding: 100px 20px;
    background: #fff;
}

.why-inner {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: center;
}

.why-left h2 {
    font-size: 34px;
    margin-bottom: 30px;
}

.why-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-item {
    padding: 20px;
    border-radius: 14px;
    background: #f7f7f7;
}

.why-item h4 {
    margin-bottom: 8px;
}

/* LOGO */

.why-brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-brand img {
    max-width: 400px;
    width: 100%;
}
/* CATEGORIES PREMIUM */

.home-categories {
    padding: 90px 20px;
    background: #fff;
}

.home-cat-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 10px;
}

.home-cat-sub {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
}

.categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 25px;
}

/* CARD */

.cat {
    background: #fff;
    padding: 28px;
    border-radius: 18px;
    text-decoration: none;
    color: #000;
    border: 1px solid #eee;

    transition: all 0.35s ease;
    transform: translateY(0);
}

/* HOVER */

.cat:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* TEXT */

.cat h3 {
    margin-bottom: 8px;
}

.cat p {
    color: #666;
}
/* SMOOTH APPEAR */

.cat {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.7s ease forwards;
}

.cat:nth-child(1){ animation-delay: 0.1s }
.cat:nth-child(2){ animation-delay: 0.2s }
.cat:nth-child(3){ animation-delay: 0.3s }
.cat:nth-child(4){ animation-delay: 0.4s }
.cat:nth-child(5){ animation-delay: 0.5s }
.cat:nth-child(6){ animation-delay: 0.6s }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.home-proof {
    padding: 70px 20px;
    background: #000;
}

.proof-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.proof-item {
    text-align: center;
    color: #fff;
}

.proof-item strong {
    font-size: 40px;
    color: #d4af37;
}

.proof-item span {
    display: block;
    margin-top: 5px;
}
/* CONTACT PREMIUM */

.contact-premium {
    padding: 90px 20px;
    background: #fafafa;
}

.contact-inner {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.contact-header h2 {
    margin: 10px 0;
}

.contact-header p {
    color: #666;
    margin-bottom: 40px;
}

/* GRID */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.contact-card {
    background: #fff;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

/* FORM */

.contact-form {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    border: 1px solid #eee;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 15px;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-actions {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.contact-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.7s ease forwards;
}

.contact-card:nth-child(1){animation-delay:.1s}
.contact-card:nth-child(2){animation-delay:.2s}
.contact-card:nth-child(3){animation-delay:.3s}

/* HIGHLIGHT STRIP */

.contact-highlight {
    display:flex;
    justify-content:center;
    gap:40px;
    margin-bottom:25px;
    flex-wrap:wrap;
    padding-top: 40px;
}

.highlight-item {
    background:#000;
    color:#fff;
    padding:10px 16px;
    border-radius:999px;
    font-size:14px;
    animation: fadeUp 0.6s ease forwards;
}

/* FORM BOX */

.contact-form {
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 30px 60px rgba(0,0,0,0.08);
    border:1px solid #eee;
    transition:.3s;
}

.contact-form:hover {
    transform:translateY(-3px);
    box-shadow:0 40px 80px rgba(0,0,0,0.12);
}

/* CTA BUTTON */

.cta-submit {
    margin-top:20px;
    padding:16px 30px;
    border-radius:999px;
    border:none;
    font-size:16px;
    font-weight:600;
    background:linear-gradient(135deg,#d4af37,#f1d26a);
    color:#000;
    cursor:pointer;
    transition:.3s;
}

.cta-submit:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(212,175,55,0.4);
}

/* SECONDARY CTA */

.btn-secondary {
    border:1px solid #000;
    padding:14px 24px;
    border-radius:999px;
    transition:.3s;
}

.btn-secondary:hover {
    background:#000;
    color:#fff;
}
/* FORM WRAP */
.premium-form {
    margin-top: 28px;
    background: #fff;
    padding: 36px;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ROWS */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row.single {
    grid-template-columns: 1fr;
}

/* INPUTS */
.premium-form input,
.premium-form textarea {
    width: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #eee;
    background: #fafafa;
    font-size: 15px;
    transition: 0.2s ease;
}

.premium-form textarea {
    min-height: 140px;
    resize: vertical;
}

.premium-form input:focus,
.premium-form textarea:focus {
    outline: none;
    border: 1px solid var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(214,180,90,0.12);
}

/* BUTTON ROW */
.form-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* PRIMARY */
.btn-main {
    background: linear-gradient(135deg,#d6b45a,#e8c86e);
    color: #111;
    border: none;
    padding: 16px 34px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* GHOST */
.btn-ghost {
    padding: 16px 34px;
    border-radius: 40px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
}

.btn-ghost:hover {
    background:#000;
    color:#fff;
}

.nav-item-products {
    position: relative;
}
.nav-item-products {
    position: relative;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
}

.logo {
    font-weight: 600;
    line-height: 1.1;
}

.main-nav {
    display: flex;
    gap: 40px;
    align-items: center;
}

.main-nav a,
.nav-item span {
    text-decoration: none;
    color: #111;
    font-weight: 500;
    cursor: pointer;
}

.nav-item {
    position: relative;
}



.nav-item-products:hover {
    display: block;
}
.nav-item-products {
    position: relative;
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:60px;
    padding:18px 40px;
    background:#fff;
    position:relative;
    z-index:1000;
}

.nav-item-products {
    position:relative;
}
.logo {
    font-weight:600;
    font-size:20px;
    line-height:1;
    text-decoration:none;
    color:#000;
    display:block;
    white-space:nowrap;
}
.main-nav {
    display:flex;
    gap:30px;
    align-items:center;
}
.header-inner {
    gap:80px;
}
.logo {
    display:flex;
    align-items:center;
}

.logo img {
    height:100px;
    width:auto;
    display:block;
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:60px;
}
.logo {
    display:flex;
    align-items:center;
    font-weight:600;
    font-size:20px;
    letter-spacing:0.5px;
    white-space:nowrap;
}

.nav-item-products:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.geo-seo {
    text-align: center;
}
.main-header {
    position: sticky !important;
    top: 0;
    z-index: 999;

    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 40px;

    display: flex;
    align-items: center;
}
.logo {
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    color: #111;
    letter-spacing: 0.3px;
}
.main-nav {
    display: flex;
    gap: 32px;
    margin-left: 60px;
}
.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px;
}
.cart-link {
    display: flex;
    align-items: center;
    gap: 6px;

    text-decoration: none;
    color: #111;
    font-size: 16px;

    padding-left: 8px;
}
.header-quality-switch {
    margin-left: 10px;
}
.header-inner {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.header-inner {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 14px;
}
.header-inner {
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.3);
}

/* ===== NEW MEGA MENU ===== */

.nav-item-products {
    position: relative;
}

.mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100vw;

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    transition: all .25s ease;
}

.nav-item-products:hover .mega-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-inner {
    max-width: 1300px;
    margin: 20px auto;
    padding: 30px;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.mega-col h4 {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}

.mega-col a {
    display: block;
    margin-bottom: 8px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all .2s ease;
}

.mega-col a:hover {
    color: #c9a646;
    transform: translateX(4px);
}

.mega-footer {
    margin-top: 20px;
    text-align: right;
}

.mega-btn {
    background: #c9a646;
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    transition: .2s ease;
}

.mega-btn:hover {
    background: #b8932f;
}
.mega-inner {
    max-width: 1300px;
    margin: 20px 0;
    transform: translateX(-360px);
}
.mega-col h4 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 14px;
    opacity: 0.7;
}
.mega-col a {
    display: block;
    font-size: 14px;
    padding: 4px 0;
    opacity: 0.85;
    transition: all .2s ease;
}
.mega-col a:hover {
    opacity: 1;
    transform: translateX(4px);
}
.mega-all-btn {
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 500;
}
.mega-dropdown {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    background: rgba(255, 255, 255, 0.92);

    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);

    transition: all .25s ease;
}
.mega-dropdown {
    border: 1px solid rgba(255,255,255,0.5);
}
.mega-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 40px;
    align-items: start;
}
/* ===== PREMIUM MAIN BUTTON ===== */

.btn-main {
    background: linear-gradient(135deg, #d6b25e, #c9a23d);
    color: #1a1a1a;

    padding: 14px 32px;
    border-radius: 999px;

    border: none;

    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;

    cursor: pointer;

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            background .3s ease;
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.btn-main:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.form-success {
    display: none;
    align-items: center;
    gap: 10px;

    margin-top: 18px;
    padding: 14px 18px;

    background: #e8f7ee;
    color: #1e7e34;

    border-radius: 12px;
    font-size: 14px;

    animation: fadeIn .4s ease;
}

.checkmark {
    font-weight: 600;
    color: #28a745;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ===== CONTACT FORM PREMIUM ===== */

.contact-form {
    display: grid;
    gap: 14px;
    max-width: 640px;
}

.contact-form input,
.contact-form textarea {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;

    font-size: 14px;
    font-family: inherit;

    background: #fff;

    transition: all .2s ease;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
}
/* ===== UPGRADE BUTTON BLOCK ===== */

.edge-upgrade {
    margin: 80px 0;
    text-align: center;
}

.edge-upgrade-inner {
    max-width: 700px;
    margin: 0 auto;
}

.edge-mini-text {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

/* Кнопка в стиле luxury */

.btn-upgrade {
    display: inline-block;
    padding: 16px 34px;
    border-radius: 50px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.btn-upgrade:hover {
    background: #c8a45a; /* твой золотой акцент */
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.mega-col h4 {
    font-size: 15px;
    margin-bottom: 12px;
    font-weight: 600;
}

.mega-col a {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
    text-decoration: none;
    transition: 0.2s ease;
}

.mega-col a:hover {
    color: #c8a45a;
}
/* ===== MEGA MENU WHITE BACKGROUND ===== */

.mega-full {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;

    padding: 50px 0;

    background: #ffffff; /* чисто белый */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    z-index: 999;
}
/* ===== FORCE WHITE MEGA MENU ===== */

.mega-dropdown,
.mega-full {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mega-dropdown::before,
.mega-full::before {
    display: none !important;
}
.mega-full-inner {
    background: #ffffff !important;
}
.mega-inner{
    background: #ffffff !important;
}

/* modal smooth look */
.order-modal textarea{
    width:100%;
    padding:14px;
    margin:14px 0;
    border-radius:10px;
    border:1px solid #ddd;
    resize:vertical;
    min-height:90px;
    font-family:inherit;
}
.order-success{
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0e7a3d;
    color: #fff;
    padding: 14px 22px;
    border-radius: 30px;
    font-size: 14px;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 2000;
}

.order-success.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* OVERLAY */
.order-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 999;
}

.order-overlay.open{
    opacity: 1;
    pointer-events: auto;
}

/* MODAL */
.order-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #fff;
    padding: 35px;
    width: 420px;
    max-width: 90%;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
}

.order-modal.open{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* INPUTS */
.order-modal input,
.order-modal textarea{
    width: 100%;
    padding: 12px 14px;
    margin-top: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: 0.2s;
}

.order-modal input:focus,
.order-modal textarea:focus{
    border-color: #c7a64a;
    box-shadow: 0 0 0 3px rgba(199,166,74,0.15);
    outline: none;
}

/* BUTTONS */
.order-actions{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.order-actions button{
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
}

#cancel-order{
    background: #f3f3f3;
    margin-right: 10px;
}

#confirm-order{
    background: #111;
    color: #fff;
}

#confirm-order:hover{
    background: #c7a64a;
    color: #111;
}
/* ===== FIX ORDER MODAL BLUR ===== */

.order-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9998;
}

.order-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.order-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #ffffff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    width: 420px;
    max-width: 90%;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999; /* ВЫШЕ overlay */
}

.order-modal.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* ===== TOAST ===== */

.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #111;
    color: #fff;
    padding: 14px 24px;
    border-radius: 30px;
    font-size: 14px;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 10000;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quality-switch-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #f2f2f4;
    border-radius: 999px;
    padding: 4px;
    margin-left: auto;
    margin-right: 12px;
    font-family: inherit;
}

.quality-option {
    position: relative;
    z-index: 2;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease;
    user-select: none;
}

/* активный текст */
.quality-option.active {
    color: #111;
}

/* sliding background */
.quality-switch-wrapper::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(50% - 4px);
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

/* положение для A/B */
.quality-switch-wrapper.ab::before {
    transform: translateX(100%);
}

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

.burger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:2px;
    background:#111;
    display:block;
}

@media (max-width:900px){

    .main-nav{
        position:fixed;
        top:0;
        right:-100%;
        width:260px;
        height:100vh;
        background:#fff;
        flex-direction:column;
        padding:100px 30px;
        gap:20px;
        transition:0.35s ease;
        box-shadow:-10px 0 30px rgba(0,0,0,0.1);
    }

    .main-nav.open{
        right:0;
    }

    .burger{
        display:flex;
    }

    .header-inner{
        justify-content:space-between;
    }

}

@media (max-width:900px){

    .categories{
        grid-template-columns:1fr;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .features{
        grid-template-columns:1fr;
    }

}

@media (max-width:900px){

    .hero-left h1{
        font-size:28px;
        line-height:1.25;
    }

    .cta-row{
        flex-direction:column;
        gap:12px;
    }

}


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

@media (max-width: 900px){

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer{
        padding:60px 25px;
    }

    .footer h4{
        margin-bottom:10px;
    }

}

@media (max-width:900px){

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    h1{
        font-size:28px;
        line-height:1.3;
    }

}
.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:2px;
    background:#111;
    display:block;
}
@media (max-width:900px){

    .main-nav{
        display:none;
    }

    .burger{
        display:flex;
    }

    .header-inner{
        justify-content:space-between;
    }

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

    .main-nav.open{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        padding:20px;
    }

}
/* BURGER */

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:2px;
    background:#111;
    display:block;
}
/* MOBILE HEADER */

@media (max-width:900px){

    .main-nav{
        display:none;
    }

    .burger{
        display:flex;
    }

    .header-inner{
        justify-content:space-between;
        align-items:center;
    }

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

    .main-nav.open{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        padding:25px;
        gap:15px;
        box-shadow:0 10px 30px rgba(0,0,0,0.1);
    }

}
/* MOBILE MENU */

.mobile-menu{
    display:none;
    flex-direction:column;
    position:fixed;
    top:70px;
    left:0;
    width:100%;
    background:#fff;
    padding:25px;
    gap:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    z-index:999;
}

/* показываем только когда burger открыт */

.mobile-menu.open{
    display:flex;
}

/* DESKTOP */

@media (min-width:901px){

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

}

.mobile-dropdown-toggle{
    font-weight:600;
    cursor:pointer;
}

.mobile-dropdown-menu{
    display:none;
    flex-direction:column;
    margin-top:10px;
    gap:10px;
}

.mobile-dropdown-menu.open{
    display:flex;
}

@media (max-width:900px){

    .main-nav{
        display:none;
    }

    .burger{
        display:flex;
    }

}
.burger{
    display:none;
}

@media (max-width:900px){

    .burger{
        display:flex;
    }

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

    .main-nav{
        display:none;
    }
}
@media (max-width:900px){

    .mobile-menu.open{
        display:flex !important;
        flex-direction:column;
        position:fixed;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        padding:25px;
        gap:15px;
        box-shadow:0 10px 30px rgba(0,0,0,0.1);
        z-index:999;
    }

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

    .main-nav{
        display:none;
    }

}
.burger{
    display:none;
}

@media (max-width:900px){

    .burger{
        display:flex;
        flex-direction:column;
        gap:4px;
        cursor:pointer;
    }

}

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

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:2px;
    background:#111;
    display:block;
}

/* MOBILE */

@media (max-width:900px){

    .burger{
        display:flex;
    }

    .main-nav{
        position:fixed;
        top:70px;
        left:-100%;
        width:100%;
        height:100vh;
        background:#fff;
        flex-direction:column;
        padding:30px;
        gap:20px;
        transition:0.3s;
    }

    .main-nav.open{
        left:0;
    }

}
/* =========================
   MOBILE HEADER FIX
========================= */

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:2px;
    background:#111;
    display:block;
}

/* MOBILE */

@media (max-width:900px){

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

    .burger{
        display:flex !important;
    }

}
/* ===== MOBILE HEADER ===== */

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
}

.burger span{
    width:24px;
    height:2px;
    background:#111;
    display:block;
}

/* MOBILE */

@media (max-width:900px){

    .main-nav{
        display:none !important;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        padding:25px;
        gap:20px;
    }

    .main-nav.open{
        display:flex !important;
    }

    .burger{
        display:flex !important;
    }

    .mega-menu{
        display:none !important;
    }

}

/* MOBILE FIX */

@media (max-width: 768px) {

    /* Общие отступы */
    .proof-inner,
    .clients-grid,
    .stats-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0 20px;
    }

    /* Карточки */
    .proof-card,
    .client-card,
    .stat {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }

    /* Заголовки */
    .proof-card h3,
    .client-card h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    /* Текст */
    .proof-card p,
    .client-card p {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Статистика */
    .stat h2 {
        font-size: 32px;
        margin-bottom: 6px;
    }

    .stat p {
        font-size: 14px;
    }

}
/* FOOTER MOBILE */

@media (max-width: 768px) {

    .premium-footer {
        padding: 40px 20px;
    }

    .footer-inner {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .footer-col {
        width: 100%;
    }

    .footer-col h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .footer-col p,
    .footer-col a,
    .footer-col li {
        font-size: 14px;
        line-height: 1.6;
    }

    .footer-bottom {
        text-align: center;
        margin-top: 30px;
        font-size: 13px;
    }

}


@media (max-width:768px){

    .order-modal{
        width:90%;
        max-width:90%;
        margin:0 auto;
        padding:20px;
    }

    .order-modal input,
    .order-modal textarea{
        width:100%;
        font-size:16px;
        padding:12px;
    }

    .order-modal button{
        width:100%;
        padding:14px;
        font-size:16px;
    }

}
/* ===== WHATSAPP FLOAT ===== */

.whatsapp-float{

    position: fixed;
    bottom: 22px;
    right: 22px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #25D366;
    color: white;

    padding: 14px 18px;

    border-radius: 40px;

    font-weight: 600;
    font-size: 15px;

    text-decoration: none;

    box-shadow: 0 10px 25px rgba(0,0,0,0.25);

    z-index: 9999;

    transition: all .25s ease;

}

.whatsapp-float:hover{

    transform: scale(1.08);

    box-shadow: 0 14px 35px rgba(0,0,0,0.35);

}

/* ICON */

.whatsapp-float::before{

    content: "";

    width: 20px;
    height: 20px;

    background-image: url("images/whatsapp-icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: block;

}

/* MOBILE */

@media (max-width:768px){

    .whatsapp-float{

        bottom: 16px;
        right: 16px;

        padding: 16px 22px;

        font-size: 16px;

    }

}
/* MOBILE TABLE */

@media (max-width: 768px){

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

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

    .proof-inner{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .proof-card{
        width:100%;
    }

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

    .clients-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

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

    .stats-inner{
        display:flex;
        flex-direction:column;
        gap:30px;
        text-align:center;
    }

    .stat h2{
        font-size:40px;
    }

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

    .main-header{
        padding:10px 15px;
    }

    .main-nav{
        display:none;
    }

    .burger{
        display:block;
    }

}

@keyframes whatsappPulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,0.6);
    }

    70%{
        box-shadow:0 0 0 15px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}
/* HIDE HERO LOGO ON MOBILE */

@media (max-width:768px){

    .hero-logo-watermark{
        display:none;
    }

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

    .hero-logo-watermark{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

}
/* HIDE HERO WATERMARK ON MOBILE */

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

    .hero-logo-watermark{
        display:none !important;
    }

}

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

@media (max-width:768px){

    .site-footer{

        padding:40px 20px 20px;

    }

    .footer-inner{

        grid-template-columns:1fr;
        gap:30px;
        text-align:center;

    }

    .footer-col{

        border-bottom:1px solid rgba(255,255,255,0.1);
        padding-bottom:20px;

    }

    .footer-col:last-child{

        border-bottom:none;

    }

    .footer-col h3{

        font-size:22px;
        margin-bottom:10px;

    }

    .footer-col h4{

        font-size:18px;
        margin-bottom:10px;

    }

    .footer-col p{

        font-size:14px;
        line-height:1.5;

    }

    .footer-col a{

        font-size:15px;
        margin-bottom:6px;

    }

    .footer-bottom{

        font-size:13px;
        padding-top:15px;

    }

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

    .hero-inner{
        padding:40px 20px;
        text-align:center;
    }

    .hero-content{
        max-width:100%;
    }

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

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

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

    .proof-inner{
        flex-direction:column;
        gap:20px;
    }

}
.footer-col{
    line-height:1.6;
}
/* FIX FOOTER WIDTH */

.site-footer{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.footer-container{
    max-width:1200px;
    margin:0 auto;
    padding:40px 20px;
    box-sizing:border-box;
}

/* MOBILE FOOTER */

@media (max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:30px;
    }

}
/* MOBILE WIDTH FIX */

html, body{
    max-width:100%;
}

/* все блоки не могут быть шире экрана */

.container,
.section,
.product-container,
.products-grid,
.hero,
.hero-inner{
    max-width:100%;
    box-sizing:border-box;
}
/* MOBILE SUBCATEGORIES */

@media (max-width:768px){

    .subcategories-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
        padding:0 15px;
    }

    .subcategory-card{
        width:100%;
    }

    .subcategory-card img{
        width:100%;
        height:auto;
    }

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

    .stats-inner{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
    }

    .stat{
        padding:20px;
    }

}
.cart-icon{
    position:relative;
    right:5px;
}
@media (max-width:768px){

    .hero h1{
        font-size:32px;
        line-height:1.2;
    }

    .hero p{
        font-size:16px;
    }

}
/* ===== MOBILE SUBCATEGORIES ===== */

@media (max-width:768px){

    .sub-grid{
        display:flex;
        flex-direction:column;
        gap:20px;
        padding:0 16px;
    }

    .sub-card{
        width:100%;
    }

    .sub-card img{
        width:100%;
        height:auto;
        border-radius:12px;
    }

    .sub-card-body{
        padding:16px;
    }

}
/* ===== MOBILE WHY BLOCK ===== */

@media (max-width:768px){

    .why-container{
        padding:0 16px;
    }

    .why-grid{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .why-card{
        width:100%;
        padding:20px;
    }

}
/* ===== MOBILE WHY BLOCK ===== */

@media (max-width:768px){

    .why-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .why-container{
        padding:0 16px;
    }

    .why-card{
        width:100%;
    }

}

/* ===== MOBILE WHY BLOCK FIX ===== */

@media (max-width:768px){

    .why-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:20px;
    }

    .why-card{
        width:100%;
    }

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

    .why-card{
        padding:24px !important;
    }

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

    .container,
    .section,
    .why-container{
        padding-left:16px;
        padding-right:16px;
    }

}
/* ===== MOBILE TRUST NUMBERS ===== */

@media (max-width:768px){

    .trust-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:16px;
        padding:0 16px;
    }

    .trust-item{
        width:100%;
        padding:20px;
        text-align:center;
    }

}
html, body{
    height:100%;
    overflow-x:hidden;
}
/* ============================= */
/* PREMIUM BURGER MENU */
/* ============================= */

/* OVERLAY */

.menu-overlay{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:rgba(0,0,0,0.35);

    opacity:0;
    pointer-events:none;

    transition:opacity .35s ease;

    z-index:9000;

}

.menu-overlay.active{

    opacity:1;
    pointer-events:auto;

}


/* MOBILE */

@media (max-width:900px){

    /* HEADER */

    .header-inner{

        display:flex;
        align-items:center;
        justify-content:space-between;

        padding:14px 16px;

        position:relative;

    }

    /* LOGO */

    .logo{

        position:absolute;
        left:50%;
        transform:translateX(-50%);

        font-weight:600;
        font-size:16px;

    }

    /* BURGER */

    .burger{

        display:flex;
        flex-direction:column;
        justify-content:space-between;

        width:24px;
        height:16px;

        border:none;
        background:none;

        cursor:pointer;

        z-index:10000;

    }

    /* BURGER LINES */

    .burger span{

        height:2px;
        width:100%;
        background:#111;

        display:block;

        transition:all .35s cubic-bezier(.4,0,.2,1);

    }

    /* BURGER ANIMATION */

    .burger.active span:nth-child(1){

        transform:rotate(45deg) translateY(6px);

    }

    .burger.active span:nth-child(2){

        opacity:0;

    }

    .burger.active span:nth-child(3){

        transform:rotate(-45deg) translateY(-6px);

    }

    /* CART */

    .cart-link{

        margin-left:auto;

    }

    /* MENU PANEL */

    .main-nav{

        position:fixed;

        top:0;
        left:0;

        width:85vw;
        max-width:340px;
        height:100vh;

        background:#fff;

        display:flex;
        flex-direction:column;
        justify-content:center;

        padding:40px;
        gap:30px;

        transform:translateX(-100%);

        transition:transform 0.45s cubic-bezier(.4,0,.2,1);

        z-index:99999;

        box-shadow:0 0 60px rgba(0,0,0,0.15);

    }
    .main-nav{
        will-change: transform;
    }

    /* OPEN MENU */

    .main-nav.open{

        transform:translateX(0);

    }

    /* LINKS */

    .main-nav a{

        font-size:22px;
        font-weight:500;

        text-decoration:none;
        color:#111;

        opacity:0;
        transform:translateX(-20px);

        transition:all .35s ease;

    }

    /* LINKS ANIMATION */

    .main-nav.open a{

        opacity:1;
        transform:translateX(0);

    }

    /* STAGGER */

    .main-nav.open a:nth-child(1){transition-delay:.1s;}
    .main-nav.open a:nth-child(2){transition-delay:.18s;}
    .main-nav.open a:nth-child(3){transition-delay:.26s;}
    .main-nav.open a:nth-child(4){transition-delay:.34s;}

}
/* CART TOAST */

.cart-toast{

    position:fixed;

    bottom:30px;
    left:50%;

    transform:translateX(-50%) translateY(80px);

    background:#111;
    color:#fff;

    padding:14px 22px;

    border-radius:30px;

    font-size:14px;
    font-weight:500;

    box-shadow:0 10px 30px rgba(0,0,0,0.25);

    opacity:0;

    transition:all .35s ease;

    z-index:99999;

}

/* SHOW */

.cart-toast.show{

    opacity:1;
    transform:translateX(-50%) translateY(0);

}
.qty-input{

    width:50px;
    text-align:center;

    border:1px solid #ddd;
    border-radius:6px;

    padding:4px;

    font-size:14px;

}

.nav-products-trigger{
    display:flex;
    align-items:center;
    gap:10px;
}

.mobile-products-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    border:none;
    border-radius:12px;
    background:#f4efe4;
    color:#111;
    cursor:pointer;
}

.mobile-products-toggle-icon{
    position:relative;
    width:12px;
    height:12px;
}

.mobile-products-toggle-icon::before,
.mobile-products-toggle-icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:2px;
    background:currentColor;
    border-radius:999px;
    transform:translate(-50%, -50%);
    transition:transform .25s ease, opacity .25s ease;
}

.mobile-products-toggle-icon::after{
    transform:translate(-50%, -50%) rotate(90deg);
}

body.menu-open{
    overflow:hidden;
}

@media (max-width:900px){

    body.menu-open .main-header{
        z-index:100000 !important;
    }

    body.menu-open .header-inner{
        background:#fff !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    .main-header{
        overflow:visible;
    }

    .header-inner{
        max-width:none !important;
        min-height:68px;
        padding:12px 16px !important;
        gap:12px !important;
        justify-content:space-between !important;
        position:relative;
    }

    .logo{
        position:static !important;
        left:auto !important;
        transform:none !important;
        flex:1;
        min-width:0;
        margin:0;
        padding:0 8px;
        text-align:center;
        font-size:14px !important;
        line-height:1.2;
        white-space:normal !important;
        z-index:100001;
    }

    .burger{
        display:flex !important;
        align-items:center;
        justify-content:center;
        flex:0 0 42px;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid rgba(17,17,17,0.08);
        border-radius:12px;
        background:#fff;
        box-shadow:none;
        position:relative;
        z-index:100001 !important;
    }

    .burger span{
        position:absolute;
        left:50%;
        top:50%;
        width:18px;
        height:2px;
        margin:0;
        transform-origin:center;
        transition:transform .25s ease, opacity .2s ease;
    }

    .burger span:nth-child(1){
        transform:translate(-50%, calc(-50% - 6px));
    }

    .burger span:nth-child(2){
        transform:translate(-50%, -50%);
    }

    .burger span:nth-child(3){
        transform:translate(-50%, calc(-50% + 6px));
    }

    .burger.active span:nth-child(1){
        transform:translate(-50%, -50%) rotate(45deg);
    }

    .burger.active span:nth-child(2){
        opacity:0;
        transform:translate(-50%, -50%) scaleX(0);
    }

    .burger.active span:nth-child(3){
        transform:translate(-50%, -50%) rotate(-45deg);
    }

    .header-right{
        margin-left:0 !important;
        gap:8px !important;
        flex-shrink:0;
        position:relative;
        z-index:100001;
    }

    .header-quality-switch{
        margin-left:0 !important;
        padding:3px !important;
        background:#f4f4f4 !important;
        border-radius:999px;
    }

    .hq-option{
        padding:6px 10px !important;
        font-size:12px;
    }

    .cart-link{
        min-width:42px;
        height:42px;
        padding:0 !important;
        border:1px solid rgba(17,17,17,0.08);
        border-radius:12px;
        justify-content:center;
        gap:4px;
        background:#fff;
    }

    .cart-icon{
        right:0;
    }

    .main-nav{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        min-height:100dvh;
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        gap:0 !important;
        padding:96px 20px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        margin:0 !important;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        border-radius:0;
        background:#fff !important;
        box-shadow:none;
        opacity:0;
        pointer-events:none;
        transform:translateY(-100%);
        transition:opacity .25s ease, transform .25s ease;
        z-index:99999;
    }

    .main-nav.open{
        opacity:1 !important;
        pointer-events:auto;
        transform:translateY(0) !important;
        left:0 !important;
    }

    .main-nav a{
        margin:0 !important;
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .main-nav > a,
    .nav-products-link{
        display:block;
        width:100%;
        padding:16px 0;
        font-size:18px !important;
        line-height:1.35;
        border-bottom:1px solid #ece8df;
    }

    .nav-item-products{
        width:100%;
    }

    .nav-products-trigger{
        display:flex;
        align-items:center;
        gap:12px;
        width:100%;
        border-bottom:1px solid #ece8df;
    }

    .nav-products-link{
        flex:1;
        border-bottom:none;
    }

    .mobile-products-toggle{
        display:flex;
        flex:0 0 40px;
        margin-left:auto;
    }

    .nav-item-products.mobile-open .mobile-products-toggle-icon::after{
        opacity:0;
        transform:translate(-50%, -50%) rotate(90deg) scaleX(0);
    }

    .mega-menu{
        position:static !important;
        top:auto !important;
        left:auto !important;
        width:100% !important;
        max-height:0;
        margin:0 !important;
        overflow:hidden;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:none !important;
        transition:max-height .3s ease, padding-top .3s ease;
    }

    .nav-item-products.mobile-open .mega-menu{
        max-height:1600px;
        padding-top:12px;
    }

    .mega-inner{
        margin:0 !important;
        padding:16px !important;
        transform:none !important;
        background:#fbfaf7 !important;
        border:1px solid #ece8df;
        border-radius:18px !important;
        box-shadow:none !important;
    }

    .mega-columns{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .mega-col{
        padding-bottom:12px;
        border-bottom:1px solid #ece8df;
    }

    .mega-col:last-child{
        padding-bottom:0;
        border-bottom:none;
    }

    .mega-col h4{
        margin-bottom:8px;
        font-size:12px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:#9c7a2b;
    }

    .mega-col a{
        padding:6px 0;
        font-size:14px;
        line-height:1.45;
    }

    .mega-footer{
        margin-top:16px;
        text-align:left;
    }

    .mega-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:100%;
    }

    .menu-overlay{
        z-index:99990;
    }
}

@media (max-width:640px){

    .header-quality-switch{
        transform:scale(.92);
        transform-origin:right center;
    }

    .logo{
        max-width:140px;
    }
}

@media (max-width:390px){

    .header-inner{
        padding:10px 12px !important;
    }

    .logo{
        max-width:118px;
        font-size:13px !important;
    }

    .hq-option{
        padding:6px 8px !important;
    }
}