/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ── Reorder header rows (info bar moves below main header) ──────────────── */
@media (min-width: 1025px) {
    .whb-main-header {
        display: flex;
        flex-direction: column;
    }
    .whb-row.whb-general-header { order: 1; }
    .whb-row.whb-header-bottom  { order: 2; }
    .whb-row.whb-top-bar        { order: 3; }
}

/* ── True-center the shipping badge on the top bar ───────────────────────── */
@media (min-width: 1025px) {
    .whb-top-bar .whb-flex-row {
        position: relative;
    }
    .whb-topbar_shipping_badge {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .whb-topbar_shipping_badge a {
        pointer-events: auto;
    }
}

/* ── Top-bar nav links ───────────────────────────────────────────────────── */
.whb-top-bar .wd-header-nav .wd-nav > li > a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* ── Footer: remove gap between section title and links ─────────────────── */
.elementor-element-a87b582 .wd-el-toggle-head,
.elementor-element-d64f331 .wd-el-toggle-head {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.elementor-element-a1d6381,
.elementor-element-1f37937 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── Footer toggle: remove 20px gap between title and links ─────────────── */
.elementor-element-a87b582 .wd-el-toggle-content,
.elementor-element-d64f331 .wd-el-toggle-content {
    margin-top: 8px !important;
}

/* ── About Us: Google logo transparent-pixel fix ─────────────────────────── */
.elementor-element-971cbbd img {
    background-color: #F4F4F4;
    border-radius: 4px;
    padding: 4px 6px;
}

/* ── Homepage section background alternation ────────────────────────────── */

/* Bestsellers + Popular in Gaming: full-width grey sections */
.elementor-935 .elementor-element.elementor-element-663c740,
.elementor-935 .elementor-element.elementor-element-88658c8 {
    position: relative !important;
    min-width: calc(100vw - var(--wd-scroll-w) - var(--wd-sticky-nav-w)) !important;
    width: calc(100vw - var(--wd-scroll-w) - var(--wd-sticky-nav-w)) !important;
    left: calc(50% - 50vw + var(--wd-scroll-w) / 2 + var(--wd-sticky-nav-w) / 2) !important;
    --container-max-width: min(calc(var(--wd-container-w) - 30px));
    --padding-left: 15px;
    --padding-right: 15px;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    margin-bottom: 0 !important;
}
.elementor-935 .elementor-element.elementor-element-663c740:not(.elementor-motion-effects-element-type-background),
.elementor-935 .elementor-element.elementor-element-663c740 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-935 .elementor-element.elementor-element-88658c8:not(.elementor-motion-effects-element-type-background),
.elementor-935 .elementor-element.elementor-element-88658c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #F4F4F4;
}

/* Useful Articles: override grey to white */
.elementor-935 .elementor-element.elementor-element-27a3418:not(.elementor-motion-effects-element-type-background),
.elementor-935 .elementor-element.elementor-element-27a3418 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #ffffff !important;
}

/* Remove blank space between Useful Articles and footer */
.elementor-935 .elementor-element.elementor-element-27a3418 {
    margin-bottom: 0 !important;
}

/* ── Product card white background inside grey sections ─────────────────── */
.elementor-935 .elementor-element.elementor-element-663c740 .wd-product-wrapper,
.elementor-935 .elementor-element.elementor-element-88658c8 .wd-product-wrapper {
    background-color: #ffffff !important;
}

/* ── Mobile burger menu "Categories" tab: outline a subcategory together with
   its own expanded sub-subcategories, so that group reads as distinct from
   sibling subcategories above/below it. Desktop mega menu is untouched. ── */
@media (max-width: 1024px) {
    .mobile-categories-menu.wd-nav-mobile .sub-sub-menu {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 6px;
        margin: 4px 10px;
        overflow: hidden;
    }
}

/* ── Desktop "Categories" dropdown subcategory image grid: cards were too
   big (large square photos, only 4 per row). Pack more, smaller columns
   and cap the image height so the panel reads as a compact grid. ── */
@media (min-width: 1025px) {
    .wd-dropdown-menu.wd-design-sized .container.wd-entry-content {
        display: flex !important;
        align-items: stretch !important;
        gap: 20px;
    }

    .wd-dropdown-menu.wd-design-sized .container.wd-entry-content > .woocommerce {
        flex: 1 1 66%;
        min-width: 0;
        max-height: 460px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 8px;
    }

    .wd-dropdown-menu.wd-design-sized .wd-cat-ad-slot {
        flex: 0 0 30%;
        border: 2px dashed #cccccc;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999999;
        font-size: 13px;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .wd-dropdown-menu.wd-design-sized .wd-products {
        --wd-col-lg: 4 !important;
        --wd-gap-lg: 12px !important;
    }

    .wd-dropdown-menu.wd-design-sized .wd-cat-thumb {
        aspect-ratio: 1 / 1;
    }

    .wd-dropdown-menu.wd-design-sized .wd-cat-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
    }

    .wd-dropdown-menu.wd-design-sized .wd-entities-title {
        font-size: 12px;
    }

    .wd-dropdown-menu.wd-design-sized .wd-cat-count {
        display: none;
    }

    .wd-dropdown-menu.wd-design-sized .wd-col.category-grid-item {
        height: auto !important;
        align-self: start !important;
    }

    .wd-dropdown-menu.wd-design-sized .wd-cat-inner {
        overflow: visible !important;
        height: auto !important;
    }

    .wd-dropdown-menu.wd-design-sized .wd-cat-content.hover-mask {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        padding: 8px 4px !important;
        text-align: center !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .wd-dropdown-menu.wd-design-sized .wd-entities-title {
        position: static !important;
        inset-inline-start: auto !important;
        bottom: auto !important;
        color: #222 !important;
        -webkit-text-fill-color: #222 !important;
        margin: 0 !important;
        font-size: 12px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}