/**
 * NMB category branding -- black/grey/white brand palette
 * ===========================================================================
 * Scoped to the NMB category tree only, via body classes WordPress/
 * WooCommerce already emit and need no extra code to keep in sync:
 *   - term-nmb, term-nmb-tees, term-nmb-hoodies, ... (WordPress's own
 *     body_class() on a product-category archive -- picks up any future
 *     nmb-* sub-category automatically, matching how
 *     nmb_get_or_create_type_category() in functions.php creates them)
 *   - product_cat-nmb (WooCommerce's post_class() on a product that
 *     belongs to the NMB category -- covers that product's own single
 *     page)
 * Nothing outside NMB's pages is affected.
 *
 * Loaded after product-page-updates.css (see the wp_enqueue_style
 * dependency in functions.php), so this always wins the cascade over that
 * file's brand green/blue Add to Cart gradient on NMB pages specifically.
 */

/* Add to Cart -- same look as the site's brand green/blue button ... */
.product_cat-nmb .single_add_to_cart_button.button,
body[class*="term-nmb"] ul.products li.product .button,
body[class*="term-nmb"] .wc-block-components-product-button__button,
body[class*="term-nmb"] .wp-block-woocommerce-product-button a {
	background: linear-gradient(135deg, #0a0a0a 0%, #686868 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 50px !important;
	font-weight: 700 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product_cat-nmb .single_add_to_cart_button.button:hover,
body[class*="term-nmb"] ul.products li.product .button:hover,
body[class*="term-nmb"] .wc-block-components-product-button__button:hover,
body[class*="term-nmb"] .wp-block-woocommerce-product-button a:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
	color: #ffffff !important;
}

/* Category title -- bold, matches the brand weight used elsewhere, shifted
 * up close to the top of the white box now that the breadcrumb (below) is
 * hidden -- the 34px top margin approximates where the bottom of the old
 * "Home" breadcrumb line used to sit. */
body[class*="term-nmb"] .wp-block-query-title {
	font-weight: 700;
	margin-top: 34px !important;
}

/* Hide the "Home / NMB" breadcrumb nav on NMB category/product pages. */
body[class*="term-nmb"] .wp-block-woocommerce-breadcrumbs {
	display: none !important;
}

/* Move the "Showing X results" / sort-order row to appear AFTER the
 * banner (visually), while leaving it in its original place in the DOM
 * (right after the store notices, before the banner) for accessibility/
 * SEO/screen-reader flow. Scoped to the NMB archive's own <main> only --
 * main.wp-block-group is used sitewide, so this must not leak elsewhere.
 *
 * Direct children of <main> on this template, in DOM order:
 *   1. breadcrumbs (hidden, see above)   2. title   3. store notices
 *   4. results/sort row   5. category banner   6. Tees/Hoodies layout
 * Visually we want 4 and 5 swapped; order is assigned to every child so
 * default order:0 ties can't re-shuffle the untouched ones. The hidden
 * breadcrumb keeps its own order value but takes up no space since it's
 * display:none, so the title (order 2) naturally becomes the first
 * visible item.
 */
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained {
	display: flex;
	flex-direction: column;
}
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained > *:nth-child(1) { order: 1; }
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained > *:nth-child(2) { order: 2; }
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained > *:nth-child(3) { order: 3; }
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained > *:nth-child(4) { order: 5; }
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained > *:nth-child(5) { order: 4; }
body[class*="term-nmb"] main.wp-block-group.is-layout-constrained > *:nth-child(6) { order: 6; }

/* Tees/Hoodies side menu ... */
.lp-nmb-layout { display: flex; align-items: flex-start; gap: 2.5rem; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.lp-nmb-sidebar { flex: 0 0 200px; position: sticky; top: 2rem; }
.lp-nmb-sidebar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lp-nmb-sidebar nav a { display: block; padding: 0.65rem 1rem; border-radius: 8px; color: #3a3a3a; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.lp-nmb-sidebar nav a:hover { background: #f0f0f0; color: #0a0a0a; }
.lp-nmb-sidebar nav li.is-active a { background: linear-gradient(135deg, #0a0a0a 0%, #686868 100%); color: #ffffff; }
.lp-nmb-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 780px) {
	.lp-nmb-layout { flex-direction: column; gap: 1rem; }
	.lp-nmb-sidebar { flex: none; width: 100%; position: static; }
	.lp-nmb-sidebar nav ul { flex-direction: row; flex-wrap: wrap; }
}