/* ================================================================
   Artel Mega Menu  v2.4.1
   ================================================================ */

.tmm-wrapper *,
.tmm-wrapper *::before,
.tmm-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ================================================================
   DESKTOP  ≥ 992px
   ================================================================ */
@media (min-width: 992px) {

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

    /* tmm-wrapper is the positioning context for the panel */
    .tmm-wrapper {
        position: relative;
    }

    /* Nav bar */
    .tmm-nav {
        position: static; /* panel anchors to .tmm-wrapper, not .tmm-nav */
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
    }

    .tmm-nav__list {
        display: flex;
        list-style: none;
        justify-content: center;
        flex-wrap: wrap;
    }

    .tmm-nav__item { position: static; }

    .tmm-nav__item > a {
        display: block;
        padding: 18px 20px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        color: #1a1a1a;
        position: relative;
        transition: color 0.2s;
        white-space: nowrap;
    }

    .tmm-nav__item > a::after {
        content: '';
        position: absolute;
        bottom: 10px; left: 20px; right: 20px;
        height: 1px;
        background: #0abab5;
        transform: scaleX(0);
        transition: transform 0.25s ease;
    }

    .tmm-nav__item > a:hover::after,
    .tmm-nav__item.is-open > a::after { transform: scaleX(1); }

    .tmm-nav__item > a:hover,
    .tmm-nav__item.is-open > a { color: #0abab5; }

    /* Panel — anchors to .tmm-wrapper via position:absolute */
    .tmm-panel {
        display: none;
        position: absolute;
        top: 100%;   /* bottom edge of .tmm-wrapper (which wraps the nav bar) */
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
        border-top: 2px solid #0abab5;
        border-bottom: 1px solid #e8e8e8;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    .tmm-panel.is-visible {
        display: block;
        animation: tmmFade 0.18s ease forwards;
    }

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

    .tmm-panel__inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 28px 40px;
    }

    /* Slider */
    .tmm-slider {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .tmm-slider__viewport {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .tmm-slider__track {
        display: flex;
        gap: 16px;
        will-change: transform;
    }

    .tmm-slider__track.is-animating {
        transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    }

    .tmm-tile {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: inherit;
        transition: opacity 0.18s;
    }

    .tmm-tile:hover { opacity: 0.75; }

    .tmm-tile__img-wrap {
        width: 100%;
        aspect-ratio: 1/1;
        overflow: hidden;
        background: #f0f0f0;
        border-radius: 4px;
    }

    .tmm-tile__img {
        width: 100%; height: 100%;
        object-fit: cover; display: block;
        transition: transform 0.28s ease;
    }

    .tmm-tile:hover .tmm-tile__img { transform: scale(1.04); }

    .tmm-tile__name {
        margin-top: 9px;
        font-size: 11px; font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #1a1a1a;
        text-align: center;
        line-height: 1.4;
    }

    /* Arrows */
    .tmm-slider__arrow {
        flex: 0 0 auto;
        width: 34px; height: 34px;
        border: 1px solid #ddd; border-radius: 50%;
        background: #fff; cursor: pointer;
        font-size: 22px; line-height: 1; color: #555;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.18s, border-color 0.18s, color 0.18s;
        padding: 0;
    }

    .tmm-slider__arrow:hover {
        background: #0abab5; border-color: #0abab5; color: #fff;
    }

    .tmm-slider__arrow:disabled {
        opacity: 0.28; cursor: default; pointer-events: none;
    }
}

/* ================================================================
   MOBILE  ≤ 991px
   ================================================================ */
@media (max-width: 991px) {

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

    .tmm-wrapper {
        font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
    }

    /* Hamburger */
    .tmm-mobile-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 16px;
        background: none; border: none; cursor: pointer;
        font-size: 12px; font-weight: 600;
        letter-spacing: 0.1em; text-transform: uppercase;
        color: #1a1a1a; font-family: inherit;
    }

    .tmm-mobile-toggle__icon {
        display: flex; flex-direction: column;
        gap: 5px; width: 22px; flex-shrink: 0;
    }

    .tmm-mobile-toggle__icon span {
        display: block; height: 2px;
        background: #1a1a1a; border-radius: 2px;
        transition: transform 0.24s, opacity 0.24s;
        transform-origin: center;
    }

    .tmm-mobile-toggle.is-open .tmm-mobile-toggle__icon span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .tmm-mobile-toggle.is-open .tmm-mobile-toggle__icon span:nth-child(2) {
        opacity: 0;
    }
    .tmm-mobile-toggle.is-open .tmm-mobile-toggle__icon span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Drawer */
    .tmm-mobile-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.32s ease;
        background: #fff;
    }

    .tmm-mobile-nav.is-open {
        max-height: 75vh;
        overflow-y: auto;
    }

    /* Accordion */
    .tmm-mobile-item { border-bottom: 1px solid #f0f0f0; }

    .tmm-mobile-item__toggle {
        display: flex; align-items: center;
        justify-content: space-between;
        width: 100%; padding: 13px 16px;
        background: none; border: none; cursor: pointer;
        font-size: 12px; font-weight: 600;
        letter-spacing: 0.1em; text-transform: uppercase;
        color: #1a1a1a; text-align: left; font-family: inherit;
    }

    .tmm-mobile-item__toggle a {
        color: inherit; text-decoration: none; flex: 1;
    }

    .tmm-mobile-item__chevron {
        font-size: 18px; color: #aaa;
        transition: transform 0.22s;
        line-height: 1; flex-shrink: 0;
    }

    .tmm-mobile-item.is-open > .tmm-mobile-item__toggle .tmm-mobile-item__chevron {
        transform: rotate(90deg);
    }

    /* 2-column subcategory grid */
    .tmm-mobile-subgrid {
        display: none;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px 16px 18px;
        background: #fafafa;
    }

    .tmm-mobile-item.is-open > .tmm-mobile-subgrid { display: grid; }

    .tmm-mobile-tile {
        display: flex; flex-direction: column;
        align-items: center;
        text-decoration: none; color: #1a1a1a;
    }

    .tmm-mobile-tile__img-wrap {
        width: 100%; aspect-ratio: 1/1;
        overflow: hidden; background: #f0f0f0; border-radius: 4px;
    }

    .tmm-mobile-tile__img {
        width: 100%; height: 100%;
        object-fit: cover; display: block;
    }

    .tmm-mobile-tile__name {
        margin-top: 6px;
        font-size: 10px; font-weight: 600;
        letter-spacing: 0.06em; text-transform: uppercase;
        text-align: center; line-height: 1.3; color: #1a1a1a;
    }
}

/* Editor notice */
.tmm-notice {
    background: #fff8e1; border: 1px dashed #f0c040;
    padding: 16px 20px; font-size: 13px;
    color: #5a4000; border-radius: 4px;
}