/*
Theme Name: Bin Bay Child
Theme URI: https://binbayuae.com
Description: Child Theme for Bin Bay
Author: Bin Bay
Author URI: https://binbayuae.com
Template: binbay
Version: 1.0.0
Text Domain: binbay-child
*/

/*--------------------------------------------------------------
Custom CSS starts here
--------------------------------------------------------------*/

/* ABOUT US PAGE FIX */
.bap-tile.bap-commitment-inline{
    margin-top:25px !important;
}
.bap-card.bap-expertise {
    margin-top: 15px;
}
.bap-card.bap-quality-strip {
    margin-top: 15px;
}
.bap-industry-grid {
    margin-top: 20px;
}
.binbay-about-page .bap-checks--tight {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	gap: 1.25rem !important;
}
.bap-card.bap-quality-promo {
    margin-top: 15px;
}
@media ( max-width: 900px ) {
	.binbay-about-page .bap-checks--tight {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 550px ) {
	.binbay-about-page .bap-checks--tight {
		grid-template-columns: 1fr !important;
	}
}
/* ==========================================================================
   BIN BAY — CONTACT PAGE (page-contact-us.php)
   Plain CSS, no Tailwind. Reuses the CSS custom properties already defined
   in the parent theme's compiled stylesheet (--brand, --gold, --ink, etc.)
   so this page always tracks the homepage palette automatically.
   All rules are scoped under .binbay-contact-page / .bcp-footer so nothing
   here can leak onto other templates.
   ========================================================================== */

.binbay-contact-page,
.bcp-footer {
	--bcp-radius: var( --radius, 1rem );
	--bcp-radius-lg: 20px;
	font-family: var( --font-sans, "Inter", sans-serif );
	color: var( --ink );
}

.binbay-contact-page h1,
.binbay-contact-page h2,
.binbay-contact-page h3,
.bcp-footer h4 {
	font-family: var( --font-display, "Montserrat", sans-serif );
	letter-spacing: -0.02em;
	color: var( --ink );
	margin: 0;
}
.binbay-contact-page h3{
    margin-bottom:10px !important;
}

.bcp-container {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media ( min-width: 768px ) {
	.bcp-container { padding-inline: 3rem; }
}

@media ( min-width: 1280px ) {
	.bcp-container { padding-inline: 4rem; }
}

.bcp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var( --brand-soft );
	color: var( --brand-dark );
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 7px 16px 7px 14px;
	margin-bottom: 20px;
}

.bcp-eyebrow::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.bcp-eyebrow--on-white {
	background: var( --gold-soft );
	border-color: rgba( 138, 92, 0, 0.15 );
	color: #8a5c00;
}

.bcp-h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 14px;
}

@media ( min-width: 1024px ) {
	.bcp-h2 { font-size: 32px; }
}

.bcp-lede {
	font-size: 16px;
	line-height: 1.7;
	color: var( --ink-muted );
	max-width: 92ch;
	margin: 10px 0 8px;
}

/* --------------------------------------------------------------------------
   1. SHARED INSIDE-PAGE HERO GLOW
   Used by binbay_page_hero() (inc/hero.php) — Products, FAQ, Contact,
   About Us, and any future inside page. The home page does not use this.
   -------------------------------------------------------------------------- */
.binbay-hero-glow {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background-image:
		radial-gradient( circle at 12% 20%, rgba( 47, 140, 67, 0.45 ), transparent 55% ),
		radial-gradient( circle at 88% 80%, rgba( 212, 160, 25, 0.22 ), transparent 50% );
	pointer-events: none;
}

/* Some individual page stylesheets (e.g. .binbay-contact-page h1) set a
   dark default color on every heading on that page, for headings further
   down the page outside the hero. That page-scoped rule (class + tag) is
   more specific than the hero's plain .text-white utility class, so it
   would otherwise win and make the hero title unreadable on its dark
   background. This rule guarantees the hero title is always white,
   regardless of what any given page sets as its own heading default. */
.binbay-hero-title {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   1a. HERO ENTRANCE ANIMATION
   Subtle fade + slide-up on load, staggered across the badge, title,
   description and breadcrumb. Applies wherever binbay_page_hero() is used.
   -------------------------------------------------------------------------- */
@keyframes binbay-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.binbay-hero-badge,
.binbay-hero-title,
.binbay-hero-desc,
.binbay-hero-cta,
.binbay-hero-stats,
.bcp-breadcrumb {
	opacity: 0;
	animation: binbay-fade-in 0.9s ease-out both;
}

.binbay-hero-badge  { animation-delay: 0s; }
.binbay-hero-title  { animation-delay: 0.15s; }
.binbay-hero-desc   { animation-delay: 0.3s; }
.binbay-hero-cta    { animation-delay: 0.45s; }
.binbay-hero-stats  { animation-delay: 0.6s; }
.bcp-breadcrumb      { animation-delay: 0.3s; }

@media ( prefers-reduced-motion: reduce ) {
	.binbay-hero-badge,
	.binbay-hero-title,
	.binbay-hero-desc,
	.binbay-hero-cta,
	.binbay-hero-stats,
	.bcp-breadcrumb {
		animation: none;
		opacity: 1;
	}
}
/* --------------------------------------------------------------------------
   1b. FAQ ACCORDION — smooth expand/collapse
   Works alongside whatever base .faq-* styling already exists; only adds
   the transition behaviour. JS toggles the "is-open" class (see
   assets/js/faq.js) instead of the hidden attribute, since [hidden] jumps
   straight to display:none and can't be animated.
   -------------------------------------------------------------------------- */
/* .faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease-in-out;
} */

.faq-answer.is-open {
	grid-template-rows: 1fr;
}

.faq-answer-inner {
	overflow: hidden;
	min-height: 0;
}

.faq-chevron {
	transition: transform 0.3s ease-in-out;
}

.faq-question[aria-expanded="true"] .faq-chevron {
	transform: rotate( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.faq-answer,
	.faq-chevron {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   1b. SITE-WIDE "NEED CUSTOM SOLUTIONS?" CTA WIDGET
   Rendered by binbay_custom_solutions_cta() (inc/cta-custom-solutions.php)
   from footer.php, on every page except Home, About Us, FAQ, Contact Us.
   Plain CSS on purpose — see the note at the top of that file.
   -------------------------------------------------------------------------- */
.binbay-cta {
	position: relative;
	overflow: hidden;
	background: var( --ink, #14181b );
	color: #fff;
}

.binbay-cta-row {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem;
	padding-block: 4rem;
}

@media ( min-width: 1024px ) {
	.binbay-cta-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-block: 5rem;
	}
}

.binbay-cta-text {
	max-width: 40rem;
}

.binbay-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	border-radius: 999px;
	border: 1px solid rgba( 212, 160, 25, 0.4 );
	background: rgba( 212, 160, 25, 0.1 );
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --gold );
}

.binbay-cta-title {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.binbay-cta-copy {
	margin-top: 1rem;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba( 255, 255, 255, 0.7 );
}

.binbay-cta-actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	gap: 1rem;
}

.binbay-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.9rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.binbay-cta-btn--primary {
	background: var( --brand );
	color: #fff;
	box-shadow: 0 10px 20px -8px rgba( 47, 140, 67, 0.6 );
}

.binbay-cta-btn--primary:hover {
	transform: translateY( -2px );
}

.binbay-cta-btn--outline {
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	background: transparent;
	color: #fff;
}

.binbay-cta-btn--outline:hover {
	border-color: var( --gold );
	color: var( --gold );
}

/* .bcp-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba( 255, 255, 255, 0.55 );
} */
.bcp-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba( 255, 255, 255, 0.5 );
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}
.bcp-breadcrumb a {
	color: rgba( 255, 255, 255, 0.75 );
	text-decoration: none;
}

.bcp-breadcrumb a:hover { color: var( --gold ); }

.bcp-breadcrumb-current { color: rgba( 255, 255, 255, 0.92 ); }

/* --------------------------------------------------------------------------
   2. INTRO + INFO CARDS
   -------------------------------------------------------------------------- */
.bcp-info {
	background: var( --surface, #fff );
	padding: 64px 0;
	text-align:center;
}

.bcp-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 32px;
}
.bcp-info .bcp-lede {
	margin-inline: auto;
}
.bcp-info-card {
	text-align: left;
}
@media ( min-width: 768px ) {
	.bcp-info-grid { grid-template-columns: repeat( 3, 1fr ); }
}

.bcp-info-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var( --border );
	border-radius: var( --bcp-radius-lg );
	background: #fff;
	padding: 28px 24px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.bcp-info-card:hover {
	transform: translateY(-4px);
	border-color: var( --brand );
	box-shadow: 0 20px 40px -20px rgba( 31, 92, 46, 0.25 );
}

.bcp-info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var( --brand-soft );
	color: var( --brand-dark );
	margin-bottom: 16px;
}

.bcp-info-title {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 10px !important;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.bcp-info-card a,
.bcp-info-card p {
	font-size: 14px;
	color: var( --ink-muted );
	text-decoration: none;
	margin: 0;
}

.bcp-info-card a:hover { color: var( --brand ); }

/* --------------------------------------------------------------------------
   3. ENQUIRY FORM + SIDEBAR
   -------------------------------------------------------------------------- */
.bcp-enquiry {
	background: var( --background );
	padding: 72px 0;
}

.bcp-enquiry-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

@media ( min-width: 1024px ) {
	.bcp-enquiry-grid { grid-template-columns: 1.6fr 1fr; }
}

.bcp-enquiry-form-wrap {
	background: #fff;
	border: 1px solid var( --border );
	border-radius: var( --bcp-radius-lg );
	padding: 36px 28px;
}

@media ( min-width: 768px ) {
	.bcp-enquiry-form-wrap { padding: 44px 40px; }
}

.bcp-cf7-wrap { margin-top: 24px; }

.bcp-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bcp-sidebar-card {
	background: #fff;
	border: 1px solid var( --border );
	border-radius: var( --bcp-radius-lg );
	padding: 24px;
}

.bcp-sidebar-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}

.bcp-sidebar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --brand-soft );
	color: var( --brand-dark );
	margin-bottom: 14px;
}

.bcp-hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bcp-hours-list li {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var( --ink-muted );
	padding-bottom: 10px;
	border-bottom: 1px solid var( --border );
}

.bcp-hours-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bcp-hours-list li span:first-child {
	color: var( --ink );
	font-weight: 600;
}

.bcp-hours-list .bcp-closed { color: #b3441f; }

.bcp-whatsapp-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var( --brand-dark );
	color: #fff;
	border-radius: var( --bcp-radius-lg );
	padding: 20px 22px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bcp-whatsapp-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba( 0, 0, 0, 0.35 );
}

.bcp-whatsapp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.15 );
}

.bcp-whatsapp-cta strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bcp-whatsapp-cta small {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.85 );
	margin-top: 4px;
}

.bcp-follow-icons {
	display: flex;
	gap: 10px;
}

.bcp-follow-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --border );
	color: var( --ink-muted );
	transition: border-color 0.2s ease, color 0.2s ease;
}

.bcp-follow-icons a:hover {
	border-color: var( --brand );
	color: var( --brand );
}

/* --------------------------------------------------------------------------
   4. MAP
   -------------------------------------------------------------------------- */
.bcp-map {
	background: #f4f5f4;
	padding: 72px 0;
}

.bcp-map-heading { text-align: left; margin-bottom: 28px; }

.bcp-map-card {
	position: relative;
	width: 100%;
	height: 440px;
	border-radius: var( --bcp-radius-lg );
	overflow: hidden;
	box-shadow: 0 20px 45px -25px rgba( 20, 30, 40, 0.35 );
	border: 1px solid var( --border );
}

.bcp-map-card iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.bcp-map-open-link {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var( --ink );
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	padding: 10px 18px;
	text-decoration: none;
	box-shadow: 0 10px 20px -10px rgba( 20, 30, 40, 0.4 );
	transition: transform 0.2s ease;
}

.bcp-map-open-link:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   5. CTA BANNER
   -------------------------------------------------------------------------- */
.bcp-cta {
	background: var( --brand );
	color: #fff;
	padding: 56px 0;
	text-align: left;
}

.bcp-cta-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	justify-content: space-between;
}

@media ( min-width: 768px ) {
	.bcp-cta-row {
		flex-direction: row;
		align-items: center;
	}
}

.bcp-cta-text { max-width: 640px; }

.bcp-cta .bcp-h2 { color: #fff; margin-bottom: 8px; }

.bcp-cta .bcp-lede {
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0;
}

.bcp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	border-radius: 999px;
	padding: 14px 30px;
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bcp-btn--gold {
	background: var( --gold );
	color: var( --ink );
	box-shadow: 0 10px 20px -8px rgba( 212, 160, 25, 0.5 );
}

.bcp-btn--gold:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */
.bcp-footer {
	background: var( --ink );
	color: rgba( 255, 255, 255, 0.72 );
	padding: 56px 0 0;
}

.bcp-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

@media ( min-width: 768px ) {
	.bcp-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.bcp-footer-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.bcp-footer-logo img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: contain;
}

.bcp-footer-name {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
}

.bcp-footer-tag {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba( 255, 255, 255, 0.55 );
}

.bcp-footer-brand p {
	font-size: 14px;
	line-height: 1.7;
	max-width: 46ch;
	margin: 0;
}

.bcp-footer-col h4 {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
}

.bcp-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.bcp-footer-reach li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba( 255, 255, 255, 0.72 );
}

.bcp-footer-reach li svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var( --gold );
}

.bcp-footer-col a {
	color: rgba( 255, 255, 255, 0.72 );
	text-decoration: none;
}

.bcp-footer-col a:hover { color: var( --gold ); }

.bcp-footer-bottom {
	padding: 20px 0 28px;
	font-size: 12px;
	color: rgba( 255, 255, 255, 0.5 );
}

/* ==========================================================================
   7. CONTACT FORM 7 — form styled through CF7's own classes
   Scoped to .bcp-cf7-wrap so it never touches the homepage quote form.
   ========================================================================== */

.bcp-cf7-wrap .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

/* .bcp-cf7-wrap .wpcf7-form p {
	margin: 0 0 18px;
}*/

.bcp-cf7-wrap .wpcf7-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var( --ink );
	margin-bottom: 6px;
}

.bcp-cf7-wrap .wpcf7-form-control,
.bcp-cf7-wrap input[type="text"],
.bcp-cf7-wrap input[type="email"],
.bcp-cf7-wrap input[type="tel"],
.bcp-cf7-wrap textarea.wpcf7-form-control,
.bcp-cf7-wrap select.wpcf7-form-control {
	width: 100%;
	font-family: var( --font-sans, "Inter", sans-serif );
	font-size: 15px;
	color: var( --ink );
	background: var( --background );
	border: 1px solid var( --border );
	border-radius: 12px;
	padding: 13px 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bcp-cf7-wrap textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

.bcp-cf7-wrap .wpcf7-form-control:focus {
	outline: none;
	border-color: var( --brand );
	box-shadow: 0 0 0 3px var( --brand-soft );
}

.bcp-cf7-wrap .wpcf7-form-control::placeholder { color: var( --ink-muted ); }

.bcp-cf7-wrap .wpcf7-submit {
	justify-self: start;
	border: none;
	border-radius: 999px;
	background-color: #eab308; /* var( --brand ); */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 15px 50px 15px 30px;
	cursor: pointer;
	box-shadow: 0 10px 20px -8px rgba( 47, 140, 67, 0.6 );
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.bcp-cf7-wrap .wpcf7-submit:hover { transform: translateY(-2px); }

.bcp-cf7-wrap .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.bcp-cf7-wrap .wpcf7-spinner { margin-left: 10px; }

.bcp-cf7-wrap .wpcf7-not-valid-tip {
	display: block;
	font-size: 12px;
	color: #c0392b;
	margin-top: 6px;
}

.bcp-cf7-wrap .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.bcp-cf7-wrap .wpcf7-response-output {
	border-radius: 12px;
	border: 1px solid var( --border );
	font-size: 14px;
	padding: 12px 16px;
	margin-top: 8px;
}

.bcp-cf7-wrap .wpcf7-form.sent .wpcf7-response-output {
	border-color: var( --brand );
	background: var( --brand-soft );
	color: var( --brand-dark );
}

.bcp-cf7-wrap .wpcf7-form.invalid .wpcf7-response-output,
.bcp-cf7-wrap .wpcf7-form.unaccepted .wpcf7-response-output,
.bcp-cf7-wrap .wpcf7-form.payment-required .wpcf7-response-output {
	border-color: #e0a8a0;
	background: #fbeceA;
	color: #a12a1a;
}

/* --------------------------------------------------------------------------
   8. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.binbay-contact-page a:focus-visible,
.binbay-contact-page button:focus-visible,
.binbay-contact-page input:focus-visible,
.binbay-contact-page textarea:focus-visible,
.bcp-footer a:focus-visible {
	outline: 2px solid var( --brand );
	outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   CONTACT FORM 7 — binbay-cform2 custom markup
   -------------------------------------------------------------------------- */

.binbay-cform-card2 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.binbay-grid1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.binbay-submit-wrap1 {
	display: flex;
	margin-top: 4px;
}
.binbay-submit-wrap button.binbay-btn.wpcf7-submit {
	background-color:#eab308; /*var( --brand );*/
}
.binbay-submit-wrap1 p {
	margin: 0;
}
@media ( min-width: 640px ) {
	.binbay-grid1 { grid-template-columns: repeat( 3, 1fr ); }
}

.binbay-field1 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.binbay-field1 p {
	margin: 0;
}
.binbay-field1 label {
	font-size: 13px;
	font-weight: 600;
	color: var( --ink );
}

/* CF7 renders its own wrapper span around each input — target the real
   input/textarea inside it directly */
.binbay-field1 input[type="text"],
.binbay-field1 input[type="email"],
.binbay-field1 input[type="tel"],
.binbay-field1 textarea {
	width: 100%;
	font-family: var( --font-sans, "Inter", sans-serif );
	font-size: 15px;
	color: var( --ink );
	background: var( --background );
	border: 1px solid var( --border );
	border-radius: 10px;
	padding: 12px 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.binbay-field1 textarea {
	min-height: 140px;
	resize: vertical;
}

.binbay-field1 input:focus,
.binbay-field1 textarea:focus {
	outline: none;
	border-color: var( --brand );
	box-shadow: 0 0 0 3px var( --brand-soft );
}

.binbay-field1 input::placeholder,
.binbay-field1 textarea::placeholder {
	color: var( --ink-muted );
}

.binbay-submit-wrap1 { margin-top: 4px; }
.wpcf7-list-item {
 margin: 0 ;
}
.binbay-btn.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: 999px;
	background: var( --brand );
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 14px 30px;
	cursor: pointer;
	box-shadow: 0 10px 20px -8px rgba( 47, 140, 67, 0.6 );
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.binbay-btn.wpcf7-submit:hover {
	background: var( --brand-dark );
	transform: translateY(-2px);
}

.binbay-btn.wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Arrow icon after the button label — works because this is a real
   <button>, not an <input>, so ::after renders */
.binbay-btn.wpcf7-submit::after {
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Validation + response messages (CF7's own classes, unchanged) */
.binbay-cform-card2 .wpcf7-not-valid-tip {
	display: block;
	font-size: 12px;
	color: #c0392b;
	margin-top: 6px;
}

.binbay-cform-card2 .wpcf7-response-output {
	border-radius: 10px;
	border: 1px solid var( --border );
	font-size: 14px;
	padding: 12px 16px;
}

.bcp-cf7-wrap .wpcf7-form.sent .wpcf7-response-output {
	border-color: var( --brand );
	background: var( --brand-soft );
	color: var( --brand-dark );
}

.bcp-cf7-wrap .wpcf7-form.invalid .wpcf7-response-output,
.bcp-cf7-wrap .wpcf7-form.unaccepted .wpcf7-response-output {
	border-color: #e0a8a0;
	background: #fbeceA;
	color: #a12a1a;
}
@media ( min-width: 640px ) {
	.binbay-grid1 { grid-template-columns: repeat( 2, 1fr ); }
}
/* ==========================================================================
   BIN BAY — SINGLE PRODUCT (content-single-product.php)
   ========================================================================== */

.binbay-sp {
	background: #fff;
	padding: 40px 0 72px;
}

.binbay-container {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
.binbay-sp-details { background: var(--background); padding: 56px 0; margin-top: 8px; }
.binbay-sp-block + .binbay-sp-block { margin-top: 40px; }
.binbay-sp-block-title { font-family: var(--font-display, "Montserrat", sans-serif); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 20px; }

.binbay-sp-feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .binbay-sp-feature-list { grid-template-columns: repeat(2, 1fr); } }
.binbay-sp-feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink); }
.binbay-sp-feature-check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); margin-top: 1px; }

.binbay-sp-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.binbay-sp-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border); background: #fff; padding: 8px 16px; font-size: 13px; color: var(--ink); }
.binbay-sp-chip--finish { border-color: rgba(212,160,25,0.35); background: rgba(212,160,25,0.08); color: #8a5c00; }

.binbay-sp-option-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.binbay-sp-option-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.binbay-sp-option-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 16px 32px -18px rgba(31,92,46,0.25); }
.binbay-sp-option-num { display: block; font-family: var(--font-display, "Montserrat", sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
.binbay-sp-option-card h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.binbay-sp-option-card p { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); margin: 0; }

.binbay-sp-info-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .binbay-sp-info-grid { grid-template-columns: 1fr 1fr; } }
.binbay-sp-info-card { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 12px; padding: 20px 22px; }
.binbay-sp-info-card h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-dark); margin: 0 0 8px; }
.binbay-sp-info-card p { font-size: 14px; line-height: 1.7; color: var(--ink-muted); margin: 0; }
@media ( min-width: 768px ) {
	.binbay-container { padding-inline: 3rem; }
}

@media ( min-width: 1280px ) {
	.binbay-container { padding-inline: 4rem; }
}

.binbay-sp-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var( --ink-muted );
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.binbay-sp-breadcrumb a {
	color: var( --ink-muted );
	text-decoration: none;
}

.binbay-sp-breadcrumb a:hover { color: var( --brand ); }

.binbay-sp-breadcrumb-current {
	color: var( --ink );
	font-weight: 600;
}

.binbay-sp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media ( min-width: 1024px ) {
	.binbay-sp-grid { grid-template-columns: 1fr 1fr; }
}

/* --- GALLERY --- */

.binbay-sp-gallery-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.binbay-sp-gallery-main {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --background );
	border: 1px solid var( --border );
	border-radius: 20px;
	padding: 32px;
}

.binbay-sp-gallery-main__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.binbay-sp-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 10px;
}

.binbay-sp-gallery-thumb {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --background );
	border: 2px solid var( --border );
	border-radius: 12px;
	padding: 8px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.binbay-sp-gallery-thumb:hover,
.binbay-sp-gallery-thumb.is-active {
	border-color: var( --brand );
}

.binbay-sp-gallery-thumb__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- SUMMARY --- */

.binbay-sp-title {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: 28px;
	font-weight: 700;
	color: var( --ink );
	margin: 0 0 16px;
}

@media ( min-width: 1024px ) {
	.binbay-sp-title { font-size: 34px; }
}

.binbay-sp-excerpt {
	font-size: 15px;
	line-height: 1.7;
	color: var( --ink-muted );
	margin-bottom: 24px;
}

.binbay-sp-excerpt p:last-child { margin-bottom: 0; }

.binbay-sp-specs {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 16px;
	background: var( --background );
	border: 1px solid var( --border );
	border-radius: 16px;
	padding: 20px;
}

@media ( min-width: 480px ) {
	.binbay-sp-specs { grid-template-columns: repeat( 4, 1fr ); }
}

.binbay-sp-spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.binbay-sp-spec-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --ink-muted );
}

.binbay-sp-spec-value {
	font-size: 14px;
	font-weight: 600;
	color: var( --ink );
}

.binbay-sp-specs-note {
	font-size: 12px;
	color: var( --ink-muted );
	margin: 8px 0 0;
}

.binbay-sp-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.binbay-sp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	padding: 13px 24px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.binbay-sp-btn--primary {
	background: var( --brand );
	color: #fff;
	box-shadow: 0 10px 20px -8px rgba( 47, 140, 67, 0.6 );
}

.binbay-sp-btn--primary:hover { transform: translateY(-2px); }

.binbay-sp-btn--outline {
	background: #fff;
	color: var( --ink );
	border: 1px solid var( --border );
}

.binbay-sp-btn--outline:hover {
	border-color: var( --brand );
	color: var( --brand );
}

/* --- RELATED PRODUCTS --- */

.binbay-sp-related {
	background: var( --background );
	padding: 64px 0;
	margin-top: 56px;
}

.binbay-sp-related-title {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: 24px;
	font-weight: 700;
	color: var( --ink );
	margin: 0 0 24px;
}

.binbay-sp-related-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px;
}

@media ( min-width: 640px ) {
	.binbay-sp-related-grid { grid-template-columns: repeat( 4, 1fr ); }
}

.binbay-sp-related-card {
	display: block;
	background: #fff;
	border: 1px solid var( --border );
	border-radius: 16px;
	padding: 16px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.binbay-sp-related-card:hover {
	transform: translateY(-3px);
	border-color: var( --brand );
	box-shadow: 0 16px 32px -18px rgba( 31, 92, 46, 0.25 );
}

.binbay-sp-related-card__image {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --background );
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 12px;
}

.binbay-sp-related-card__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.binbay-sp-related-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var( --ink );
}

.binbay-sp-related-card:hover .binbay-sp-related-card__title {
	color: var( --brand );
}
/* ==========================================================================
   BIN BAY — ABOUT US PAGE (page-about-us.php)
   Plain CSS, no Tailwind. Reuses the CSS custom properties already defined by
   the parent theme's compiled stylesheet (--brand, --brand-dark, --brand-soft,
   --gold/--accent, --ink, --font-sans, --font-display) so this page always
   tracks the homepage palette automatically.
   Every rule is scoped under .binbay-about-page so nothing can leak.
   ========================================================================== */

.binbay-about-page {
	--bap-brand: var( --brand, oklch( 58% 0.15 145 ) );
	--bap-brand-dark: var( --brand-dark, oklch( 45% 0.13 145 ) );
	--bap-brand-soft: var( --brand-soft, oklch( 96% 0.03 145 ) );
	--bap-gold: var( --gold, var( --accent, oklch( 82% 0.12 85 ) ) );
	--bap-ink: var( --ink, oklch( 26% 0.01 240 ) );
	--bap-ink-muted: var( --ink-muted, oklch( 52% 0.012 240 ) );
	--bap-surface: var( --background, oklch( 98.5% 0.003 240 ) );
	--bap-line: var( --border, oklch( 92% 0.006 240 ) );
	--bap-dark: #0f1316;
	--bap-radius: 20px;
	--bap-radius-sm: 14px;
	--bap-shadow: 0 24px 48px -32px rgba( 15, 19, 22, 0.35 );

	font-family: var( --font-sans, "Inter", system-ui, sans-serif );
	color: var( --bap-ink );
	background: var( --bap-surface );
}

.binbay-about-page h1,
.binbay-about-page h2,
.binbay-about-page h3,
.binbay-about-page h4 {
	font-family: var( --font-display, "Montserrat", system-ui, sans-serif );
	letter-spacing: -0.02em;
	margin: 0;
	color: inherit;
}

.binbay-about-page p {
	margin: 0;
}

.binbay-about-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.binbay-about-page a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-container {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media ( min-width: 768px ) {
	.binbay-about-page .bap-container { padding-inline: 3rem; }
}

@media ( min-width: 1280px ) {
	.binbay-about-page .bap-container { padding-inline: 4rem; }
}

.binbay-about-page .bap-section {
	padding-block: 4.5rem;
}

@media ( min-width: 1024px ) {
	.binbay-about-page .bap-section { padding-block: 6rem; }
}

.binbay-about-page .bap-section--soft {
	background: linear-gradient( 180deg, var( --bap-brand-soft ) 0%, var( --bap-surface ) 100% );
}

.binbay-about-page .bap-eyebrow {
    display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var( --brand-soft );
	color: var( --brand-dark );
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 7px 16px 7px 14px;
	margin-bottom: 20px;
/*	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --bap-brand-dark );
	background: var( --bap-brand-soft );
	border-radius: 999px;
	padding: 0.4rem 0.85rem; */
}
.bap-eyebrow::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	color: var( --gold );
}

.binbay-about-page .bap-h2 {
	font-size: clamp( 1.75rem, 3.2vw, 2.5rem );
	font-weight: 700;
	line-height: 1.15;
	margin-top: 1rem;
}

.binbay-about-page .bap-lead {
	margin-top: 1rem;
	max-width: 60ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var( --bap-ink-muted );
}

.binbay-about-page .bap-section-head {
	max-width: 720px;
}

.binbay-about-page .bap-section-head--center {
	margin-inline: auto;
	text-align: center;
}

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

.binbay-about-page .bap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.85rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.binbay-about-page .bap-btn:hover {
	transform: translateY( -2px );
}

.binbay-about-page .bap-btn:focus-visible {
	outline: 2px solid var( --bap-gold );
	outline-offset: 3px;
}

.binbay-about-page .bap-btn--primary {
	background: var( --bap-brand );
	color: #fff;
	box-shadow: 0 10px 20px -8px rgba( 47, 140, 67, 0.6 );
}

.binbay-about-page .bap-btn--primary:hover {
	background: var( --bap-brand-dark );
}

.binbay-about-page .bap-btn--ghost {
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	color: #fff;
}

.binbay-about-page .bap-btn--ghost:hover {
	border-color: var( --bap-gold );
	color: var( --bap-gold );
}

.binbay-about-page .bap-btn--outline {
	border: 1px solid var( --bap-line );
	background: #fff;
	color: var( --bap-ink );
}

.binbay-about-page .bap-btn--outline:hover {
	border-color: var( --bap-brand );
	color: var( --bap-brand-dark );
}

/* --------------------------------------------------------------------------
   2. Who we are + stats
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-split {
	display: grid;
	gap: 3rem;
	align-items: start;
}

@media ( min-width: 1024px ) {
	.binbay-about-page .bap-split {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 4rem;
	}
}

.binbay-about-page .bap-prose p + p {
	margin-top: 1rem;
}

.binbay-about-page .bap-stat-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
}

.binbay-about-page .bap-stat {
	background: #fff;
	border: 1px solid var( --bap-line );
	border-radius: var( --bap-radius );
	padding: 1.5rem;
	box-shadow: var( --bap-shadow );
}

.binbay-about-page .bap-stat-value {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: clamp( 1.75rem, 3vw, 2.25rem );
	font-weight: 800;
	color: var( --bap-brand-dark );
	line-height: 1;
}

.binbay-about-page .bap-stat-label {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --bap-ink-muted );
}

/* --------------------------------------------------------------------------
   3. Product families
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-card-grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.binbay-about-page .bap-card {
	background: #fff;
	border: 1px solid var( --bap-line );
	border-radius: var( --bap-radius );
	padding: 1.75rem;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.binbay-about-page a.bap-card:hover,
.binbay-about-page .bap-card:hover {
	transform: translateY( -4px );
	border-color: var( --bap-brand );
	box-shadow: var( --bap-shadow );
}

.binbay-about-page .bap-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var( --bap-brand-soft );
	color: var( --bap-brand-dark );
	margin-bottom: 1.15rem;
}

.binbay-about-page .bap-card h3 {
	font-size: 1.0625rem;
	font-weight: 700;
}

.binbay-about-page .bap-card p {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var( --bap-ink-muted );
}

/* --------------------------------------------------------------------------
   4. Process strip
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-steps {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	counter-reset: bap-step;
}

.binbay-about-page .bap-step {
	position: relative;
	background: #fff;
	border: 1px solid var( --bap-line );
	border-radius: var( --bap-radius-sm );
	padding: 1.5rem 1.25rem;
}

.binbay-about-page .bap-step-num {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var( --bap-gold );
}

.binbay-about-page .bap-step h3 {
	margin-top: 0.65rem;
	font-size: 1rem;
	font-weight: 700;
}

.binbay-about-page .bap-step p {
	margin-top: 0.45rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --bap-ink-muted );
}

/* --------------------------------------------------------------------------
   5. Certifications
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-cert-grid {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
}

.binbay-about-page .bap-cert {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fff;
	border: 1px solid var( --bap-line );
	border-radius: var( --bap-radius-sm );
	padding: 1.15rem 1.25rem;
}

.binbay-about-page .bap-cert img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	flex: 0 0 auto;
}

.binbay-about-page .bap-cert-title {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: 0.9375rem;
	font-weight: 700;
}

.binbay-about-page .bap-cert-note {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var( --bap-ink-muted );
}

/* --------------------------------------------------------------------------
   6. Mission / vision / values
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-tiles {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.binbay-about-page .bap-tile {
	background: var( --bap-brand-soft );
	border: 1px solid rgba( 47, 140, 67, 0.14 );
	border-radius: var( --bap-radius );
	padding: 1.85rem;
}

.binbay-about-page .bap-tile h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var( --bap-brand-dark );
}

.binbay-about-page .bap-tile p {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --bap-ink-muted );
}

.binbay-about-page .bap-value-list {
	margin-top: 1rem;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.binbay-about-page .bap-value-list li {
	font-size: 0.9rem;
	color: var( --bap-ink );
}

/* --------------------------------------------------------------------------
   7. Why choose us
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-checks {
	margin-top: 2.5rem;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
}

.binbay-about-page .bap-check {
	display: flex;
	gap: 0.85rem;
	background: #fff;
	border: 1px solid var( --bap-line );
	border-radius: var( --bap-radius-sm );
	padding: 1.15rem 1.25rem;
}

.binbay-about-page .bap-check-mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --bap-brand );
	color: #fff;
}

.binbay-about-page .bap-check strong {
	display: block;
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: 0.9375rem;
	font-weight: 700;
}

.binbay-about-page .bap-check span.bap-check-copy {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --bap-ink-muted );
}

/* --------------------------------------------------------------------------
   8. CTA band
   -------------------------------------------------------------------------- */

.binbay-about-page .bap-cta {
	background: var( --ink, #14181b );
	color: #fff;
	padding-block: 4rem;
}

@media ( min-width: 1024px ) {
	.binbay-about-page .bap-cta { padding-block: 5rem; }
}

.binbay-about-page .bap-cta-inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media ( min-width: 1024px ) {
	.binbay-about-page .bap-cta-inner {
		grid-template-columns: 1.2fr 0.8fr;
	}
}

.binbay-about-page .bap-cta h2 {
	font-size: clamp( 1.6rem, 3vw, 2.25rem );
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
}

.binbay-about-page .bap-cta p {
	margin-top: 0.9rem;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba( 255, 255, 255, 0.65 );
}

.binbay-about-page .bap-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media ( min-width: 1024px ) {
	.binbay-about-page .bap-cta-actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.binbay-about-page * {
		transition: none !important;
	}
}
.woocommerce-tabs.wc-tabs-wrapper { /* Hiding default woocommerce rendering from single product page */
    display: none;
}
/* --------------------------------------------------------------------------
   Footer: dynamic "Quick Links" menu (wp_nav_menu, primary_menu location)
   Uses WordPress's default walker (so items keep their <li> wrapper,
   matching this column's vertical list), so link color/hover comes from
   this rule instead of a link_class walker argument like the header uses.
   -------------------------------------------------------------------------- */
.binbay-footer-menu a {
	color: rgba( 255, 255, 255, 0.6 );
	transition: color 0.2s ease;
	text-decoration: none;
}

.binbay-footer-menu a:hover {
	color: var( --gold );
}
/* ==========================================================================
   HEADER NAV — force hamburger menu on tablets, not just phones.
   Tailwind's own lg: breakpoint (1024px) switches to the full desktop
   nav, but with more menu items planned, 1024–1279px doesn't have
   enough room. Override to keep the hamburger through that range;
   the full inline nav only appears at 1280px+.
   ========================================================================== */
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.header-nav-desktop,
	.header-quote-btn {
		display: none !important;
	}

	.header-menu-toggle {
		display: flex !important;
	}
}
.binbay-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba( 15, 19, 22, 0.6 );
	padding: 20px;
}
.binbay-modal-overlay.is-open { display: flex; }
.binbay-modal {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	padding: 36px 32px;
	box-shadow: 0 24px 60px -20px rgba( 0, 0, 0, 0.4 );
}
.binbay-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var( --border );
	background: #fff;
	color: var( --ink-muted );
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.binbay-modal-close:hover { border-color: var( --brand ); color: var( --brand ); }
.binbay-modal-title {
	font-family: var( --font-display, "Montserrat", sans-serif );
	font-size: 20px;
	font-weight: 700;
	color: var( --ink );
	margin: 0 0 6px;
}
.binbay-modal-sub {
	font-size: 14px;
	color: var( --ink-muted );
	margin: 0 0 20px;
}
.binbay-modal-success { text-align: center; padding-top: 8px; }
.binbay-modal-success .binbay-modal-title,
.binbay-modal-success .binbay-modal-sub { text-align: center; }
.binbay-modal-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var( --brand-soft );
	color: var( --brand-dark );
	margin: 0 auto 16px;
}
.binbay-modal-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	border-radius: 999px;
	background: var( --brand );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 13px 28px;
	text-decoration: none;
	box-shadow: 0 10px 20px -8px rgba( 47, 140, 67, 0.6 );
	transition: transform 0.2s ease;
}
.binbay-modal-download-btn:hover { transform: translateY( -2px ); }

/* ==========================================================================
   HOME — "DRAINAGE / ACCESS / CUSTOM" strip under the About section image
   slideshow. Fixed 3-column grid with single-word bold labels; at narrow
   widths each column is too narrow for the word, and since a single word
   has no space to wrap at, it overflows instead of breaking — grid cells
   don't clip overflow by default, so the overflow visually spills into
   the next column (looks like the labels are colliding into each other).
   ========================================================================== */
.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card {
	overflow: hidden;
}

.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card .font-display.text-2xl.font-bold.text-brand-dark {
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.15;
}

@media (max-width: 767px) {
	.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card {
		gap: 8px;
		padding: 14px;
	}

	.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card .font-display.text-2xl.font-bold.text-brand-dark {
		font-size: 0.95rem;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}

	.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card .text-\[11px\] {
		font-size: 8.5px;
	}
}

@media (min-width: 768px) and (max-width: 1180px) {
	.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card {
		gap: 8px;
		padding: 14px;
	}

	.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card .font-display.text-2xl.font-bold.text-brand-dark {
		font-size: 0.95rem;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}

	.relative.mt-6.grid.grid-cols-3.gap-4.rounded-2xl.border.border-border.bg-white.p-5.shadow-card .text-\[11px\] {
		font-size: 8.5px;
	}
}