/**
 * COSSELIE Site Code - Mobile Menu CSS
 *
 * Migrated from WPCode:
 * "Mobile Sidebar CSS"
 *
 * Loaded on frontend with mobile media condition.
 */
@media (max-width: 1280px) {

    .promo-accordion-container {
        width: 100%;
        margin: 30px auto;
    }

    .header-widget-region .widget {
        font-size: 12px !important;
    }

    /* ---------- Accordion headers ---------- */
    .promo-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        cursor: pointer;
        margin-bottom: 4px;
        border-bottom: 0.5px solid white;
        border-color: hsl(0 0% 100% / .2);
    }

    .promo-accordion-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 17px;
    }

    .promo-accordion-img {
        object-fit: cover;
        border-radius: 4px;
        width: 60px;
        height: 64px;
    }

    /* Chevron — isolated from the link, only this triggers toggle */
    .promo-accordion-header .icon-chevron {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        fill: #fff;
        transition: transform 180ms ease;
        transform-origin: center;
        flex-shrink: 0;
        margin-left: auto;
        padding: 6px;
        /* bigger tap target */
        box-sizing: content-box;
    }

    .promo-accordion-header.is-open .icon-chevron,
    .promo-accordion-header .icon-chevron.is-rotated {
        transform: rotate(180deg);
    }

    /* ---------- Accordion content ---------- */
    .promo-accordion-content {
        display: none;
        padding: 12px;
        border-top: none;
    }

    .promo-accordion-content-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .promo-accordion-content-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 15px;
    }

    /* ---------- Quick links ---------- */
    .promo-quick-links {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 10px;
        margin-top: 10px;
    }

    .promo-quick-links .promo-accordion-header {
        flex: 0 0 calc(50% - 5px);
        padding: 0;
        border-bottom: none;
        margin-bottom: 0;
        height: auto;
        /* let content decide height */
    }

    .promo-quick-links .promo-accordion-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
        width: 100%;
        font-size: 13px;
        line-height: 1.3;
        color: #fff;
        text-decoration: none;
        min-height: 155px;
        /* locks both tiles in a row to same height */
    }

    .promo-quick-links .promo-accordion-img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        border-radius: 8px;
        display: block;
        flex-shrink: 0;
    }

    /* Full-width bottom tile — match centering with the others */
    .promo-quick-links .promo-quick-link-full {
        flex: 0 0 100%;
        height: auto;
    }

    .promo-quick-links .promo-quick-link-full .promo-accordion-link {
        align-items: center;
        /* was flex-start — that's why it was left-aligned */
        min-height: auto;
    }

    .promo-quick-links .promo-quick-link-full .promo-accordion-img {
        width: 100%;
        height: auto;
        max-height: 175px;
        object-fit: cover;
        border-radius: 10px;
    }

    /* ---------- Drawer / search ---------- */
    .mobile-menu.close-drawer {
        z-index: 9999999;
        left: auto !important;
        right: 5px !important;
    }

    .col-full-nav {
        width: 100%;
        left: -100%;
        padding-top: 10px;
    }

    .col-full-nav .site-search {
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-toggled .col-full-nav .site-search {
        padding-top: 46px;
        position: fixed;
        width: 100%;
        background: #000;
        top: 0;
        left: 0;
        padding-bottom: 20px;
        pointer-events: auto;
        visibility: visible;
    }

    .col-full-nav .site-search .widget_product_search {
        width: 80%;
        margin-left: 20px;
    }

    .mobile-extra {
        margin-top: 30px;
    }

    .mobile-extra a {
        font-size: 16px;
    }
}