/*
 * Phone and tablet header (below 1200px, where the main menu folds into a button). Loaded last so it
 * overrides the older layout rules. Both layouts get the same row:
 *
 *   [☰ Menu] [Shop]  [search ............]  [cart]     tablets
 *   [☰ Menu] [Shop]                         [cart]     phones: search gets its own full-width line
 *   [search .................................... ]
 *
 * The buttons say what they are ("Menu", "Shop"/"Store"), for shoppers who wouldn't think to tap an icon.
 * The store button is printed by hcac_shop_button() (inc/helpers.php); on the dark layout theme.js moves it
 * and the menu button into the search-and-cart row.
 */

.hcac-shop-btn,
.hcac-menu-label { display: none; }

@media (max-width: 1199px) {
	/* The two buttons */
	#masthead .hcac-shop-btn,
	#masthead button.navbar-toggler {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		position: static !important;
		inset: auto !important;
		flex: none !important;
		width: auto !important;
		height: 44px !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 14px !important;
		border-radius: 8px !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
		white-space: nowrap !important;
		text-decoration: none !important;
		text-transform: none !important;
		box-shadow: none !important;
		transform: none !important;
		cursor: pointer;
	}
	#masthead .hcac-menu-label { display: inline !important; }
	#masthead .hcac-shop-btn i { font-size: 16px; }
	#masthead button.navbar-toggler .navbar-toggler-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		height: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 18px !important;
		line-height: 1 !important;
		background-size: 100% 100% !important;
	}
	#masthead button.navbar-toggler:focus-visible,
	#masthead .hcac-shop-btn:focus-visible { outline: 3px solid rgba(0, 0, 0, .35) !important; outline-offset: 2px !important; }

	/* The cart keeps its own look; it only stops floating so it can't land on another button. */
	#masthead .cart-count {
		position: static !important;
		inset: auto !important;
		flex: none !important;
		order: 4 !important;
		margin: 0 0 0 auto !important;
		transform: none !important;
	}

	/* Light layout (Prowler): the row is the nav bar itself. */
	.hcac-layout-light #masthead nav.navbar {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		padding: 12px 0 !important;
	}
	.hcac-layout-light #masthead nav.navbar > .navbar-toggler { order: 1 !important; }
	.hcac-layout-light #masthead nav.navbar > .hcac-shop-btn { order: 2 !important; }
	.hcac-layout-light #masthead nav.navbar > .cstm-search-form {
		order: 3 !important;
		flex: 1 1 220px !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		position: static !important;
		transform: none !important;
	}
	.hcac-layout-light #masthead nav.navbar > #main-nav { order: 6 !important; flex: 1 1 100% !important; }
	.hcac-layout-light #masthead button.navbar-toggler {
		border: 0 !important;
		background: var(--hcac-accent, #300152) !important;
		color: #fff !important;
	}
	.hcac-layout-light #masthead button.navbar-toggler .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-width='2.6' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
	}
	.hcac-layout-light #masthead .hcac-shop-btn {
		border: 2px solid var(--hcac-accent, #300152) !important;
		background: #fff !important;
		color: var(--hcac-accent, #300152) !important;
	}
	.hcac-layout-light #masthead .hcac-shop-btn:hover { background: var(--hcac-accent, #300152) !important; color: #fff !important; }

	/* Dark layout (Viper): the row is the search-and-cart box, which the buttons join. */
	.hcac-layout-dark #masthead .hcac-nav-tools {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
	}
	.hcac-layout-dark #masthead .hcac-nav-tools > .navbar-toggler { order: 1 !important; }
	.hcac-layout-dark #masthead .hcac-nav-tools > .hcac-shop-btn { order: 2 !important; }
	.hcac-layout-dark #masthead .hcac-nav-tools > .cstm-search-form { order: 3 !important; flex: 1 1 220px !important; width: auto !important; max-width: none !important; margin: 0 !important; }
	.hcac-layout-dark #masthead .hcac-shop-btn {
		border: 2px solid #fff !important;
		background: transparent !important;
		color: #fff !important;
	}
	.hcac-layout-dark #masthead .hcac-shop-btn:hover { background: #fff !important; color: #000 !important; }
	/* The older rules paint every span inside the button red at a fixed size; the button itself is red now. */
	.hcac-layout-dark #masthead button.navbar-toggler { border: 0 !important; background: var(--hcac-accent, #e0201c) !important; color: #fff !important; }
	.hcac-layout-dark #masthead button.navbar-toggler span { background: none !important; border-radius: 0 !important; color: #fff !important; }
	.hcac-layout-dark #masthead button.navbar-toggler .hcac-menu-label { width: auto !important; height: auto !important; font-size: 15px !important; }
}

@media (max-width: 767px) {
	.hcac-layout-light #masthead nav.navbar > .cstm-search-form,
	.hcac-layout-dark #masthead .hcac-nav-tools > .cstm-search-form { order: 5 !important; flex: 1 1 100% !important; }
}