/* ===========================================================================
   Nanba — Product-category grid, styled to the reference "Accessories &
   Accoutrements" layout: 5 columns of circular gray thumbnails, bold title,
   green tagline, and a green category-title bar. Applies to WooCommerce
   product-category / shop pages (loaded only there).
   =========================================================================== */


/* The Woodmart header uses "over content" mode on these pages, overlapping
   the top of the content. Push the whole content wrapper (banner + section)
   down so it clears the header nav. */

.tax-product_cat .wd-page-content,
.post-type-archive-product .wd-page-content,
.woocommerce-shop .wd-page-content {
    padding-top: 102px;
}


/* The header background is transparent (#00000066) on these pages via the
   Customizer Additional CSS. Make it solid black for product-category /
   shop pages by raising specificity with the body class. */

.tax-product_cat .whb-color-light:not(.whb-with-bg),
.post-type-archive-product .whb-color-light:not(.whb-with-bg),
.woocommerce-shop .whb-color-light:not(.whb-with-bg) {
    background-color: #000000 !important;
}


/* ---- Top banner (full-width, above the whole category section) ---- */


/* The banner is relocated (via JS) to sit BEFORE .wd-content-layout so it
   spans the full content width above the sidebar + grid without disturbing
   Woodmart's flex row. */

.nanba-cat-banner {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    line-height: 0;
    overflow: hidden;
    border-radius: 2px;
}


/* Override the Customizer Additional CSS rule `#main-content{max-width:88%}`
   which loads later in the head. Use a body-class + id selector to raise
   specificity on product-category / shop pages only. */

.tax-product_cat #main-content,
.post-type-archive-product #main-content,
.woocommerce-shop #main-content {
    max-width: 100% !important;
    /* padding: 0 0.5% 0 5%; */
}

.nanba-cat-banner img {
    display: block;
    width: 100%;
    height: 260px;
    /* short wide strip like the reference */
    object-fit: cover;
    object-position: center 30%;
}

@media (max-width: 768px) {
    .nanba-cat-banner img {
        height: 150px;
    }
}


/* ---- Fix the content flex row: lock the "Browse Categories" column ----
   .wd-content-layout is a flex row [ categories | (sidebar) | content ].
   .wd-header-cats had no width, so its intrinsic content (and mega-dropdowns)
   let it grow to 700-1200px at wide/zoomed-out viewports, squashing the grid
   and breaking the layout. Lock it to a fixed 270px column and let the content
   area take the rest. Also add a small left safe-gap on the whole row. */

.tax-product_cat .wd-content-layout,
.post-type-archive-product .wd-content-layout,
.woocommerce-shop .wd-content-layout {
    align-items: flex-start;
    column-gap: 10px;
}

.tax-product_cat .wd-content-layout>.wd-header-cats,
.post-type-archive-product .wd-content-layout>.wd-header-cats,
.woocommerce-shop .wd-content-layout>.wd-header-cats {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: 270px !important;
    min-width: 0;
}

.tax-product_cat .wd-content-layout>.wd-content-area,
.post-type-archive-product .wd-content-layout>.wd-content-area,
.woocommerce-shop .wd-content-layout>.wd-content-area {
    flex: 1 1 auto !important;
    /* min-width: 0; */
    /* allow the grid to shrink instead of overflowing */
    max-width: 100%;
}


/* ---- Recolor the "Browse Categories" opener bar to the reference green ---- */

.tax-product_cat .wd-header-cats .menu-opener,
.post-type-archive-product .wd-header-cats .menu-opener,
.woocommerce-shop .wd-header-cats .menu-opener {
    background-color: #37b684 !important;
}


/* ---- Green category-title bar (injected above the grid) ---- */

.nanba-cat-titlebar {
    background: rgb(55 182 132 / 70%);
    /* reference green bar */
    color: #333;
    padding: 12px 20px;
    margin: 0 0 22px;
    border-radius: 2px;
}

.nanba-cat-titlebar span {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    /* color: #ffffff; */
}


/* Hide Woodmart's default full-width page-title bar on shop/category pages,
   since we render our own green strip inside the content column. */

.tax-product_cat .wd-page-title.page-title,
.post-type-archive-product .wd-page-title.page-title,
.woocommerce-shop .wd-page-title.page-title {
    display: none !important;
}


/* ===========================================================================
   Category grid — 5 columns
   =========================================================================== */

.wd-products.wd-grid-g,
ul.products.wd-grid-g {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px 14px !important;
}


/* Neutralise Woodmart's fixed column widths so the grid controls sizing. */

.wd-products .wd-col.category-grid-item,
ul.products .wd-col.category-grid-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    float: none !important;
}


/* ---- The tile ---- */

.category-grid-item.wd-cat {
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.category-grid-item.wd-cat .wd-cat-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
}


/* ---- Circular gray thumbnail ---- */

.category-grid-item .wd-cat-thumb,
.category-grid-item .category-image-wrapp {
    position: relative !important;
    width: 168px !important;
    height: 168px !important;
    max-width: 92%;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 45%, #f3f3f3 0%, #e4e4e4 70%, #dcdcdc 100%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.category-grid-item .wd-cat-image,
.category-grid-item a.category-image {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

.category-grid-item .wd-cat-thumb img {
    width: 80% !important;
    height: 80% !important;
    max-width: 80% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply;
    /* blends product photos onto the gray disc */
    background: transparent !important;
    border-radius: 0 !important;
    transition: transform .3s ease;
}

.category-grid-item:hover .wd-cat-thumb img {
    transform: scale(1.05);
}


/* ---- Content BELOW the image (override Woodmart's absolute overlay) ---- */

.category-grid-item .wd-cat-content,
.category-grid-item .wd-cat-content.hover-mask {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}


/* The overlaid link should not intercept the whole tile as a dark mask. */

.category-grid-item .wd-fill.category-link {
    background: transparent !important;
}

.category-grid-item .wd-entities-title {
    display: block;
    position: static !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    color: #2b2b2b !important;
    text-transform: none;
    margin: 2px 0 3px !important;
    line-height: 1.25;
    transform: none !important;
    opacity: 1 !important;
}

.category-grid-item .wd-entities-title a {
    color: #2b2b2b !important;
}


/* On hover the theme sets the tile title to WHITE, which vanishes against the
   white page background. An inline theme rule
   `.wd-col.category-grid-item.wd-cat:hover .wd-entities-title { color:white }`
   (3 classes) out-specifies a single-class selector, so match its specificity
   with the full class chain and force the reference green on hover instead. */

.wd-col.category-grid-item.wd-cat:hover .wd-entities-title,
.wd-col.category-grid-item.wd-cat:hover .wd-entities-title a,
html .product.wd-cat:hover .wd-entities-title,
html .product.wd-cat:hover .wd-entities-title a,
.category-grid-item:hover .wd-entities-title,
.category-grid-item:hover .wd-entities-title a,
.category-grid-item:focus-within .wd-entities-title {
    color: #37b684 !important;
}


/* Hide Woodmart's product-count label and the social-icons overlay. */

.category-grid-item .wd-products-element.count,
.category-grid-item mark.count,
.category-grid-item .count,
.category-grid-item .gallery-icons-cat,
.category-grid-item .social-icons-cat {
    display: none !important;
}


/* ---- Tagline (our injected line) ---- */

.nanba-cat-tagline {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #9a9a9a;
    line-height: 1.4;
    margin-top: 1px;
}


/* ===========================================================================
   Fix: sub-category flyout positioning
   The "Browse Categories" list is Woodmart's header category menu placed in
   the content column as a vertical sidebar (on category, shop AND single
   product pages). Its fly-out dropdowns are absolutely positioned (top:0)
   relative to the whole <ul>, so after scrolling they appear at the top of
   the list instead of next to the hovered item. Making each item the
   positioning context fixes it so the flyout opens beside its own row.
   Applies wherever the in-content vertical menu appears (the header version
   uses .wd-nav-horizontal, so this does not touch the top nav).
   =========================================================================== */

.wd-header-cats .wd-nav-vertical>li.menu-item-has-children {
    position: relative !important;
}

.wd-header-cats .wd-nav-vertical>li>.wd-dropdown-menu {
    top: 0 !important;
    max-height: 80vh;
    overflow-y: auto;
    max-width: max-content;
}

@media (min-width: 769px) {
    .elementor-35752 .elementor-element.elementor-element-e1266fa {
        /* --width: max-content !important; */
        --width: 100%;
    }
}

.elementor-35797 .elementor-element.elementor-element-84f4796 {
    --min-height: max-content !important;
    --width: 100%;
}


/* Flyout panel + text colour.
   The flyout links are set to light text. On single-product pages the theme
   paints the panel dark, so light text reads fine; but on product-category /
   shop pages (and at some viewport widths / zoom levels) the theme paints the
   panel WHITE, so the light text vanishes (white-on-white) until hovered.
   To make it deterministic on every page type and viewport, force the flyout
   panel itself to a dark background so the light text is always readable. */

.wd-header-cats .wd-dropdown-menu,
.wd-header-cats .wd-dropdown-menu .wd-sub-menu,
.wd-header-cats .wd-dropdown-menu .wd-nav-vertical,
.wd-header-cats .wd-dropdown-menu ul {
    background-color: #1d1d1d !important;
}

.wd-header-cats .wd-dropdown-menu a,
.wd-header-cats .wd-dropdown-menu .wd-nav-vertical a,
.wd-header-cats .wd-dropdown-menu li>a,
.wd-header-cats .wd-sub-menu a {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1 !important;
    /* text-wrap-mode: nowrap; */
}

.wd-header-cats .wd-dropdown-menu a:hover,
.wd-header-cats .wd-dropdown-menu a:focus {
    color: #37b684 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}


/* ===========================================================================
   Sidebar: "Our Certifications" widget
   =========================================================================== */

.nanba-certifications {
    margin-top: 0;
}


/* The block is re-homed by JS: inside .wd-header-cats on desktop, inside
   .wd-content-area on mobile. In both hosts it is a full-width, border-boxed
   block so it never overflows its column. */

.nanba-cert-relocate {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 24px 0 0;
    clear: both;
}


/* Desktop: sits under the category list in the 270px column. */

.wd-header-cats>.nanba-cert-relocate {
    padding-top: 6px;
}


/* Mobile: lives in the content area; centre the certificates and cap width. */

@media (max-width: 1024px) {
    .wd-content-area>.nanba-cert-relocate {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 34px;
    }
}

.nanba-cert-title {
    font-size: 15px;
    font-weight: 700;
    color: #2b2b2b;
    margin: 0 0 12px;
}

.nanba-cert-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nanba-cert-item {
    border: 1px solid #e3e3e3;
    background: #fff;
    padding: 6px;
}

.nanba-cert-img {
    display: block;
    width: 100%;
    height: auto;
}


/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1200px) {
    .wd-products.wd-grid-g,
    ul.products.wd-grid-g {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .wd-products.wd-grid-g,
    ul.products.wd-grid-g {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .category-grid-item .wd-cat-thumb,
    .category-grid-item .category-image-wrapp {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 600px) {
    .wd-products.wd-grid-g,
    ul.products.wd-grid-g {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .category-grid-item .wd-cat-thumb,
    .category-grid-item .category-image-wrapp {
        width: 120px;
        height: 120px;
    }
    .woocommerce-products-header .woocommerce-products-header__title {
        font-size: 16px;
    }
}