:root {
	--color-primary: #1077EA;    
	--color-primary-dark: #0a5cb8;
	--color-heading: #0D1426;   
	--color-text: #314158;      
	--color-caption: #90A1B9;   
	--color-green: #10B981;
	--white: #ffffff;
	--light-bg: #F4F7FB;        
	--border-light: #E2E8F0;
	--transition: all 0.3s ease;
	--petmex-blue: #28a1d8;
	--champer-purple: #a7135e;

	--wp--preset--font-size--bbe-large: 17px;
	--wp--preset--font-size--bbe-title-1: clamp(36px, 2.25rem + ((1vw - 3.2px) * 2.449), 60px);
	--wp--preset--font-size--bbe-title-2: clamp(36px, 2.25rem + ((1vw - 3.2px) * 1.224), 48px);
	--wp--preset--font-size--bbe-title-3: clamp(32px, 2rem + ((1vw - 3.2px) * 0.408), 36px);
	--wp--preset--font-size--bbe-title-4: 28px;
	--wp--preset--font-size--bbe-title-5: 24px;
	--wp--preset--font-size--bbe-title-6: 21px;
}

body {
	font-family: 'Inter', sans-serif;
	margin: 0;
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--bbe-large);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; box-sizing: border-box; }
.section-padding { padding: 80px 0; }

h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 500; line-height: 1.2; color: var(--color-heading); margin: 0; }
h1 { font-size: var(--wp--preset--font-size--bbe-title-1); color: var(--white); }
h2 { font-size: var(--wp--preset--font-size--bbe-title-2); margin-bottom: 1rem; }

.subhead { text-transform: uppercase; letter-spacing: 0.02em; font-size: 14px; font-weight: 600; margin-bottom: 15px; display: block; color: var(--color-caption); }

.btn {
	display: inline-block; padding: 14px 36px; background-color: var(--color-primary); color: var(--white);
	text-decoration: none; font-weight: 600; border-radius: 6px; transition: var(--transition);
	border: 2px solid var(--color-primary); text-align: center; cursor: pointer; font-size: 1rem;
}
.btn:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); border-color: var(--color-primary-dark); }

/* Hero */
.hero-distributor {
	height: 70vh; min-height: 600px;
	background: linear-gradient(rgba(13, 20, 38, 0.75), rgba(13, 20, 38, 0.65)), url('/wp-content/uploads/2025/12/petmex_opakowania.jpg');
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white);
}

/* Stats Section */
.stats-section { 
	background: #f8fafc; 
	padding: 40px 0; 
	border-bottom: 1px solid var(--border-light); 
	color: var(--color-heading);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-item h3 { 
	color: var(--color-primary); 
	font-size: 52px; 
	font-weight: 500; 
	margin-bottom: 5px; 
	margin-top: 0; 
	line-height: 1; 
}
.stat-item p { color: #64748b; font-weight: 500; font-size: 17px; margin: 0; }

/* Kafelki Style */
.benefit-card, .p-step, .faq-item, .brand-card {
	background: var(--white); border: 1px solid var(--border-light); border-radius: 20px; transition: var(--transition);
}

/* Proces */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; position: relative; }
.process-steps::before {
	content: ''; position: absolute; top: 45px; left: 0; width: 100%; height: 2px;
	background: #e2e8f0; z-index: 0; display: none;
}
@media(min-width: 992px) { .process-steps::before { display: block; } }
.p-step { position: relative; z-index: 1; padding: 30px; }
.p-number { 
	width: 50px; height: 50px; background: var(--color-primary); color: white; 
	border-radius: 50%; display: flex; align-items: center; justify-content: center; 
	font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; box-shadow: 0 0 0 5px var(--white); 
}

/* Brands */
.brands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
.brand-img-top { height: 250px; overflow: hidden; border-radius: 19px 19px 0 0; }
.brand-img-top img { width: 100%; height: 100%; object-fit: cover; }
.brand-content { padding: 40px; }
.usp-list { list-style: none; padding: 0; margin-bottom: 30px; }
.usp-list li { padding: 8px 0; display: flex; align-items: center; font-size: 0.95rem; }
.usp-list li::before { content: "✓"; color: var(--color-green); font-weight: 900; margin-right: 12px; }

/* Wartość dodana */
.benefit-card { padding: 40px; }
.benefit-card h4 { color: var(--color-primary); margin-bottom: 15px; font-size: var(--wp--preset--font-size--bbe-title-6); font-weight: 600; }

/* FAQ Style */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { margin-bottom: 15px; overflow: hidden; }
details summary { padding: 25px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; color: var(--color-heading); }
details summary::after { content: "+"; color: var(--color-primary); font-size: 20px; }
details[open] summary::after { content: "-"; }
details p { padding: 0 25px 25px; color: var(--color-text); margin: 0; }

/* SEKCJA MAPY - CZYSZCZENIE TŁA I UX */
.map-section-container {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 30px;
	background: var(--white);
	padding: 30px;
	border-radius: 24px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.04);
	align-items: center;
}
.map-wrapper {
	position: relative;
	background: #fcfdfe; /* Czyste, jasne tło zamiast drugiego obrazka */
	border-radius: 16px;
	padding: 40px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 450px;
}
.map-overlay-svg {
	width: 100%;
	height: auto;
	max-width: 500px;
	z-index: 10;
}
.voivodeship-area {
	fill: #e2e8f0;
	stroke: #fff;
	stroke-width: 1.5;
	cursor: pointer;
	transition: all 0.25s ease;
}
.voivodeship-area:hover, .voivodeship-area.active {
	fill: var(--color-primary);
	stroke-width: 2.5;
	filter: drop-shadow(0 0 5px rgba(16, 119, 234, 0.3));
}
.rep-card {
	background: var(--light-bg);
	border: 1px solid var(--border-light);
	border-radius: 20px;
	padding: 30px;
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}
.rep-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 5px; height: 100%;
	background: var(--color-primary);
}
.rep-info-header {
	margin-bottom: 20px;
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 15px;
}
.rep-info-header h4 {
	font-size: 15px;
	color: #64748b;
	font-weight: 600;
}
.rep-region-label {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: 0.8px;
	margin-bottom: 6px;
	display: block;
}
.rep-name {
	font-size: 24px;
	font-weight: 800;
	color: var(--color-heading);
	margin-bottom: 18px;
}
.rep-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--color-text);
	margin-bottom: 12px;
	font-weight: 500;
	font-size: 15px;
}
.rep-link .icon-box {
	width: 36px;
	height: 36px;
	background: var(--white);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Download */
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.download-card { 
	display: flex; align-items: center; gap: 25px; padding: 40px; 
	text-decoration: none; border-radius: 20px; border: 1px solid var(--border-light); 
	transition: var(--transition); background: var(--white);
}
.download-card:hover { border-color: var(--color-primary); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(16, 119, 234, 0.1); }
.download-icon { font-size: 3rem; color: var(--color-primary); }
.download-text h4 { margin-bottom: 5px; font-size: 1.25rem; }
.download-text p { margin: 0; font-size: 0.9rem; color: #64748b; }
.download-action-icon { margin-left: auto; color: var(--color-primary); opacity: 0.7; transition: var(--transition); }
.download-card:hover .download-action-icon { opacity: 1; transform: translateY(3px); }

/* Kontakt */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; background: var(--light-bg); padding: 60px; border-radius: 30px; }
.cf-item { display: flex; align-items: center; margin-bottom: 15px; font-weight: 500; }
.cf-icon { color: var(--color-primary); margin-right: 15px; font-size: 1.2rem; }

@media (max-width: 992px) {
	.process-steps, .brands-grid, .download-grid, .contact-wrapper, .stats-grid, .map-section-container { grid-template-columns: 1fr !important; }
	.map-wrapper { order: 2; padding: 20px 10px; min-height: auto; }
	.hero-distributor h1 { font-size: 32px; }
}

.page-id-16106 div[data-elementor-type="wp-page"],
.page-id-19976 div[data-elementor-type="wp-page"],
.page-id-19701 div[data-elementor-type="wp-page"] { max-width: 100%; }
.page-id-19976 .has-global-padding,
.page-id-19701 .has-global-padding {
    padding-top: 0!important;
    padding-right: 0;
    padding-left: 0;
}
.remplates-row-auto .e-con.e-grid { grid-template-rows: auto; }

@media (min-width: 768px) {
	.page-id-16106 .entry-content,
	.page-id-19976 .entry-content,
	.page-id-19701 .entry-content,
	.entry-content {
		padding:0 !important;
	}

	.page-id-16106 div[data-elementor-type="wp-page"] > .elementor-element,
	.page-id-19976 div[data-elementor-type="wp-page"] > .elementor-element,
	.page-id-19701 div[data-elementor-type="wp-page"] > .elementor-element{
		padding:0 !important;
	}
		
	.elementor-element-ab2d6b0 {
		padding-left: 0;
		padding-right: 0;
	}
}

.page-id-16106 .wp-block-group.has-bbe-primary-950-background-color,
.page-id-19976 .wp-block-group.has-bbe-primary-950-background-color,
.page-id-19701 .wp-block-group.has-bbe-primary-950-background-color {
    display: none;
}



.wp-block-button__link{
	text-transform: none;
}

.allpost a{
	text-transform: uppercase !important;
}

@media (max-width: 767px) {
	body header > .has-global-padding,
	body footer > .has-global-padding {
	    padding-right: var(--wp--style--root--padding-right) !important;
		padding-left: var(--wp--style--root--padding-left) !important; 
	}
	ul.wp-block-navigation__container.has-text-color.has-bbe-neutral-900-color.is-responsive.items-justified-left.is-style-underline.wp-block-navigation {
		width: 100%;
		padding-top:20px;
	}
	html.has-modal-open{
		overflow-x:hidden;
	}
	body .wp-block-navigation__responsive-container-close {
		right: 20px;
		top: 0px;
	}
}

h1.product_title.entry-title{
	color: var(--wp--preset--color--bbe-neutral-950);
}