/* =============================================================================
   WooCommerce — Custom Overrides
   @package WoodmartChildNew
   ============================================================================= */

/* Hide variation description below dropdowns */
.woocommerce-variation-description {
    display: none !important;
}

/* Force Buy Now button to display below Add to Basket */
form.cart {
    flex-wrap: wrap !important;
}

.wd-buy-now-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-left: 0 !important;
}

/* =============================================================================
   Category / Shop Archive — Breadcrumbs below the page title
   The .wd-title-wrapp is a flex row (back-btn + h1 inline).
   Wrap it so our injected breadcrumbs drop onto their own line.
   ============================================================================= */
.wd-page-title .wd-title-wrapp {
    flex-wrap: wrap;
    align-items: center;
}

/* Push the breadcrumb nav to occupy a full new row */
.wd-page-title .wd-title-wrapp .wd-breadcrumbs,
.wd-page-title .wd-title-wrapp nav.woocommerce-breadcrumb,
.wd-page-title .wd-title-wrapp .yoast-breadcrumb,
.wd-page-title .wd-title-wrapp .rank-math-breadcrumb,
.wd-page-title .wd-title-wrapp .aioseo-breadcrumbs {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
}

.tax-product_cat .wd-content-layout,
.post-type-archive-product .wd-content-layout {
    padding-top: 0px !important;
}


/* Ensure the back button icon renders visibly in the page title banner.
   The icon colour is controlled by --wd-action-icon-color (defaults to dark grey).
   Override to white so it's visible on the purple/dark page title background.
    NOTE: The ::before icon injection was REMOVED in WoodMart 8.5.0 — the theme now
   renders its own native arrow icon inside .wd-back-btn. Keeping ::before 
   Scoped to desktop only (≥1025px) — WoodMart hides .wd-back-btn on mobile/tablet
   intentionally and our higher-specificity selector was overriding that. */
@media (min-width: 1025px) {
    .wd-page-title .wd-back-btn {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        --wd-action-icon-color: #fff;
        --wd-action-icon-color-hover: rgba(255, 255, 255, 0.7);
    }

    .wd-page-title .wd-back-btn>a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


}

.woocommerce-Tabs-panel .woocommerce-product-attributes-item .wd-term img {
    display: none !important;
}

/* On mobile/tablet ensure the back button stays hidden (restores theme default),
   and fix mobile header overlapping the page title. */
@media (max-width: 1024px) {
    .wd-page-title .wd-back-btn {
        display: none !important;
    }

    /* Prevent mobile header overlapping the page title purple banner.
       The Elementor page title container (.elementor-element-3c20913) has a negative margin-top
       of -40px on mobile by default, which pulls it under the static mobile header and cuts off the title. */
    .elementor-element.elementor-element-3c20913 {
        margin-top: 0px !important;
        --margin-top: 0px !important;
    }
}