/*
 * Responsive fixes for third-party UI that ships without its own mobile
 * breakpoints. Kept separate from style.css so each fix is easy to trace
 * back to what it targets and remove independently if the vendor ever
 * fixes it upstream.
 */
.cky-btn.cky-btn-accept {
background-color: #ff4d00 !important;
border-color: #ff4d00 !important;
font-family: Lato, sans-serif !important;
text-transform: uppercase;
font-weight: 700;
}
.cky-btn.cky-btn-reject {
	border-color: #ff4d00 !important;
	color : #ff4d00 !important;
		font-family: Lato, sans-serif !important;
text-transform: uppercase;
font-weight: 700;
}
.cky-btn.cky-btn-preferences,
.cky-btn.cky-btn-customize {
border-color: #ff4d00 !important;
color: #ff4d00 !important;
	font-family: Lato, sans-serif !important;
text-transform: uppercase;
font-weight: 700;
}
.cky-category-direct-item {
align-items: center !important;
}
.cky-category-direct-switch input[type="checkbox"] {
	background-color: #ff4d00 !important;
}
/* CookieYes cookie preference ("Customize") modal — its own script renders
 * this at a fixed ~840px width regardless of viewport, forcing horizontal
 * scroll on any phone or small tablet. Measured via real browser audit at
 * 375px/390px/768px: cky-preference-center stayed 845px wide at all three.
 */
@media only screen and (max-width: 47.999em) {
	.cky-consent-container,
	.cky-modal,
	.cky-preference-center,
	.cky-preference-header,
	.cky-preference-body-wrapper,
	.cky-preference-content-wrapper,
	.cky-accordion-wrapper,
	.cky-accordion,
	.cky-accordion-item,
	.cky-accordion-header-wrapper,
	.cky-accordion-header,
	.cky-accordion-header-des {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.cky-preference-center {
		max-height: 90vh !important;
		overflow-y: auto !important;
	}
}

/* "CD8 Home Features" hero section — a custom snippet with its own inline
 * <style> block, built for a wide desktop layout (8 boxes positioned
 * absolutely around a central image). Its own breakpoints already stack
 * everything and set position:static below 1100px, but the outer
 * container keeps a flat 80px top/bottom margin at every screen size —
 * never adjusted for mobile. !important is needed here because this rule
 * has to win against an inline <style> block that appears later in the
 * page source than this stylesheet, so normal cascade order alone
 * wouldn't be enough at equal specificity.
 */
@media only screen and (max-width: 47.999em) {
	.hero-container {
		margin-top: 30px !important;
		margin-bottom: 30px !important;
	}

	.hero-text-box {
		margin: 12px 0 !important;
	}
}

/* "Designed for People Like You" mobile accordion — comfortable tap
 * target and breathing room between stacked category cards.
 */
@media only screen and (max-width: 47.999em) {
	.accordion-item {
		margin-bottom: 8px;
	}

	.accordion-title {
		padding-top: 12px;
		padding-bottom: 12px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	
	.text {
		padding: 20px 20px 0 20px;
	}

	img#hero-mainImage {
		margin-bottom: 20px;        
		width: 100%;
        padding: 0 20px;
	}

	.col-inner .banner {
		padding-top: 240px !important;
	}
	.product-info {
    padding-top: 20px;
}
.product-info .price {
    font-size: 1.2em;

}
.text-box.banner-layer {
    width: 100% !important;
}
.text-box.banner-layer h2 {
    font-size: 24px;
    font-weight: 700;
}
}