.cms-layout { display: flex; gap: 1.5rem; margin: 1.5rem 0; }
.cms-layout--split-50-50 .cms-column { flex: 1 1 50%; }
.cms-layout--grid-2-col .cms-column { flex: 1 1 50%; }
.cms-column img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    .cms-layout { flex-direction: column; }
    .cms-layout .cms-column { flex: 1 1 100%; }
}

/* Mega dropdown */
.mega-dropdown { position: relative; }
.mega-dropdown .mega-panel {
    display: none; position: absolute; left: 0; top: 100%;
    width: min(900px, 90vw); padding: 1.5rem 2rem;
    background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.12);
    border-radius: 8px; z-index: 1000;
}
.mega-dropdown:hover .mega-panel,
.mega-dropdown:focus-within .mega-panel { display: block; }
.mega-col h6 { font-weight: 700; margin-bottom: .75rem; }
.mega-list { list-style: none; padding: 0; margin: 0 0 .5rem 0; }
.mega-list li { margin-bottom: .35rem; }
.mega-list a { color: #2c2c2c; text-decoration: none; }
.mega-list a:hover { text-decoration: underline; }
.mega-view-all { font-size: .9rem; }
.mega-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee; text-align: center; }

.cms-article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.cms-filter-tabs a { display: inline-block; padding: 0.4rem 1rem; margin-right: 0.5rem; border-radius: 999px; text-decoration: none; color: #444; background: #f3f3f3; }
.cms-filter-tabs a.active { background: #1a1a1a; color: #fff; }

/* Live stock shortcode cards */
.cms-live-stock { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cms-live-stock-card { display: block; text-decoration: none; color: inherit; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: box-shadow .2s; }
.cms-live-stock-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.cms-live-stock-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.cms-live-stock-meta { padding: .75rem 1rem; }
.cms-live-stock-meta .title { font-weight: 600; font-size: 0.95rem; }
.cms-live-stock-meta .price { color: #c00; font-weight: 700; margin-top: .25rem; }

/* Lead form shortcode */
.cms-lead-form { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 1.25rem; margin: 1.5rem 0; }

/* Exporter's Guide hub — single-column, full-width article list */
.cms-filter-select { max-width: 320px; }
.cms-article-list { display: block; }
.cms-article-row { padding: 1.5rem 0; border-bottom: 1px solid #ececec; }
.cms-article-row:first-child { padding-top: 0; }
.cms-article-row:last-child { border-bottom: 0; }
.cms-article-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.25; }
.cms-article-title a { color: #1a1a1a; text-decoration: none; }
.cms-article-title a:hover { color: #c00; }
.cms-article-excerpt { color: #555; margin: 0 0 .75rem; max-width: 70ch; }
.cms-article-tags { margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.cms-tag { display: inline-block; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; background: #f3f3f3; color: #555; text-decoration: none; }
.cms-tag:hover { background: #e6e6e6; color: #1a1a1a; }
.cms-article-meta { font-size: .85rem; color: #999; }

/* ---- Data-driven navigation: dropdown + mega columns ---- */
.main-menu .navigation > li.dropdown { position: relative; }
.main-menu .navigation > li.dropdown > .sub-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    list-style: none; margin: 0; padding: 8px 0; z-index: 1000;
}
.main-menu .navigation > li.dropdown:hover > .sub-menu,
.main-menu .navigation > li.dropdown:focus-within > .sub-menu { display: block; }
.main-menu .navigation > li.dropdown > .sub-menu > li > a { display: block; padding: 8px 16px; white-space: nowrap; }

/* Mega columns rendered by the data-driven menu (no Bootstrap row wrapper) */
.nav-mega-row { display: flex; gap: 32px; flex-wrap: wrap; }
.nav-mega-col { min-width: 180px; }
.nav-mega-col-title { display: block; font-weight: 700; margin-bottom: .75rem; }
.nav-mega-list { list-style: none; margin: 0; padding: 0; }
.nav-mega-list li { margin-bottom: .35rem; }
.nav-mega-list li a { display: block; }

/* Mobile: stack columns and drop absolute positioning (accordion via theme JS) */
@media (max-width: 991px) {
    .main-menu .navigation > li.dropdown > .sub-menu { position: static; box-shadow: none; }
    .nav-mega-row { flex-direction: column; gap: 12px; }
}

/* Mega menus span the full topbar width and open below the nav (both the
   data-driven menu and the category-driven Exporter's Guide menu). */
@media (min-width: 992px) {
    /* Make the topbar container the positioning context, and neutralize the
       intermediate theme containers (which are position:relative) so the mega
       panel anchors to the full-width topbar instead of the narrow nav strip. */
    .boxcar-header .inner-container { position: relative; }
    .boxcar-header .c-box,
    .boxcar-header .c-box .nav-out-bar,
    .main-menu,
    .main-menu .navigation { position: static; }

    .main-menu .navigation > li.mega-dropdown { position: static; }
    .main-menu .navigation > li.mega-dropdown > .mega-panel {
        left: 10%;
        right: 10%;
        width: auto;
        top: 100%;
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }
    /* Let the category mega menu's Bootstrap columns spread across the wide panel */
    .main-menu .navigation > li.mega-dropdown > .mega-panel > .row { margin: 0; }

    /* Transparent hover-bridge across the empty gap between the trigger and the
       panel, so moving the cursor down into the panel doesn't drop :hover. It is
       attached to the trigger link (narrow), so sliding sideways to a neighbouring
       menu item still switches menus instead of keeping this one open. */
    .main-menu .navigation > li.mega-dropdown > a { position: relative; }
    .main-menu .navigation > li.mega-dropdown > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 60px;
    }
}