.cdcm-hub {
    --cdcm-accent: #ff6200;
    --cdcm-accent-text: #131921;
    --cdcm-text: #131921;
    --cdcm-muted: #6b7280;
    --cdcm-sidebar: #f7f7f8;
    --cdcm-panel: #ffffff;
    --cdcm-border: #ececec;
    --cdcm-button-bg: #131921;
    --cdcm-button-border: #131921;
    --cdcm-button-text: #ff6200;
    --cdcm-button-open-bg: #f5f6f8;
    --cdcm-button-open-border: #e8ebef;
    --cdcm-button-open-text: #131921;
    --cdcm-active-bg: #fff1e8;
    --cdcm-panel-width: 1280px;
    --cdcm-font: "Roboto", Arial, sans-serif;
    --cdcm-button-radius: 12px;
    --cdcm-panel-top: 100%;
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 100%;
    color: var(--cdcm-text);
    z-index: 60;
    font-family: var(--cdcm-font);
}

.cdcm-hub,
.cdcm-hub * {
    box-sizing: border-box;
}

.cdcm-hub__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    width: auto;
    max-width: 100%;
    padding: 10px 16px;
    border-radius: var(--cdcm-button-radius);
    border: 1px solid var(--cdcm-button-border);
    background: var(--cdcm-button-bg);
    color: var(--cdcm-button-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: transform .15s ease, filter .15s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.cdcm-hub__trigger:hover,
.cdcm-hub__trigger:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.cdcm-hub.is-open .cdcm-hub__trigger {
    background: var(--cdcm-button-open-bg);
    border-color: var(--cdcm-button-open-border);
    color: var(--cdcm-button-open-text);
    filter: none;
    transform: none;
}

.cdcm-hub__trigger-icon-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
}

.cdcm-hub__trigger-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .18s ease, transform .18s ease;
}

.cdcm-hub__trigger-icon--close {
    opacity: 0;
    transform: scale(.8) rotate(-90deg);
}

.cdcm-hub__trigger-icon--menu {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.cdcm-hub.is-open .cdcm-hub__trigger-icon--menu {
    opacity: 0;
    transform: scale(.8) rotate(90deg);
}

.cdcm-hub.is-open .cdcm-hub__trigger-icon--close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.cdcm-hub__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(var(--cdcm-panel-width), calc(100vw - 32px));
    min-height: 560px;
    max-height: min(78vh, 860px);
    background: var(--cdcm-panel);
    border: 1px solid var(--cdcm-border);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .18);
    overflow: hidden;
}

.cdcm-hub--fullscreen .cdcm-hub__panel {
    position: fixed;
    top: var(--cdcm-panel-top);
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    min-height: min(620px, calc(100dvh - var(--cdcm-panel-top)));
    max-height: calc(100dvh - var(--cdcm-panel-top));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.cdcm-hub__mobile-head {
    display: none;
}

.cdcm-hub__close {
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--cdcm-text);
}

.cdcm-hub__sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 348px;
    background: var(--cdcm-sidebar);
    border-right: 1px solid var(--cdcm-border);
    padding: 18px 0;
    overflow-y: auto;
}

.cdcm-hub__sidebar-title {
    padding: 0 20px 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--cdcm-text);
}

.cdcm-hub__root-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cdcm-hub__root-item {
    margin: 0;
    padding: 0 12px;
}

.cdcm-hub__root-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 9px 14px;
    border-radius: 14px;
    border: 0;
    background: transparent;
    color: var(--cdcm-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.cdcm-hub__root-item.is-active .cdcm-hub__root-button {
    background: var(--cdcm-active-bg);
    color: var(--cdcm-text);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    font-weight: 600;
}

.cdcm-hub__root-button:hover,
.cdcm-hub__root-button:focus {
    background: rgba(255,255,255,.86);
}

.cdcm-hub__root-icon {
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(19, 25, 33, .08);
    border-radius: 9px;
    background: #fff;
    color: var(--cdcm-accent);
    box-shadow: 0 1px 2px rgba(19, 25, 33, .04);
}

.cdcm-hub__root-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.cdcm-hub__root-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.cdcm-hub__root-item.is-active .cdcm-hub__root-icon,
.cdcm-hub__root-button:hover .cdcm-hub__root-icon,
.cdcm-hub__root-button:focus .cdcm-hub__root-icon {
    border-color: rgba(255, 98, 0, .22);
}

.cdcm-hub__root-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 500;
}

/* Preserve WooCommerce category names exactly as stored (case + accents).
   WoodMart/global button styles must not force uppercase. */
.cdcm-hub__root-button,
.cdcm-hub__root-name {
    text-transform: none !important;
}

.cdcm-hub__root-count {
    color: var(--cdcm-muted);
    font-size: .85em;
}

.cdcm-hub__root-arrow {
    color: currentColor;
    font-size: 24px;
    line-height: 1;
}

.cdcm-hub__content {
    margin-left: 348px;
    min-height: 560px;
    max-height: min(78vh, 860px);
    background: var(--cdcm-panel);
    padding: 26px 30px 32px;
    overflow: auto;
}

.cdcm-hub--fullscreen .cdcm-hub__content {
    min-height: min(620px, calc(100dvh - var(--cdcm-panel-top)));
    max-height: calc(100dvh - var(--cdcm-panel-top));
}

.cdcm-hub__content.is-loading {
    opacity: .62;
}

.cdcm-hub__branch-head {
    margin-bottom: 20px;
}

.cdcm-hub__branch-title {
    color: var(--cdcm-text);
    text-decoration: none;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.cdcm-hub__branch-title:hover {
    color: var(--cdcm-accent);
}

.cdcm-hub__groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 38px;
}

.cdcm-hub__group {
    min-width: 0;
}

.cdcm-hub__group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--cdcm-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.32;
}

.cdcm-hub__group-title:hover {
    color: var(--cdcm-accent);
}

.cdcm-hub__group-count,
.cdcm-hub__inline-count {
    color: var(--cdcm-muted);
    font-size: .84em;
    font-weight: 500;
}

.cdcm-hub__group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cdcm-hub__group-item {
    margin: 0;
    padding: 0;
}

.cdcm-hub__group-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: #444b57;
    text-decoration: none;
    line-height: 1.35;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 400;
}

.cdcm-hub__group-link:hover {
    color: var(--cdcm-accent);
}

.cdcm-hub__view-all {
    display: inline-block;
    margin-top: 10px;
    color: var(--cdcm-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.cdcm-hub__view-all:hover {
    text-decoration: underline;
}

.cdcm-hub__empty {
    padding: 14px 0;
    color: var(--cdcm-muted);
}


/* Production scroll isolation:
   while the mega menu is open, the page itself is frozen.
   Only the mega menu's sidebar/content may scroll. */
html.cdcm-hub-lock,
body.cdcm-hub-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.cdcm-hub-lock {
    padding-right: var(--cdcm-scrollbar-width, 0px);
}

.cdcm-hub__panel {
    overscroll-behavior: contain;
}

.cdcm-hub__sidebar,
.cdcm-hub__content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


.cdcm-hub__sidebar,
.cdcm-hub__content {
    scrollbar-width: thin;
    scrollbar-color: var(--cdcm-accent) transparent;
}

.cdcm-hub__sidebar::-webkit-scrollbar,
.cdcm-hub__content::-webkit-scrollbar {
    width: 8px;
}

.cdcm-hub__sidebar::-webkit-scrollbar-track,
.cdcm-hub__content::-webkit-scrollbar-track {
    background: transparent;
}

.cdcm-hub__sidebar::-webkit-scrollbar-thumb,
.cdcm-hub__content::-webkit-scrollbar-thumb {
    background: var(--cdcm-accent);
    border-radius: 999px;
}

@media (max-width: 1480px) {
    .cdcm-hub__groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .cdcm-hub__sidebar {
        width: 300px;
    }

    .cdcm-hub__content {
        margin-left: 300px;
    }
}

@media (max-width: 1024px) {
    .cdcm-hub__panel,
    .cdcm-hub--fullscreen .cdcm-hub__panel {
        position: fixed;
        inset: 0;
        width: 100vw;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        z-index: 99999;
    }

    .cdcm-hub__mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--cdcm-border);
        background: var(--cdcm-panel);
    }

    .cdcm-hub__mobile-title {
        font-weight: 800;
        font-size: 18px;
    }

    .cdcm-hub__sidebar {
        position: static;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--cdcm-border);
        padding: 10px 0;
        max-height: 36vh;
    }

    .cdcm-hub__sidebar-title {
        display: none;
    }

    .cdcm-hub__content,
    .cdcm-hub--fullscreen .cdcm-hub__content {
        margin-left: 0;
        min-height: 0;
        max-height: none;
        padding: 18px 16px 24px;
        height: calc(100dvh - 260px);
    }

    .cdcm-hub__branch-title {
        font-size: 26px;
    }

    .cdcm-hub__groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 20px;
    }
}

@media (max-width: 640px) {
    .cdcm-hub__groups {
        grid-template-columns: 1fr;
    }

    .cdcm-hub__trigger {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ================================================================
   v2.4.3 MOBILE NAVIGATOR
   Desktop layout above 1024px is intentionally unchanged.
   ================================================================ */

.cdcm-mobile-nav {
    display: none;
}

@media (max-width: 1024px) {
    /* Hide the desktop hub UI only on mobile/tablet. */
    .cdcm-hub__sidebar,
    .cdcm-hub__content {
        display: none !important;
    }

    .cdcm-hub__panel,
    .cdcm-hub--fullscreen .cdcm-hub__panel {
        display: flex;
        flex-direction: column;
        background: #fff;
        font-family: var(--cdcm-font);
    }

    .cdcm-hub__mobile-head {
        position: sticky;
        top: 0;
        z-index: 5;
        display: grid;
        grid-template-columns: minmax(76px, auto) 1fr 44px;
        align-items: center;
        min-height: 62px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--cdcm-border);
        background: var(--cdcm-button-bg);
        color: var(--cdcm-button-text);
    }

    .cdcm-hub__mobile-title {
        min-width: 0;
        padding: 0 8px;
        overflow: hidden;
        color: var(--cdcm-button-text);
        font-size: 17px;
        font-weight: 800;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cdcm-mobile__back,
    .cdcm-hub__mobile-head .cdcm-hub__close {
        min-height: 42px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--cdcm-button-text);
        font-family: var(--cdcm-font);
        cursor: pointer;
    }

    .cdcm-mobile__back {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        justify-self: start;
        padding: 6px 8px;
        font-size: 14px;
        font-weight: 700;
    }

    .cdcm-mobile__back[hidden] {
        visibility: hidden;
        display: inline-flex !important;
        pointer-events: none;
    }

    .cdcm-mobile__back > span:first-child {
        font-size: 28px;
        font-weight: 400;
        line-height: 1;
    }

    .cdcm-hub__mobile-head .cdcm-hub__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        width: 42px;
        padding: 0;
        font-size: 30px;
        font-weight: 300;
    }

    .cdcm-mobile-nav {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        background: #fff;
        color: var(--cdcm-text);
    }

    .cdcm-mobile__search-wrap {
        position: relative;
        flex: 0 0 auto;
        padding: 12px 14px;
        border-bottom: 1px solid var(--cdcm-border);
        background: #fff;
    }

    .cdcm-mobile__search-icon {
        position: absolute;
        top: 50%;
        left: 30px;
        z-index: 1;
        color: #737985;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .cdcm-mobile__search {
        display: block;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0 14px 0 44px;
        border: 1px solid #e4e6ea !important;
        border-radius: 12px !important;
        outline: none;
        background: #f7f7f8 !important;
        color: var(--cdcm-text) !important;
        font-family: var(--cdcm-font) !important;
        font-size: 15px !important;
        box-shadow: none !important;
        appearance: none;
    }

    .cdcm-mobile__search:focus {
        border-color: var(--cdcm-accent) !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(255, 98, 0, .12) !important;
    }

    .cdcm-mobile__search::-webkit-search-cancel-button {
        cursor: pointer;
    }

    .cdcm-mobile__body {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--cdcm-accent) transparent;
    }

    .cdcm-mobile__body::-webkit-scrollbar {
        width: 6px;
    }

    .cdcm-mobile__body::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--cdcm-accent);
    }

    .cdcm-mobile__list {
        list-style: none;
        margin: 0 !important;
        padding: 8px 0 18px !important;
        opacity: 1;
        transition: opacity .12s ease;
    }

    .cdcm-mobile__list.is-loading {
        opacity: .4;
        pointer-events: none;
    }

    .cdcm-mobile__item {
        display: flex;
        min-height: 56px;
        margin: 0 12px !important;
        padding: 0 !important;
        align-items: stretch;
        border-bottom: 1px solid #eef0f2;
    }

    .cdcm-mobile__link {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        padding: 13px 10px 13px 6px;
        color: var(--cdcm-text) !important;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: none !important;
    }

    .cdcm-mobile__link:active {
        color: var(--cdcm-accent) !important;
    }

    .cdcm-mobile__icon {
        display: inline-flex;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid #eceef1;
        border-radius: 9px;
        background: #fff;
        color: var(--cdcm-accent);
    }

    .cdcm-mobile__icon img {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .cdcm-mobile__icon svg {
        display: block;
        width: 18px;
        height: 18px;
    }

    .cdcm-mobile__name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .cdcm-mobile__next {
        display: inline-flex;
        flex: 0 0 52px;
        width: 52px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-left: 1px solid #eef0f2;
        background: transparent;
        color: var(--cdcm-text);
        cursor: pointer;
        font-family: var(--cdcm-font);
        font-size: 28px;
        line-height: 1;
    }

    .cdcm-mobile__next:active {
        background: var(--cdcm-active-bg);
        color: var(--cdcm-accent);
    }

    .cdcm-mobile__loading,
    .cdcm-mobile__empty {
        padding: 30px 20px;
        color: var(--cdcm-muted);
        font-size: 14px;
        text-align: center;
    }

    .cdcm-mobile__view-all {
        display: flex;
        flex: 0 0 auto;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 18px;
        border-top: 1px solid var(--cdcm-border);
        background: var(--cdcm-button-bg);
        color: var(--cdcm-button-text) !important;
        font-family: var(--cdcm-font);
        font-size: 14px;
        font-weight: 800;
        text-align: center;
        text-decoration: none !important;
    }

    .cdcm-mobile__view-all-name {
        overflow: hidden;
        max-width: 55vw;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cdcm-mobile__view-all[hidden] {
        display: none !important;
    }
}

/* ================================================================
   v2.4.5 MOBILE BRAND HEADER
   Mobile trigger stays on one line and uses the same dark-orange identity
   as desktop: #131921 + #ff6200.
   ================================================================ */

.cdcm-hub__trigger-label--mobile {
    display: none;
}

@media (max-width: 1024px) {
    .cdcm-hub__panel[hidden] {
        display: none !important;
    }

    .cdcm-hub {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
    }

    .cdcm-hub__trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        border: 1px solid #131921 !important;
        border-radius: 10px !important;
        background: #131921 !important;
        color: #ff6200 !important;
        font-family: var(--cdcm-font) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-transform: none !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

    .cdcm-hub__trigger:hover,
    .cdcm-hub__trigger:focus {
        background: #131921 !important;
        border-color: #131921 !important;
        color: #ff6200 !important;
        filter: none !important;
        transform: none !important;
    }

    .cdcm-hub.is-open .cdcm-hub__trigger {
        background: #fff1e8 !important;
        border-color: #ff6200 !important;
        color: #131921 !important;
        filter: none !important;
        transform: none !important;
    }

    .cdcm-hub__trigger-icon-wrap {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    .cdcm-hub__trigger-icon svg {
        width: 16px;
        height: 16px;
    }

    .cdcm-hub__trigger-label {
        min-width: 0;
        white-space: nowrap !important;
    }

    .cdcm-hub__trigger-label--desktop {
        display: none !important;
    }

    .cdcm-hub__trigger-label--mobile {
        display: inline !important;
    }
}


/* ================================================================
   v2.4.6 MOBILE SEARCH FIX
   Neutralizes WoodMart/browser search decorations so the placeholder
   never overlaps an icon. Mobile only; desktop remains untouched.
   ================================================================ */

@media (max-width: 1024px) {
    .cdcm-mobile__search-wrap {
        padding: 12px 14px !important;
    }

    .cdcm-mobile__search-icon {
        display: none !important;
    }

    .cdcm-mobile__search {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid #e4e6ea !important;
        border-radius: 12px !important;
        outline: 0 !important;
        background-color: #f7f7f8 !important;
        background-image: none !important;
        background-position: initial !important;
        background-repeat: no-repeat !important;
        color: #131921 !important;
        font-family: var(--cdcm-font) !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 46px !important;
        text-indent: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .cdcm-mobile__search::placeholder {
        color: #767b85 !important;
        opacity: 1 !important;
    }

    .cdcm-mobile__search::-webkit-search-decoration,
    .cdcm-mobile__search::-webkit-search-results-button,
    .cdcm-mobile__search::-webkit-search-results-decoration {
        display: none !important;
        -webkit-appearance: none !important;
    }

    .cdcm-mobile__search::-webkit-search-cancel-button {
        margin-right: 2px;
        cursor: pointer;
    }

    .cdcm-mobile__search:focus {
        border-color: #ff6200 !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 0 0 3px rgba(255, 98, 0, .12) !important;
    }
}


/* ================================================================
   v2.4.7 MOBILE UI POLISH
   - Properly aligned Back chevron + label.
   - One controlled search icon with safe input spacing.
   Desktop remains untouched.
   ================================================================ */

@media (max-width: 1024px) {
    .cdcm-mobile__back {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        min-height: 42px !important;
        padding: 6px 8px !important;
        line-height: 1 !important;
        color: #ff6200 !important;
        vertical-align: middle !important;
    }

    .cdcm-mobile__back[hidden] {
        visibility: hidden;
        display: inline-flex !important;
        pointer-events: none;
    }

    .cdcm-mobile__back-icon {
        display: block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0;
    }

    .cdcm-mobile__back-label {
        display: block;
        margin: 0;
        padding: 0;
        font-family: var(--cdcm-font);
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    /* Remove the older glyph-specific rule. */
    .cdcm-mobile__back > span:first-child {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    .cdcm-mobile__search-wrap {
        position: relative !important;
        padding: 12px 14px !important;
    }

    .cdcm-mobile__search-icon {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 30px !important;
        z-index: 2 !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        color: #6f7480 !important;
        pointer-events: none !important;
        transform: translateY(-50%) !important;
    }

    .cdcm-mobile__search {
        width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 14px 0 46px !important;
        border: 1px solid #e4e6ea !important;
        border-radius: 12px !important;
        background-color: #f7f7f8 !important;
        background-image: none !important;
        color: #131921 !important;
        font-family: var(--cdcm-font) !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 46px !important;
        text-indent: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .cdcm-mobile__search::placeholder {
        color: #767b85 !important;
        opacity: 1 !important;
    }

    .cdcm-mobile__search::-webkit-search-decoration,
    .cdcm-mobile__search::-webkit-search-results-button,
    .cdcm-mobile__search::-webkit-search-results-decoration {
        display: none !important;
        -webkit-appearance: none !important;
    }

    .cdcm-mobile__search:focus {
        border-color: #ff6200 !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 0 0 3px rgba(255, 98, 0, .12) !important;
    }
}

/* ==========================================================
   v1.6.2 — Homepage inline desktop mode
   - Desktop trigger hidden in inline mode.
   - Sidebar aligns exactly with the Elementor hero slider.
   - Flyout starts flush at the RIGHT edge of the parent category list
     (no Elementor gap) and extends to the RIGHT edge of the hero row.
   - Flyout auto-matches the live slider height.
   - Flyout sits above Swiper/slider controls.
   - Mobile retains the normal fullscreen trigger/drill-down.
   ========================================================== */
@media (min-width: 1025px) {
    /* Recommended Elementor structure:
       .teddymall-hero-row
         ├─ .teddymall-cat-sidebar  (HTML widget / shortcode)
         └─ .teddymall-hero-slider  (Slider widget)
    */
    .teddymall-hero-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        width: 100% !important;
        /* Gap is intentionally NOT set here: control it from Elementor. */
    }

    .teddymall-cat-sidebar {
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        position: relative !important;
        z-index: 90 !important;
        align-self: stretch !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .teddymall-cat-sidebar > .elementor-widget-container,
    .teddymall-cat-sidebar .elementor-widget-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .teddymall-hero-slider {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        position: relative !important;
        z-index: 1 !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .teddymall-hero-slider > .elementor-widget-container {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .teddymall-hero-slider .swiper,
    .teddymall-hero-slider .swiper-wrapper,
    .teddymall-hero-slider .swiper-slide {
        height: 100% !important;
    }

    .cdcm-hub--homepage-inline {
        position: relative;
        display: block;
        width: var(--cdcm-inline-width);
        max-width: 100%;
        height: var(--cdcm-inline-height);
        min-height: var(--cdcm-inline-height);
        z-index: 100;
        overflow: visible;
    }

    /* On the homepage the roots are already visible, so a second
       “Όλες οι κατηγορίες” button adds no value. Keep it for mobile. */
    .cdcm-hub--homepage-inline .cdcm-hub__trigger {
        display: none !important;
    }

    /* v1.6.7: the panel itself becomes the single visual shell when a
       branch is open. This removes top/right/bottom seams completely and
       makes the category rail + flyout read as one continuous component. */
    .cdcm-hub--homepage-inline .cdcm-hub__panel,
    .cdcm-hub--homepage-inline.cdcm-hub--fullscreen .cdcm-hub__panel {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        min-height: var(--cdcm-inline-height);
        height: var(--cdcm-inline-height);
        max-height: var(--cdcm-inline-height);
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--cdcm-border);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(19, 25, 33, .05);
        z-index: 101;
    }

    .cdcm-hub--homepage-inline.is-branch-open .cdcm-hub__panel {
        width: var(--cdcm-inline-total-width);
        max-width: none;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__sidebar {
        position: relative;
        inset: auto;
        width: var(--cdcm-inline-width);
        min-width: var(--cdcm-inline-width);
        max-width: var(--cdcm-inline-width);
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        padding: 6px 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        box-shadow: none;
    }

    /* v1.6.8: no decorative separator on the sidebar edge.
       The only orange vertical element here is the native/custom scrollbar. */
    .cdcm-hub--homepage-inline.is-branch-open .cdcm-hub__sidebar {
        border-right: 0 !important;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__sidebar-title {
        display: none;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-item {
        padding: 0 8px;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-button {
        min-height: 50px;
        padding: 10px 12px;
        border-radius: 12px;
        gap: 10px;
        text-transform: none !important;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-icon img {
        width: 20px;
        height: 20px;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-icon svg {
        width: 16px;
        height: 16px;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-name {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: none !important;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-arrow {
        font-size: 18px;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__root-item.is-active .cdcm-hub__root-button,
    .cdcm-hub--homepage-inline .cdcm-hub__root-button:hover,
    .cdcm-hub--homepage-inline .cdcm-hub__root-button:focus-visible {
        background: #fff4ec;
        color: var(--cdcm-text);
    }

    /* The flyout now lives INSIDE the expanded white panel shell. Because
       the shell paints one continuous background, Swiper can no longer peek
       through rounded corners or fractional-pixel edges. */
    .cdcm-hub--homepage-inline .cdcm-hub__content,
    .cdcm-hub--homepage-inline.cdcm-hub--fullscreen .cdcm-hub__content {
        position: absolute;
        z-index: 2 !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: var(--cdcm-inline-width);
        width: auto;
        min-width: 0;
        max-width: none;
        min-height: 0;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 28px 34px 30px;
        overflow: auto;
        overscroll-behavior: contain;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-8px);
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    }

    .cdcm-hub--homepage-inline.is-branch-open .cdcm-hub__content {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    /* Slider arrows / captions must always remain underneath the flyout. */
    .teddymall-hero-slider .swiper,
    .teddymall-hero-slider .swiper-wrapper,
    .teddymall-hero-slider .swiper-slide,
    .teddymall-hero-slider .elementor-swiper-button,
    .teddymall-hero-slider .swiper-button-prev,
    .teddymall-hero-slider .swiper-button-next,
    .teddymall-hero-slider .swiper-pagination {
        z-index: 1 !important;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__branch-head {
        margin-bottom: 18px;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__branch-title {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__groups {
        grid-template-columns: repeat(3, minmax(180px, 220px));
        gap: 24px 42px;
        align-content: start;
        justify-content: start;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__group-title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 10px;
        color: #131921;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__group-link {
        font-size: 14px;
        line-height: 1.45;
        font-weight: 400;
        color: #4b5563;
        padding: 5px 0;
    }

    .cdcm-hub--homepage-inline .cdcm-hub__group-link:hover,
    .cdcm-hub--homepage-inline .cdcm-hub__group-link:focus-visible {
        color: var(--cdcm-accent);
    }

    .cdcm-hub--homepage-inline .cdcm-hub__mobile-head,
    .cdcm-hub--homepage-inline .cdcm-mobile-nav {
        display: none !important;
    }
}


/* ==========================================================
   v1.6.7 — TeddyMall unified homepage mega menu
   - Header shortcode with hide_on_front_page="1" is hidden only on
     homepage desktop; its mobile/tablet trigger remains available.
   - Homepage hero layout no longer needs external Custom CSS.
   - Elementor controls the gap between category column and slider.
   ========================================================== */
@media (min-width: 1025px) {
    body.home .cdcm-hub--front-desktop-hidden,
    body.front-page .cdcm-hub--front-desktop-hidden {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .teddymall-hero-row {
        display: block !important;
        width: 100% !important;
    }

    .teddymall-cat-sidebar,
    .teddymall-hero-slider {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .teddymall-cat-sidebar {
        flex: 0 0 100% !important;
    }

    .teddymall-hero-slider {
        min-width: 0 !important;
    }

    /* Explicitly keep the global header trigger available on homepage mobile. */
    body.home .cdcm-hub--front-desktop-hidden,
    body.front-page .cdcm-hub--front-desktop-hidden {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}