/**
 * Single Product Page
 *
 * Design tokens:
 *   Navy:   #1c3a8a   Green:  #3f9f44   Green-tab: #2abf64   Gold:  #f5a623
 *   Font:   Open Sans
 *
 * All selectors scoped under .apf-sp for theme override safety.
 */

/* ==========================================================================
   Custom Properties
   ========================================================================== */
.apf-sp .ast-container,
.apf-sp.ast-container,
.ast-container .apf-sp,
.ast-separate-container .apf-sp,
.ast-separate-container .ast-article-single .apf-sp,
#primary .apf-sp,
.site-content .apf-sp {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: #fff !important;
}

/* Override Astra's outer wrappers that add side padding */
body.single-product .site-content,
body.single-product .ast-container,
body.single-product #primary,
body.single-product .ast-primary-width,
body.single-product .content-area,
body.single-product .site-main,
body.single-product .site-main > article,
body.single-product .ast-article-single,
body.single-product .ast-article-post,
body.single-product .entry-content,
body.single-product .ast-separate-container .ast-article-single {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Remove Astra's separate container background/padding */
body.single-product .ast-separate-container .ast-article-single,
body.single-product .ast-separate-container .ast-article-post {
	background: transparent !important;
	padding: 0 !important;
}

body.single-product .ast-separate-container #primary {
	padding: 0 !important;
}

body.single-product #page > .site-content {
	padding: 0 !important;
}
.apf-sp {
	--navy:       #1c3a8a;
	--navy-dark:  #142d6e;
	--navy-10:    rgba(28, 58, 138, .08);
	--green:      #3f9f44;
	--green-dark: #348a38;
	--green-tab:  #2abf64;
	--green-10:   rgba(63, 159, 68, .1);
	--green-bg:   #eaf5eb;
	--gold:       #f5a623;
	--text:       #1e1e1e;
	--text-mid:   #343434;
	--text-muted: #8b8b8b;
	--border:     #d6d6d6;
	--bg:         #ffffff;
	--bg-light:   #f6f8f9;
	--bg-blue:    #e8f2fd;
	--radius:     20px;
	--radius-sm:  12px;
	--radius-xs:  6px;
	--shadow:     0 2px 12px rgba(0,0,0,.06);
	--shadow-lg:  0 8px 30px rgba(0,0,0,.09);
	--font:       'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ease:       cubic-bezier(.4, 0, .2, 1);
}

/* ---- Global reset inside .apf-sp ---- */

.apf-sp,
.apf-sp *,
.apf-sp *::before,
.apf-sp *::after {
	box-sizing: border-box;
}

.apf-sp {
	font-family: var(--font) !important;
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Reset theme margins/padding on common elements inside .apf-sp */
.apf-sp h1,
.apf-sp h2,
.apf-sp h3,
.apf-sp h4,
.apf-sp h5,
.apf-sp h6,
.apf-sp p,
/* .apf-sp ul, */
.apf-sp ol,
.apf-sp dl {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Container
   ========================================================================== */

.apf-sp .apf-sp-container {
	width: 100%;
	max-width: 1344px !important;
	margin: 0 auto;
	padding: 0 9px;
}

/* ==========================================================================
   Scroll Reveal
   ========================================================================== */

.apf-sp .apf-sp-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.apf-sp .apf-sp-reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   BREADCRUMB BAR
   ========================================================================== */

.apf-sp .apf-sp-breadcrumb-bar {
	background: var(--bg-light) !important;
	padding: .5rem 0;
}

.apf-sp .apf-sp-breadcrumb {
	font-size: .875rem;
	font-weight: 600;
	color: var(--text-muted) !important;
	margin: 0 !important;
	font-family: var(--font) !important;
}

.apf-sp .apf-sp-breadcrumb ol {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.apf-sp .apf-sp-breadcrumb li {
	display: inline;
	font-size: .875rem;
	font-weight: 600;
}

.apf-sp .apf-sp-breadcrumb a {
	color: var(--green) !important;
	text-decoration: none !important;
	transition: color .2s var(--ease);
}

.apf-sp .apf-sp-breadcrumb a:hover {
	color: var(--green) !important;
}

.apf-sp .apf-sp-breadcrumb li.apf-sp-sep {
	margin: 0 .5rem;
	color: var(--text-muted) !important;
	opacity: .5;
}

.apf-sp .apf-sp-crumb-current {
	color: var(--text-muted) !important;
	font-weight: 600;
}

/* ==========================================================================
   SECTION 1 — HERO
   ========================================================================== */

.apf-sp .apf-sp-hero {
	padding: 49px 0 40px;
	background: var(--bg);
}

/* ---- Hero Grid ---- */

.apf-sp .apf-sp-hero-grid {
	display: grid;
	grid-template-columns: 45fr 55fr;
	gap: 68px;
	align-items: start;
}

/* ---- Product Info column ---- */

.apf-sp .apf-sp-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	font-size: 38px;
	font-weight: 700;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.apf-sp .apf-sp-gallery {
	position: sticky;
	top: 1.5rem;
}

.apf-sp .apf-sp-gallery-main {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	border: none !important;
}

.apf-sp .apf-sp-viewport {
	position: relative;
	aspect-ratio: 1 / .76;
	overflow: hidden;
	height: 359px;
    width: 100%;
}

.apf-sp .apf-sp-slide {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: var(--radius) !important;
	opacity: 0;
	transition: opacity .35s var(--ease);
	pointer-events: none;
	margin: 0 !important;
	max-width: none !important;
}

.apf-sp .apf-sp-slide.active {
	opacity: 1;
	pointer-events: auto;
}

/* ---- Arrows ---- */

.apf-sp .apf-sp-arrow {
	position: absolute !important;
	top: 50% !important;
	z-index: 3;
	transform: translateY(-50%);
	width: 50px !important;
	height: 50px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--navy) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: background .2s var(--ease), transform .2s var(--ease);
	box-shadow: 0 2px 8px rgba(28,58,138,.25) !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	font-size: 0 !important;
	outline: none;
}

.apf-sp .apf-sp-arrow:hover,
.apf-sp .apf-sp-arrow:focus {
	background: var(--navy-dark) !important;
	color: #fff !important;
	transform: translateY(-50%) scale(1.06);
	border: none !important;
	outline: none;
}

.apf-sp .apf-sp-arrow:focus-visible {
	outline: 3px solid var(--gold) !important;
	outline-offset: 2px;
}

.apf-sp .apf-sp-arrow svg {
	width: 20px;
	height: 20px;
	stroke: #fff !important;
	fill: none !important;
	flex-shrink: 0;
}

.apf-sp .apf-sp-arrow-prev { left: 16px !important; right: auto !important; }
.apf-sp .apf-sp-arrow-next { right: 16px !important; left: auto !important; }

/* Hide arrows when single image */
.apf-sp .apf-sp-gallery[data-count="0"] .apf-sp-arrow,
.apf-sp .apf-sp-gallery[data-count="1"] .apf-sp-arrow {
	display: none !important;
}

/* ---- Thumbnails ---- */

.apf-sp .apf-sp-thumbs {
	display: flex;
	gap: .75rem;
	margin-top: 1rem;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.apf-sp .apf-sp-thumbs::-webkit-scrollbar { display: none; }

.apf-sp .apf-sp-thumb {
	flex: 0 0 calc(25% - 0.5625rem);
	aspect-ratio: 4 / 3;
	max-height: 109px;
	border: 2px solid transparent !important;
	border-radius: var(--radius) !important;
	overflow: hidden;
	cursor: pointer;
	background: var(--bg-light) !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: .35;
	transition: opacity .2s var(--ease), border-color .2s var(--ease);
	outline: none;
}

.apf-sp .apf-sp-thumb:hover {
	opacity: .7;
}

.apf-sp .apf-sp-thumb.active {
	opacity: 1;
	border-color: var(--green) !important;
}

.apf-sp .apf-sp-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* ---- Empty gallery placeholder ---- */

.apf-sp .apf-sp-gallery-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / .76;
	background: var(--bg-light);
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

/* ==========================================================================
   Product Info
   ========================================================================== */

.apf-sp .apf-sp-title {
	font-family: var(--font) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	line-height: 54px !important;
	color: var(--text) !important;
	margin: 0 0 1rem !important;
	letter-spacing: -1.5px;
	padding: 0 !important;
}

/* ---- Body content ---- */

.apf-sp .apf-sp-body {
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	color: var(--text-mid) !important;
	margin-top: .5rem;
	margin-bottom: 1.5rem;
}

.apf-sp .apf-sp-body p {
	margin: 0 0 1rem !important;
	color: var(--text-mid) !important;
}


.apf-sp .apf-sp-body p:last-child {
	margin-bottom: 0 !important;
}

.apf-sp .apf-sp-body a {
	color: var(--green) !important;
	text-decoration: underline;
	transition: color .2s var(--ease);
}

.apf-sp .apf-sp-body a:hover {
	color: var(--green-dark) !important;
}

/* ---- CTA Buttons ---- */

.apf-sp .apf-sp-cta {
	display: flex;
	gap: 1rem;
	margin-top: .75rem;
	margin-bottom: .5rem;
}

.apf-sp .apf-sp-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 224px;
	padding: 15px 64px !important;
	font-family: var(--font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border-radius: var(--radius) !important;
	border: 3px solid transparent !important;
	cursor: pointer;
	transition: all .22s var(--ease);
	white-space: nowrap;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.apf-sp .apf-sp-btn--green {
	background: var(--green) !important;
	color: #fff !important;
	border-color: var(--green) !important;
}

.apf-sp .apf-sp-btn--green:hover,
.apf-sp .apf-sp-btn--green:focus {
	background: var(--green-dark) !important;
	border-color: var(--green-dark) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(63,159,68,.3);
}

.apf-sp .apf-sp-btn--outline {
	background: transparent !important;
	color: var(--navy) !important;
	border-color: var(--navy) !important;
}

.apf-sp .apf-sp-btn--outline:hover,
.apf-sp .apf-sp-btn--outline:focus {
	background: var(--navy) !important;
	color: #fff !important;
	border-color: var(--navy) !important;
	box-shadow: 0 4px 14px rgba(28,58,138,.2);
}

/* ==========================================================================
   SECTION — TABS (full-width, own section)
   ========================================================================== */

.apf-sp .apf-sp-tabs-section {
	background: var(--bg-light) !important;
	padding: 0 0 2.5rem;
}

.apf-sp .apf-sp-tabs-nav {
	display: flex;
	justify-content: center;
	gap: 4rem;
	border-bottom: 1px solid var(--border) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.apf-sp .apf-sp-tabs-btn {
	position: relative;
	padding: 1.5rem 0 1.25rem !important;
	font-family: var(--font) !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: color .2s var(--ease);
	white-space: nowrap;
	text-align: center;
	margin: 0 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: -0.05em;
	outline: none;
	box-shadow: none !important;
	min-width: 0 !important;
}

.apf-sp .apf-sp-tabs-btn::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 9px;
	background: transparent;
	transition: background .2s var(--ease);
}

.apf-sp .apf-sp-tabs-btn:hover {
	color: var(--green-tab) !important;
	background: none !important;
}

.apf-sp .apf-sp-tabs-btn:focus-visible {
	outline: 3px solid var(--navy) !important;
	outline-offset: 2px;
}

.apf-sp .apf-sp-tabs-btn.active {
	color: var(--green-tab) !important;
}

.apf-sp .apf-sp-tabs-btn.active::after {
	background: var(--green-tab) !important;
}

.apf-sp .apf-sp-tabs-panel {
	padding: 2.5rem 150px;
	/* max-width: 979px; */
	font-size: 18px;
	line-height: 1.65;
	color: var(--text-mid) !important;
	display: none;
}

.apf-sp .apf-sp-tabs-panel.active {
	display: block;
}

/* ---- Headings inside tab panels ---- */
.apf-sp .apf-sp-tabs-panel h2 {
	font-family: var(--font) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	margin: 2rem 0 1rem !important;
	line-height: 1.4;
}

.apf-sp .apf-sp-tabs-panel h2:first-child {
	margin-top: 0 !important;
}

.apf-sp .apf-sp-tabs-panel h3 {
	font-family: var(--font) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	margin: 1.75rem 0 .75rem !important;
	line-height: 1.4;
}

.apf-sp .apf-sp-tabs-panel h4 {
	font-family: var(--font) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	margin: 1.5rem 0 .625rem !important;
	line-height: 1.4;
}

.apf-sp .apf-sp-tabs-panel p      { margin: 0 0 .875rem !important; color: var(--text-mid) !important; }
.apf-sp .apf-sp-tabs-panel strong  { color: var(--text) !important; font-weight: 700; }
.apf-sp .apf-sp-tabs-panel ul      { margin: .5rem 0 1rem 1.25rem !important; padding: 0 !important; list-style: disc; }
.apf-sp .apf-sp-tabs-panel li      { margin-bottom: .375rem !important; color: var(--text-mid) !important; }

/* ---- Images inside tab panels ---- */
.apf-sp .apf-sp-tabs-panel img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin: 1rem 0 !important;
}

.apf-sp .apf-sp-tabs-panel table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 !important;
}

.apf-sp .apf-sp-tabs-panel th,
.apf-sp .apf-sp-tabs-panel td {
	padding: .625rem 1rem;
	border: 1px solid var(--border) !important;
	text-align: left;
}

.apf-sp .apf-sp-tabs-panel th {
	background: var(--bg-light) !important;
	font-weight: 600;
	color: var(--text) !important;
}

.apf-sp .apf-sp-tabs-panel a {
	color: var(--green) !important;
}
/* ==========================================================================
   SECTION 2 — WHY CHOOSE
   ========================================================================== */

.apf-sp .apf-sp-why {
	padding: 4rem 0;
	background: var(--bg) !important;
}

/* ---- Section Headings (shared) ---- */

.apf-sp .apf-sp-sec-title {
	font-family: var(--font) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	color: var(--text) !important;
	text-align: center;
	margin: 0 0 .5rem !important;
	letter-spacing: -0.05em;
	padding: 0 !important;
}

.apf-sp .apf-sp-sec-sub {
	font-size: 1rem !important;
	color: var(--text-mid) !important;
	text-align: center;
	max-width: 752px;
	margin: 0 auto 2.5rem !important;
	line-height: 1.67;
}

/* ---- Feature Cards ---- */

.apf-sp .apf-sp-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.apf-sp .apf-sp-fcard {
	background: var(--bg) !important;
	border: 2px solid var(--border) !important;
	border-radius: var(--radius);
	padding: 1.75rem 1.5rem 1.5rem;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.apf-sp .apf-sp-fcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.apf-sp .apf-sp-fcard-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	background: var(--green) !important;
	color: #fff !important;
	margin-bottom: .875rem;
	padding: 0 !important;
}

.apf-sp .apf-sp-fcard-icon svg {
	stroke: #fff !important;
	fill: none !important;
}

.apf-sp .apf-sp-fcard-title {
	font-family: var(--font) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--text-mid) !important;
	margin: 0 0 .5rem !important;
	line-height: 1.4;
	padding: 0 !important;
}

.apf-sp .apf-sp-fcard-desc {
	font-size: .875rem;
	line-height: 1.85;
	color: var(--text-mid) !important;
	margin: 0 0 .75rem;
	min-height: 174px;
}

.apf-sp .apf-sp-fcard-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.apf-sp .apf-sp-fcard-list li {
	position: relative;
	padding-left: 1rem !important;
	font-size: .875rem;
	color: var(--text-mid) !important;
	line-height: 1.85;
	margin-bottom: .25rem;
	list-style: none !important;
}

.apf-sp .apf-sp-fcard-list li::before {
	content: '' !important;
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green) !important;
}

/* ==========================================================================
   SECTION 3 — REAL RESULTS / CASE STUDIES
   ========================================================================== */

.apf-sp .apf-sp-results {
	padding: 3.5rem 0;
	background: var(--bg-blue) !important;
}

.apf-sp .apf-sp-results .apf-sp-sec-title {
	color: var(--green) !important;
	font-size: 1.5625rem !important;
	letter-spacing: -1.25px;
	line-height: 1.3;
}

.apf-sp .apf-sp-results .apf-sp-sec-sub {
	font-size: 1.125rem !important;
	font-weight: 400;
	line-height: 1.67;
	margin-bottom: 2rem !important;
}

.apf-sp .apf-sp-cases {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.apf-sp .apf-sp-cases > .apf-sp-case {
	width: calc(30% - 0.9375rem);
	flex: 0 0 auto;
}

/* ---- Case Study Card ---- */

.apf-sp a.apf-sp-case,
.apf-sp .apf-sp-case {
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	border: 2px solid var(--border) !important;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg) !important;
	text-decoration: none !important;
	color: inherit !important;
	padding: 12px 13px;
	outline: none !important;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.apf-sp a.apf-sp-case:hover,
.apf-sp .apf-sp-case:hover {
	color: inherit !important;
}

/* ---- Case Image ---- */

.apf-sp .apf-sp-case-img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
	border-radius: var(--radius-sm);
	border: none !important;
}

.apf-sp .apf-sp-case-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform .4s var(--ease);
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	border: none !important;
	outline: none !important;
}

.apf-sp .apf-sp-case:hover .apf-sp-case-img img {
	transform: none;
}

.apf-sp .apf-sp-case-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--bg-light);
	color: var(--border);
}

/* ---- Case Body ---- */

.apf-sp .apf-sp-case-body {
	padding: 0;
	display: contents;
}

.apf-sp .apf-sp-case-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: 10px;
	margin-bottom: 0;
}

.apf-sp .apf-sp-case-title {
	font-family: var(--font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 25px !important;
	color: var(--text-mid) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.apf-sp .apf-sp-case-arrow {
	flex-shrink: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 54px !important;
	height: 52px !important;
	min-width: 54px !important;
	border-radius: 50% !important;
	background: #1C3A8A !important;
	color: #fff !important;
	padding: 0 !important;
	border: none !important;
	transition: background .2s var(--ease), transform .2s var(--ease);
}

.apf-sp .apf-sp-case-arrow svg {
	fill: #fff !important;
	stroke: none !important;
	width: 13px;
	height: 23px;
}
/* ---- Case Accent (blue description area) ---- */

.apf-sp .apf-sp-case-accent {
	background: var(--bg-blue) !important;
	border-radius: var(--radius-sm);
	padding: 17px 22px 41px 23px;
	margin-top: 0;
}

.apf-sp .apf-sp-case-desc {
	font-size: 14px;
	line-height: 1.85;
	color: var(--text-mid) !important;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE — Tablet landscape (<=1080px)
   ========================================================================== */

@media (max-width: 1080px) {
	.apf-sp .apf-sp-hero-grid {
		gap: 2rem;
	}

	.apf-sp .apf-sp-info {
		padding: 0 20px 0 24px;

	}

	.apf-sp .apf-sp-title {
		font-size: 40px !important;
	}

	.apf-sp .apf-sp-features {
		grid-template-columns: repeat(2, 1fr);
	}

	.apf-sp .apf-sp-cases > .apf-sp-case {
		width: calc(50% - 0.625rem);
	}

	.apf-sp .apf-sp-tabs-nav {
		gap: 2.5rem;
	}

	.apf-sp .apf-sp-tabs-btn {
		font-size: 1.125rem !important;
		padding: 1.25rem 0 1rem !important;
	}
}

/* ==========================================================================
   RESPONSIVE — Tablet portrait (<=768px)
   ========================================================================== */

@media (max-width: 768px) {
	/* Default container left/right padding to 10px (not 0) for mobile consistency */
	.apf-sp .ast-container,
	.apf-sp.ast-container,
	.ast-container .apf-sp,
	.ast-separate-container .apf-sp,
	.ast-separate-container .ast-article-single .apf-sp,
	#primary .apf-sp,
	.site-content .apf-sp,
	body.single-product .site-content,
	body.single-product .ast-container,
	body.single-product #primary,
	body.single-product .ast-primary-width,
	body.single-product .content-area,
	body.single-product .site-main,
	body.single-product .site-main > article,
	body.single-product .ast-article-single,
	body.single-product .ast-article-post,
	body.single-product .entry-content,
	body.single-product .ast-separate-container .ast-article-single {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.apf-sp .apf-sp-container {
		padding: 0 1.25rem;
	}

	.apf-sp .apf-sp-hero {
		padding: 1.5rem 0 2.5rem;
	}

	/* Stack hero columns — info above gallery on mobile */
	.apf-sp .apf-sp-hero-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.apf-sp .apf-sp-info {
		padding: 0;
		order: -1;
	}

	.apf-sp .apf-sp-gallery {
		position: static;
		order: 0;
	}

	.apf-sp .apf-sp-arrow {
		width: 42px !important;
		height: 42px !important;
	}

	.apf-sp .apf-sp-arrow-prev { left: 10px !important; }
	.apf-sp .apf-sp-arrow-next { right: 10px !important; }

	.apf-sp .apf-sp-title {
		font-size: 40px !important;
	}

	.apf-sp .apf-sp-body {
		font-size: 18px;
	}

	/* Stack CTA buttons */
	.apf-sp .apf-sp-cta {
		flex-direction: row;
        display: flex;
        justify-content: center;
	}

	.apf-sp .apf-sp-btn {
		width: 40% !important;
		min-width: 0;
		text-align: center !important;
		justify-content: center !important;
	}

	/* Tabs */
	.apf-sp .apf-sp-tabs-section {
		padding: 0 0 2rem;
	}

	.apf-sp .apf-sp-tabs-nav {
		overflow-x: visible;
		justify-content: stretch;
		gap: 0;
		padding: 0 !important;
	}

	.apf-sp .apf-sp-tabs-btn {
		flex: 1 1 0;
		padding: 1rem 0.5rem .875rem !important;
		font-size: 1rem !important;
		text-align: center;
		white-space: normal;
		line-height: 1.3 !important;
	}

	.apf-sp .apf-sp-tabs-btn::after {
		height: 4px;
		border-radius: 2px;
	}

	.apf-sp .apf-sp-tabs-panel {
		padding: 1.5rem 0;
		font-size: .9375rem;
	}

	/* Why Choose */
	.apf-sp .apf-sp-why,
	.apf-sp .apf-sp-results {
		padding: 2.5rem 0;
	}

	.apf-sp .apf-sp-sec-title {
		font-size: 1.25rem !important;
	}

	.apf-sp .apf-sp-sec-sub {
		font-size: .9375rem !important;
		margin-bottom: 1.75rem !important;
	}

	.apf-sp .apf-sp-features {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}

	.apf-sp .apf-sp-fcard {
		padding: 1.25rem 1rem 1rem;
	}

	.apf-sp .apf-sp-fcard-icon {
		width: 52px !important;
		height: 52px !important;
	}

	.apf-sp .apf-sp-fcard-icon svg {
		width: 24px;
		height: 24px;
	}

	/* Cases */
	.apf-sp .apf-sp-cases > .apf-sp-case {
		width: calc(50% - 0.5rem);
	}

	.apf-sp .apf-sp-cases {
		gap: 1rem;
	}

	.apf-sp .apf-sp-case-arrow {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
	}
}

/* ==========================================================================
   RESPONSIVE — Mobile (<=540px)
   ========================================================================== */

@media (max-width: 540px) {
	.apf-sp .apf-sp-container {
		padding: 0 1rem;
	}

	.apf-sp .apf-sp-breadcrumb {
		font-size: .8125rem;
	}

	.apf-sp .apf-sp-viewport {
		aspect-ratio: 4 / 3;
		height: auto;
	}

	.apf-sp .apf-sp-thumb {
		max-height: 72px;
	}

	.apf-sp .apf-sp-title {
		font-size: 32px !important;
		letter-spacing: -1px;
	}

	.apf-sp .apf-sp-body {
		font-size: 18px;
	}

	.apf-sp .apf-sp-btn {
		font-size: .9375rem !important;
		padding: 12px 2rem !important;
	}

	/* Tabs */
	.apf-sp .apf-sp-tabs-nav {
		gap: 0;
		padding: 0 !important;
	}

	.apf-sp .apf-sp-tabs-btn {
		font-size: 14px !important;
		padding: .875rem 0.25rem .75rem !important;
	}

	.apf-sp .apf-sp-tabs-panel {
		padding: 1.25rem 0;
		font-size: 14px;
        overflow: auto;
	}

	/* Feature cards: single column */
	.apf-sp .apf-sp-features {
		grid-template-columns: 1fr;
	}

	.apf-sp .apf-sp-fcard {
		padding: 1.5rem 1.25rem;
	}

	/* Case studies: single column */
	.apf-sp .apf-sp-cases > .apf-sp-case {
		width: 100%;
	}

	.apf-sp .apf-sp-case-img {
		aspect-ratio: 16 / 10;
	}

	.apf-sp .apf-sp-sec-title {
		font-size: 1.125rem !important;
	}

	.apf-sp .apf-sp-sec-sub {
		font-size: .875rem !important;
	}

	.apf-sp .apf-sp-btn {
		flex-direction: column;
	}
}

/* ==========================================================================
   Part numbers (SKU / MPN) — shown under the product title
   ========================================================================== */
.apf-sp .apf-sp-partnos {
	margin: 8px 0 16px;
	padding: 10px 14px;
	background: #f6f8fb;
	border-left: 3px solid #1c3a8a;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.5;
}

.apf-sp .apf-sp-partno-row {
	display: flex;
	gap: 8px;
}

.apf-sp .apf-sp-partno-row dt {
	font-weight: 700;
	color: #1c3a8a;
	min-width: 48px;
	margin: 0;
}

.apf-sp .apf-sp-partno-row dd {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #2a2a2a;
	user-select: all;
}

/* ==========================================================================
   Quick specs (Flow Rate / Micron Rating / Max Temperature)
   Sits between the product description and the CTA buttons.
   ========================================================================== */
.apf-sp .apf-sp-quickspecs {
	margin: 18px 0 22px;
	padding: 0;
	border-top: 1px solid #e1e3e8;
	border-bottom: 1px solid #e1e3e8;
	width: 100%;
}

.apf-sp .apf-sp-quickspec-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 10px 2px;
	border-bottom: 1px solid #eef0f3;
	font-size: 15px;
	line-height: 1.4;
}

.apf-sp .apf-sp-quickspec-row:last-child {
	border-bottom: none;
}

.apf-sp .apf-sp-quickspec-row dt {
	margin: 0;
	font-weight: 600;
	color: #1c3a8a;
	flex: 0 0 160px;
}

.apf-sp .apf-sp-quickspec-row dd {
	margin: 0;
	color: #2a2a2a;
	text-align: left;
}

@media (max-width: 540px) {
	.apf-sp .apf-sp-quickspec-row {
		font-size: 14px;
		padding: 8px 2px;
		gap: 12px;
	}

	.apf-sp .apf-sp-quickspec-row dt {
		flex: 0 0 120px;
	}
}