/* Bricofix — responsive breakpoint overrides. */

/* ==================================================
   Mobile menu toggle (hidden on desktop by default)
   ================================================== */
.bricofix-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.bricofix-menu-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--color-secondary);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.bricofix-menu-toggle.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.bricofix-menu-toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.bricofix-menu-toggle.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==================================================
   Tablet (<= 1024px)
   ================================================== */
@media (max-width: 1024px) {
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Storefront's sidebar never stacks on its own (fixed 73.9%/21.7% floats
	   with no responsive breakpoint) — force it below the content instead of
	   squeezing both columns at tablet widths. */
	.content-area,
	.widget-area {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ==================================================
   Tablet / mobile (<= 768px)
   ================================================== */
@media (max-width: 768px) {
	.bricofix-contact-page {
		grid-template-columns: 1fr;
	}

	.bricofix-about-stats,
	.bricofix-about-values,
	.bricofix-account-perks {
		grid-template-columns: 1fr 1fr;
	}

	.bricofix-header-top .bricofix-usp span:nth-child(2) {
		display: none;
	}

	.bricofix-search {
		display: none;
	}

	.bricofix-menu-toggle {
		display: flex;
	}

	.bricofix-header-nav .col-full {
		position: relative;
	}

	.bricofix-mega-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bricofix-mega-menu #bricofix-primary-menu,
	.bricofix-mega-menu .bricofix-categories-dropdown {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.bricofix-mega-menu #bricofix-primary-menu.is-open,
	.bricofix-mega-menu.is-open .bricofix-categories-dropdown {
		display: flex;
	}

	.bricofix-categories-dropdown .sub-menu {
		position: static;
		box-shadow: none;
		display: flex;
		padding-left: 15px;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bricofix-categories-dropdown > li:hover .sub-menu,
	.bricofix-categories-dropdown > li:focus-within .sub-menu {
		display: flex;
	}

	.bricofix-homepage-hero {
		padding: 60px 20px;
	}

	.bricofix-homepage-hero h1 {
		font-size: 1.8em;
	}
}

/* ==================================================
   Mobile (<= 480px)
   ================================================== */
/* Storefront's built-in mobile handheld footer bar (account/search/cart icons) */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a {
	background-color: var(--color-secondary) !important;
	color: var(--color-text-inverse) !important;
}

.storefront-handheld-footer-bar ul li > a:hover,
.storefront-handheld-footer-bar ul li > a:focus {
	color: var(--color-primary) !important;
}

@media (max-width: 480px) {
	.category-grid {
		grid-template-columns: 1fr;
	}

	.bricofix-about-stats,
	.bricofix-about-values,
	.bricofix-account-perks {
		grid-template-columns: 1fr;
	}

	.bricofix-footer-main {
		grid-template-columns: 1fr;
	}

	.footer-widget:not(.brand-widget) {
		border-left: none;
		padding-left: 0;
	}

	.bricofix-header-top .bricofix-usp span {
		display: none;
	}

	.bricofix-header-top .bricofix-usp span:first-child {
		display: inline;
	}
}