/*
 * BVM responsive fixes.
 * Loaded after the theme's layout/header/responsive CSS (see so_theme common/header.twig), so these win on order.
 * The SO theme's responsive rules were written for Bootstrap 3 floats; the OC4 build runs Bootstrap 5 (flexbox),
 * and the layout-1 demo hides most homepage banners on phones.
 *
 * Breakpoints match the theme: phone < 576, large phone 576-767, tablet 768-991, small desktop 992-1199,
 * desktop 1200+, large 1650+.
 */

/* ---------- Images never overflow their column ---------- */
#content img,
.so-page-builder img,
.banners img,
.refine-search img {
	max-width: 100%;
	height: auto;
}

/* ---------- Header ---------- */

/* Top bar: the right-hand column is empty, so let the welcome text and login links share one line */
@media (min-width: 768px) {
	header.typeheader-3 .header-top .header-top-left {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	header.typeheader-3 .header-top .welcome-msg,
	header.typeheader-3 .header-top .signin-w {
		display: inline-block;
	}
}

/* The logo image is 1600x495; cap its height instead of letting it fill the column */
header.typeheader-3 .navbar-logo .logo img {
	width: auto;
	max-height: 64px;
}

/* Small desktop: logo column was only 2/12 wide, which made the logo tiny */
@media (min-width: 992px) and (max-width: 1199px) {
	header.typeheader-3 .header-middle .navbar-logo { flex: 0 0 25%; max-width: 25%; }
	header.typeheader-3 .header-middle .middle2 { flex: 0 0 50%; max-width: 50%; padding-right: 15px; }
	header.typeheader-3 .header-middle .middle3 { flex: 0 0 25%; max-width: 25%; }
}

/*
 * Phone + tablet: the theme hid the search box behind an icon positioned with Bootstrap 3 offsets, which lands
 * under the menu bar in Bootstrap 5. Show a full-width search bar under the logo instead.
 */
@media (max-width: 991px) {
	header.typeheader-3 .header-middle { padding: 12px 0; }
	header.typeheader-3 .navbar-logo .logo img { max-height: 72px; }

	header.typeheader-3 .header-middle .middle2 {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		flex: 0 0 100%;
		max-width: 100%;
		padding: 12px 15px 0;
	}
	header.typeheader-3 .header-middle .middle3 { display: none; }

	header.typeheader-3 .search-header-w {
		float: none;
		margin: 0;
	}
	header.typeheader-3 .search-header-w .icon-search { display: none !important; }
	header.typeheader-3 .search-header-w #sosearchpro .search {
		display: flex !important;
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
	}
	header.typeheader-3 .search-header-w #sosearchpro .search input {
		width: 100%;
		height: 40px;
		line-height: 40px;
		border: none;
	}
	header.typeheader-3 .search-header-w #sosearchpro .search .input-group-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		height: 40px;
		line-height: 40px;
	}
	header.typeheader-3 .search-header-w #sosearchpro .search button {
		position: static;
		height: 40px;
		line-height: 40px;
		padding: 0 16px;
		border-radius: 0;
		background-color: #428aca;
	}
	header.typeheader-3 .search-header-w #sosearchpro .search button i { color: #fff; }
}

@media (max-width: 575px) {
	header.typeheader-3 .navbar-logo .logo img { max-height: 60px; }
}

/* ---------- Mega menu ---------- */

/* Drop-downs have an inline width of 1000px; keep them inside the screen on small desktops */
@media (min-width: 992px) {
	.container-megamenu.horizontal ul.megamenu > li > .sub-menu { max-width: calc(100vw - 30px); }
}

/* Off-canvas menu on phone/tablet: full width panels, brand logos in a grid instead of one per row */
@media (max-width: 991px) {
	.container-megamenu.horizontal ul.megamenu > li > .sub-menu { width: 100% !important; }
	.megamenu .html.forbrands .row > div {
		flex: 0 0 33.333%;
		max-width: 33.333%;
		padding: 6px;
	}
	.megamenu .html.forbrands img { margin: 0 auto; }
}
@media (max-width: 575px) {
	.megamenu .html.forbrands .row > div {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ---------- Homepage (layout 1) ---------- */

/* Phone: show the main content (slider, banners, products) before the sidebar */
@media (max-width: 767px) {
	.common-home .content-main-w > .main-right { order: -1; }
	.common-home .content-main-w > .main-left { margin-top: 30px; }
}

/* Slider and Filters/Parts banners: full width rows below desktop (theme used 70%/30% and hid them on phones) */
@media (max-width: 991px) {
	.layout-1 .main-right .col2,
	.layout-1 .main-right .col3 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	.layout-1 .main-right .sohomepage-slider,
	.layout-1 .main-right .banners1 { display: block; }

	.layout-1 .main-right .banners1 {
		display: flex;
		gap: 12px;
		margin: 12px 0 0 !important;
	}
	.layout-1 .main-right .banners1 .b-img,
	.layout-1 .main-right .banners1 .b-img2 {
		flex: 1 1 0;
		width: auto;
		float: none;
		margin: 0;
		padding: 0;
	}
}

/* Sidebar promo banner (10% off) was hidden on phones; show it, but not stretched across the screen */
@media (max-width: 767px) {
	.layout-1 .main-left .banners2 {
		display: block;
		max-width: 360px;
		margin: 0 auto;
	}
}

/*
 * Boots / Clothing / Helmets / Kids + TRS dealers block. Desktop: 3 / 6 / 3 columns.
 * Below desktop the theme squeezed the side banners to 25% (and hid them on phones); instead put the TRS banner
 * on top at full width and the four category banners in a 2x2 grid underneath.
 */
@media (max-width: 991px) {
	.layout-1 .banners7 .row { row-gap: 12px; }
	.layout-1 .banners7 .banner2 {
		order: -1;
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	.layout-1 .banners7 .banner1,
	.layout-1 .banners7 .banner3 {
		display: block;
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
	}
	.layout-1 .banners7 .banner2 img { width: 100%; }
	.layout-1 .banners7 .b1 { margin-bottom: 12px; }
}

/*
 * "New items" block: one large product (43%) plus 19% tiles on desktop. Below 1200px the large product went full
 * width with a huge image, so give all products the same tile size: 3 per row, 2 per row on phones.
 */
@media (max-width: 1199px) {
	body.layout-1 .module.listingtab1-custom .so-listing-tabs .ltabs-items-container .ltabs-items .ltabs-items-inner .ltabs-item .item-inner,
	body.layout-1 .module.listingtab1-custom .so-listing-tabs .ltabs-items-container .ltabs-items .ltabs-items-inner .ltabs-item .item-inner.first-item {
		width: 33.333%;
		padding: 0 8px;
		margin-bottom: 16px;
	}
}
@media (max-width: 767px) {
	body.layout-1 .module.listingtab1-custom .so-listing-tabs .ltabs-items-container .ltabs-items .ltabs-items-inner .ltabs-item .item-inner,
	body.layout-1 .module.listingtab1-custom .so-listing-tabs .ltabs-items-container .ltabs-items .ltabs-items-inner .ltabs-item .item-inner.first-item {
		width: 50%;
		padding: 0 6px;
	}
	body.layout-1 .module.listingtab1-custom .so-listing-tabs .ltabs-items-container .ltabs-items .ltabs-items-inner .ltabs-item .item-inner:nth-child(odd) { clear: left; }
}

/* ---------- Product grids ---------- */

/*
 * Category / search / brand listings: two products per row on phones instead of one huge card.
 * Direct children of the listing row only - carousel items (homepage modules) size themselves.
 */
@media (max-width: 575px) {
	.products-list.row > .product-layout.product-grid {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
		padding-left: 6px;
		padding-right: 6px;
	}
	.products-list.row > .product-layout.product-grid h4 { font-size: 13px; }
}

/* Category sub-category tiles: even grid instead of floats of different heights */
.refine-search__content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
	padding: 0;
}
.refine-search__content::after { display: none; }
.refine-search__content .refine-search__subitem,
.refine-search__content .refine-loadmore {
	width: auto;
	float: none;
	margin: 0;
}
@media (max-width: 575px) {
	.refine-search__content { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Chat widget ---------- */

/* Fixed 300px bar covered most of the bottom of a phone screen */
@media (max-width: 575px) {
	.so-fb-message.right-bottom { width: auto !important; right: 10px; }
	.so-fb-message .offline_heading { width: auto !important; padding: 0 14px; }
}