﻿/* =========================================================
   NILEN - DESKTOP (Suryan-like)
   - white top row: pills + cart + account + big search + logo
   - black nav bar with dropdowns
   ========================================================= */

@media (min-width: 768px) {

    .sury-desktop {
        background: #fff;
    }

    .sury-top {
        padding: 14px 0;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .sury-top-row {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    /* RIGHT logo */
    .sury-right {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-width: 220px;
    }

    .sury-logo img {
        height: 62px;
        width: auto;
        display: block;
        object-fit: contain;
    }

    /* CENTER search */
    .sury-search {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }

    .sury-search-form {
        width: 100%;
        max-width: 900px;
        height: 44px;
        display: flex;
        align-items: center;
        border: 1px solid rgba(0,0,0,.18);
        border-radius: 999px;
        overflow: hidden;
        background: #fff;
    }

        .sury-search-form input {
            flex: 1;
            height: 44px;
            border: 0;
            outline: 0;
            padding: 0 18px;
            text-align: right;
            background: transparent;
        }

        .sury-search-form button {
            width: 54px;
            height: 44px;
            border: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    /* LEFT tools */
    .sury-left {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 320px;
    }

    .sury-pill {
        text-decoration: none;
        font-size: 14px;
        padding: 8px 14px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        line-height: 1;
        border: 1px solid rgba(0,0,0,.12);
    }

    .sury-pill-dark {
        background: #000;
        color: #fff;
        border-color: #000;
    }

    .sury-pill-light {
        background: #f5f5f5;
        color: #111;
    }

    .sury-cart {
        text-decoration: none;
        color: #111;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 12px;
    }

        .sury-cart .icon {
            font-size: 18px;
        }

    /* black nav bar */
    .sury-blacknav {
        background: #000;
    }

    .sury-menu {
        position: relative;
        list-style: none;
        margin: 0;
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
    }
        .sury-menu > li {
            flex: 0 0 auto; /* خیلی مهم: دیگه li کل ردیف رو پر نمی‌کنه */
            position: relative; /* لنگر dropdown */
        }
            .sury-menu > li > a {
                color: rgba(255,255,255,.90);
                text-decoration: none;
                font-size: 14px;
                display: inline-block; /* عرض = متن */
            }

            .sury-menu > li > a:hover {
                color: #fff;
            }
        .sury-menu li.has-children {
            position: relative;
        }
        /* dropdown */
        .sury-menu li.has-children::after {
            content: "";
            position: absolute;
            right: 0;
            left: 0;
            top: 100%;
            height: 14px; /* اندازه گپ امن */
            background: transparent;
        }

        .sury-menu .dropdown {
            position: absolute;
            right: 0;
            left: auto;
            top: 100%; /* ✅ گپ حذف شد */
            margin-top: 10px; /* فاصله بصری، ولی hover امن می‌مونه چون پل داریم */
            background: #fff;
            border-radius: 12px;
            min-width: 240px;
            padding: 10px;
            list-style: none;
            margin-right: 0;
            display: none;
            z-index: 5000;
            border: 1px solid rgba(0,0,0,.08);
        }

        /* ✅ هم با hover و هم با click/focus باز بمونه */
        .sury-menu li.has-children:hover > .dropdown,
        .sury-menu li.has-children:focus-within > .dropdown {
            display: block;
        }
}
.owl-carousel {
    display: block !important;
}