/* Cofactor - small site tweaks (VoniosGuru). Loaded in <head> on every page. */

@media (max-width: 767.98px) {
	/* Promo banners: the picture at its own height (no white strip under it),
	   text, when there is any, below it */
	.promo-banner .carousel-item {
		height: auto !important;
		min-height: 0 !important;
	}

	/* More specific than the theme's mobile "height: 300px !important" */
	.promo-banner .carousel-item .slide-wrapper .slide-image {
		height: auto !important;
		flex: none !important;
	}

	.promo-banner .carousel-item .slide-wrapper .slide-image img {
		height: auto !important;
	}

	.promo-banner .carousel-item:not(:has(.content-body-row, .promo-btn, h2:not(:empty))) .slide-content {
		display: none !important;
	}

	/* Home categories: one row to swipe, so products show on the first screen */
	#top-banner .container.my-4 {
		margin-top: 14px !important;
		margin-bottom: 6px !important;
	}

	#top-banner .container.my-4 > .row {
		flex-wrap: nowrap;
		justify-content: flex-start !important;
		overflow-x: auto;
		margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
		padding: 0 8px 6px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#top-banner .container.my-4 > .row::-webkit-scrollbar {
		display: none;
	}

	/* About 4 and a half visible: the cut one shows there is more */
	#top-banner .container.my-4 > .row > * {
		flex: 0 0 22%;
		width: 22%;
		max-width: none;
		margin-top: 0;
		padding: 0 4px;
		scroll-snap-align: start;
	}

	#top-banner .category-icon-box {
		aspect-ratio: auto;
		height: 52px;
		margin-bottom: 4px;
		border-radius: 12px;
		background: #f3f6fb;
	}

	#top-banner .category-icon-box svg {
		width: 30px;
		height: 30px;
	}

	#top-banner .category-icon-box img {
		max-width: 30px;
		max-height: 30px;
	}

	#top-banner .category-name {
		font-size: 10px;
		line-height: 1.15;
	}

	/* Benefits: compact 2 x 2 */
	#top-banner .container.my-5 {
		margin-top: 6px !important;
		margin-bottom: 14px !important;
	}

	#top-banner .container.my-5 > .row {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		--bs-gutter-x: 8px;
		--bs-gutter-y: 8px;
	}

	#top-banner .container.my-5 > .row > * {
		flex: 0 0 50%;
		width: 50%;
	}

	#top-banner .benefit-card {
		min-height: 0;
	}

	#top-banner .benefit-card .icon-box {
		width: 34px;
		flex: 0 0 34px;
	}

	#top-banner .benefit-card .icon-box i {
		font-size: 16px !important;
		padding: 0 !important;
	}

	#top-banner .benefit-card .content-box {
		margin: 7px 8px !important;
		display: flex;
		align-items: center;
	}

	#top-banner .benefit-card h3 {
		font-size: 12px;
		line-height: 1.2;
		margin: 0 !important;
	}

	#top-banner .benefit-card p {
		display: none;
	}
}

/* Product page: buy box styled like the checkout (all screen sizes) */
.cf-buy { --cf-blue: #234D9C; --cf-text: #1d2433; --cf-muted: #6b7280; --cf-line: #e5e7eb;
	margin: 0 0 20px; padding: 18px; border: 1px solid #c9d1de; border-top: 4px solid var(--cf-blue); border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .07); color: var(--cf-text); }
.cf-buy .product-info-grid { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; text-align: left; gap: 6px; margin: 0 0 10px; font-size: 14px; color: var(--cf-muted); }
.cf-buy .product-info-grid dt, .cf-buy .product-info-grid dd { margin: 0; font-weight: 400; }
.cf-buy .product-info-grid dt.model-label { order: 1; font-weight: 600; }
.cf-buy .product-info-grid dd.model { order: 2; flex: 1 1 auto; min-width: 0; }
.cf-buy .product-info-grid dd.brand { order: 3; flex: 0 0 auto; width: auto; height: auto; margin-left: auto; }
.cf-buy .product-info-grid dd.brand img { display: block; width: auto; height: 40px; max-width: 90px; object-fit: contain; }
.cf-buy > ul.list-unstyled { margin: 0 0 4px; }
.cf-buy .price-old { font-size: 16px; color: var(--cf-muted); }
.cf-buy > ul.list-unstyled h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; }
.cf-buy .price-new { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--cf-blue); }
.cf-buy #product-actions { display: block !important; }
.cf-buy #product { width: 100%; }
.cf-buy #form-product h3 { margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--cf-line); font-size: 16px; font-weight: 700; }
.cf-buy #form-product .form-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.cf-buy #form-product .form-select, .cf-buy #form-product .form-control { min-height: 48px; border: 1px solid #c9d1de; border-radius: 8px; font-size: 15px; }
.cf-buy #form-product .form-select:focus, .cf-buy #form-product .form-control:focus { border-color: var(--cf-blue); box-shadow: 0 0 0 3px rgba(35, 77, 156, .15); }
.cf-buy #form-product .my-3.d-flex { align-items: stretch; gap: 8px !important; margin: 16px 0 0 !important; }
.cf-buy #form-product .my-3.d-flex > .d-flex { flex: 1 1 auto; gap: 8px; min-width: 0; }
.cf-buy #form-product .btn-group .btn { width: 52px; height: 52px; padding: 0; border: 1px solid #c9d1de; border-radius: 8px !important; color: var(--cf-muted); background: #fff; }
.cf-buy #form-product .btn-group .btn:hover { color: #d61f26; border-color: #d61f26; }
.cf-buy #form-product .input-group { flex-wrap: nowrap; }
.cf-buy #form-product .input-group .btn { width: 38px; padding: 0; border: 1px solid #c9d1de; background: #fff; color: var(--cf-text); font-size: 18px; }
.cf-buy #form-product .input-group .btn:first-child { border-radius: 8px 0 0 8px; }
.cf-buy #form-product .input-group .btn:last-child { border-radius: 0 8px 8px 0; }
.cf-buy #form-product #input-quantity { width: 44px; min-height: 52px; border-radius: 0; border-left: 0; border-right: 0; padding: 0; }
.cf-buy #button-cart { flex: 1 1 auto; min-height: 52px; border: 0; border-radius: 8px; background: var(--cf-blue); color: #fff; font-size: 17px; font-weight: 700; text-transform: none; white-space: nowrap; }
.cf-buy #button-cart:hover, .cf-buy #button-cart:focus { background: #1a3b7a; }
.cf-buy .cf-pinfo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cf-line); }

/* Product page description: card like the checkout sections */
#product-info .nav-tabs { border: 0; margin: 0; }
#product-info .nav-tabs .nav-link { border: 0; padding: 0 0 10px; color: var(--bs-body-color); font-size: 18px; font-weight: 700; background: none; }
#product-info .tab-content { padding: 16px 18px; border: 1px solid #c9d1de; border-top: 4px solid #234D9C; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .07); }
#product-info .tab-content .tab-pane { margin-bottom: 0 !important; }

/* Tags: wrap instead of running off the screen */
#product-info .product-tags dd.tags-list { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; overflow: visible; }
#product-info .product-tags dd.tags-list a { max-width: 100%; white-space: normal; text-align: left; }

/* Product cards (lists, related products): rounded cards */
.product-thumb { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }

@media (max-width: 767.98px) {
	/* Phone / address / hours bar above the logo: not on phones */
	nav#top { display: none !important; }

	/* Product page */
	body.cf-product .breadcrumb { display: none; }
	#product-info .cf-title-top { padding: 0 12px !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.3; text-transform: none !important; margin-bottom: 12px; }
	#product-info .product-images .img-thumbnail { border: 1px solid #e5e7eb; border-radius: 12px; padding: 0; }
	.cf-buy { padding: 16px 14px; }
	.cf-buy .price-new { font-size: 30px; }

	/* Related products: 2 per row like the other lists */
	#product-info .row.row-cols-1 > .col { flex: 0 0 50%; width: 50%; max-width: 50%; }
	#product-info .row.row-cols-1 > .col .image { height: auto; }
	.product-thumb .description { padding: 8px !important; }
	.product-thumb .description h4, .product-thumb .description a { font-size: 13px; line-height: 1.3; }
}