/*
 * Art Gold Luxury Mega Menu v2.5.7
 * Clean Premium jewellery-boutique redesign + refined line icons.
 * Desktop only. Porto mobile menu remains untouched.
 */

@media (min-width: 992px) {
    .ag-lmm {
        position: fixed;
        left: 0;
        right: auto;
        width: 100%;
        z-index: 999998;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-5px);
        background: #fbfaf7;
        border-top: 1px solid rgba(180, 138, 69, .34);
        border-bottom: 1px solid rgba(30, 24, 18, .08);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 18px 42px rgba(34, 27, 19, .13);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    .ag-lmm.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* v2.3: no photo / dark overlay. Keep markup for backward compatibility. */
    .ag-lmm__backdrop,
    .ag-lmm__overlay {
        display: none !important;
    }

    .ag-lmm__inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 110px);
        margin: 0 auto;
        padding: 29px 30px 31px;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 34px;
        row-gap: 30px;
        align-items: start;
        scrollbar-width: thin;
        scrollbar-color: rgba(180,138,69,.42) rgba(30,24,18,.04);
    }

    .ag-lmm__column,
    .ag-lmm__column:nth-child(n+6),
    .ag-lmm__column--watch,
    .ag-lmm__column--traditional {
        grid-column: span 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        opacity: 0;
        transform: translateY(5px);
    }

    .ag-lmm__column:hover {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .ag-lmm.is-open .ag-lmm__column {
        animation: agLmmCleanReveal .25s ease forwards;
    }

    .ag-lmm.is-open .ag-lmm__column:nth-child(2) { animation-delay: .015s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(3) { animation-delay: .03s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(4) { animation-delay: .045s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(5) { animation-delay: .06s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(6) { animation-delay: .075s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(7) { animation-delay: .09s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(8) { animation-delay: .105s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(9) { animation-delay: .12s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(10) { animation-delay: .135s; }
    .ag-lmm.is-open .ag-lmm__column:nth-child(11) { animation-delay: .15s; }

    .ag-lmm__title {
        position: relative;
        display: block;
        min-height: 0;
        margin: 0 0 13px;
        padding: 0 0 10px;
        color: #171717 !important;
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
        text-transform: uppercase;
        text-decoration: none !important;
        letter-spacing: .075em;
        text-shadow: none;
        transition: color .17s ease;
    }

    /* v2.4: refined jewellery line icons — small, thin and understated. */
    .ag-lmm__title {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .ag-lmm__title-icon {
        display: inline-flex !important;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        color: var(--ag-lmm-accent, #b48a45);
        opacity: .92;
        transform: translateY(-1px);
        transition: opacity .18s ease, transform .18s ease;
    }

    .ag-lmm__title-icon svg {
        display: block;
        width: 22px;
        height: 22px;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .ag-lmm__title-icon svg circle,
    .ag-lmm__title-icon svg path,
    .ag-lmm__title-icon svg rect,
    .ag-lmm__title-icon svg line,
    .ag-lmm__title-icon svg polyline,
    .ag-lmm__title-icon svg polygon {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .ag-lmm__column:hover .ag-lmm__title-icon {
        opacity: 1;
        transform: translateY(-1px) scale(1.035);
    }

    .ag-lmm__title > span:last-child {
        display: block;
        min-width: 0;
        margin: 0;
    }

    .ag-lmm__title::after {
        content: "";
        position: absolute;
        left: 31px;
        bottom: 0;
        width: 28px;
        height: 1px;
        background: var(--ag-lmm-accent, #b48a45);
        opacity: .82;
        box-shadow: none;
        transition: width .2s ease, opacity .2s ease;
    }

    .ag-lmm__column:hover .ag-lmm__title::after,
    .ag-lmm__title:hover::after,
    .ag-lmm__title:focus::after {
        width: 46px;
        opacity: 1;
    }

    .ag-lmm__title:hover,
    .ag-lmm__title:focus {
        color: var(--ag-lmm-accent, #b48a45) !important;
        transform: none;
        text-shadow: none;
        outline: none;
    }

    .ag-lmm__links {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ag-lmm__links li {
        margin: 0 0 7px;
        padding: 0;
    }

    .ag-lmm__links li:last-child {
        margin-bottom: 0;
    }

    .ag-lmm__links a {
        position: relative;
        display: inline-block;
        padding: 1px 0;
        color: #59534c !important;
        font-size: 12.7px;
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: .006em;
        text-decoration: none !important;
        text-shadow: none;
        transition: color .16s ease, transform .16s ease;
    }

    .ag-lmm__links a::before {
        display: none;
        content: none;
    }

    .ag-lmm__links a:hover,
    .ag-lmm__links a:focus {
        color: #a57934 !important;
        transform: translateX(2px);
        text-shadow: none;
        outline: none;
    }

    /* Traditional category stays special, but quietly. */
    .ag-lmm__column--traditional .ag-lmm__title {
        color: #9c712e !important;
    }

    /* Watches: first five brands + compact reveal. */
    .ag-lmm__watch-extra {
        display: none;
    }

    .ag-lmm__column--watch.is-expanded {
        grid-column: span 2;
    }

    .ag-lmm__column--watch.is-expanded .ag-lmm__links--watch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 26px;
        align-items: start;
    }

    .ag-lmm__column--watch.is-expanded .ag-lmm__watch-extra {
        display: block;
    }

    .ag-lmm__more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #a57934;
        font: inherit;
        font-size: 11.7px;
        font-weight: 600;
        letter-spacing: .02em;
        cursor: pointer;
        text-decoration: none;
        transition: color .16s ease;
    }

    .ag-lmm__more::after {
        content: "+";
        display: inline-block;
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        font-size: 14px;
        line-height: 1;
    }

    .ag-lmm__more:hover,
    .ag-lmm__more:focus {
        color: #72501f;
        transform: none;
        outline: none;
    }

    .ag-lmm__more-close { display: none; }
    .ag-lmm__column--watch.is-expanded .ag-lmm__more-open { display: none; }
    .ag-lmm__column--watch.is-expanded .ag-lmm__more-close { display: inline; }
    .ag-lmm__column--watch.is-expanded .ag-lmm__more::after { content: "−"; }

    /* v2.5.4: Let Porto own the top-navigation underline.
       The plugin changes only the text colour; this prevents doubled/dashed lines. */
    #header .main-menu > li > a {
        transition: color .18s ease;
    }

    #header .main-menu > li:hover > a,
    #header .main-menu > li.current-menu-item > a,
    #header .main-menu > li.current-menu-ancestor > a {
        color: var(--ag-lmm-accent, #b48a45) !important;
    }

    @keyframes agLmmCleanReveal {
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (min-width: 1300px) and (max-width: 1499px) {
    .ag-lmm__inner {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 30px;
        padding-left: 26px;
        padding-right: 26px;
    }
}

@media (min-width: 992px) and (max-width: 1299px) {
    .ag-lmm__inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 26px;
        row-gap: 27px;
        padding: 25px 24px 28px;
    }

    .ag-lmm__title {
        font-size: 12.5px;
    }

    .ag-lmm__links a {
        font-size: 12.3px;
    }
}

@media (max-width: 991px) {
    .ag-lmm {
        display: none !important;
    }
}


/* ============================================================
 * v2.5.0 — Single-category hover dropdown
 * Each header item reveals only its own category.
 * ============================================================ */
@media (min-width: 992px) {
    .ag-lmm {
        right: auto !important;
        min-width: 280px;
        max-width: calc(100vw - 24px);
        border-radius: 0 0 10px 10px;
        overflow: hidden;
    }

    .ag-lmm__inner {
        display: block !important;
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 110px);
        padding: 24px 28px 26px;
        overflow-y: auto;
    }

    .ag-lmm__column,
    .ag-lmm.is-open .ag-lmm__column {
        display: none !important;
        width: 100%;
        min-width: 0;
        opacity: 0;
        transform: none;
        animation: none !important;
    }

    .ag-lmm__column.is-active,
    .ag-lmm.is-open .ag-lmm__column.is-active {
        display: block !important;
        opacity: 1;
        transform: none;
        animation: agLmmCleanReveal .18s ease forwards !important;
    }

    .ag-lmm__column--watch.is-expanded {
        grid-column: auto !important;
    }

    .ag-lmm__column--watch.is-expanded .ag-lmm__links--watch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}


/* ============================================================
 * v2.5.1 — Porto conflict fix
 * The plugin owns desktop dropdowns for #menu-home-menu.
 * Prevent Porto's original narrow/wide popups from appearing behind it.
 * ============================================================ */
@media (min-width: 992px) {
    #menu-home-menu > li > .popup,
    #menu-home-menu > li > .sub-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
    }

    /* Keep our own title fully visible at the top of every dropdown. */
    .ag-lmm__inner {
        padding-top: 24px !important;
    }

    .ag-lmm__column.is-active > .ag-lmm__title {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* ============================================================
 * v2.5.5 — Keep the desktop top navigation on ONE row.
 * No dropdown/icon/layout behaviour is changed.
 * ============================================================ */
@media (min-width: 992px) {
    #header .header-bottom .header-row,
    #header .main-menu-wrap .header-row,
    #header .header-center {
        width: 100% !important;
        max-width: 100% !important;
    }

    #header .main-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    #header .main-menu > li {
        float: none !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    #header .main-menu > li > a {
        white-space: nowrap !important;
        padding-left: clamp(5px, .72vw, 13px) !important;
        padding-right: clamp(5px, .72vw, 13px) !important;
    }
}

/* Slightly tighter only on narrower desktop widths so all 11 items stay together. */
@media (min-width: 992px) and (max-width: 1199px) {
    #header .main-menu > li > a {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
    }
}


/* ============================================================
 * v2.5.6 — Remove Porto dropdown arrows from the TOP navigation
 * only. Dropdown behaviour remains unchanged.
 * ============================================================ */
@media (min-width: 992px) {
    #menu-home-menu.show-arrow > li.has-sub > a::after,
    #menu-home-menu.show-arrow > li.menu-item-has-children > a::after,
    #menu-home-menu > li.has-sub > a::after,
    #menu-home-menu > li.menu-item-has-children > a::after {
        content: none !important;
        display: none !important;
    }

    /* Fallback for Porto versions that output the arrow as an <i> element. */
    #menu-home-menu > li.has-sub > a > i,
    #menu-home-menu > li.menu-item-has-children > a > i {
        display: none !important;
    }

    /* Remove any arrow-reserved spacing while preserving the one-row layout. */
    #menu-home-menu > li.has-sub > a,
    #menu-home-menu > li.menu-item-has-children > a {
        padding-right: clamp(5px, .72vw, 13px) !important;
    }
}


/* ============================================================
 * v2.5.7 — Title / subcategory alignment
 * The title text and subcategory links share the exact same
 * left edge. The thin category icon sits separately to the left.
 * ============================================================ */
@media (min-width: 992px) {
    .ag-lmm__title {
        position: relative !important;
        display: block !important;
        padding-left: 0 !important;
    }

    .ag-lmm__title-icon {
        position: absolute !important;
        left: -30px !important;
        top: -4px !important;
        margin: 0 !important;
    }

    .ag-lmm__title > span:last-child {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ag-lmm__title::after {
        left: 0 !important;
    }

    .ag-lmm__links {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}