/* =========================================================
   MONIKA FOTO — GŁÓWNY ARKUSZ STYLÓW
   Paleta: ciepły beż / pudrowy róż + śliwkowy / mauve
   Typografia: Cormorant Garamond (serif, nagłówki) + Jost (sans-serif)
   ========================================================= */

:root{
	--color-bg:            #FBF3EC;   /* jasny, ciepły beż */
	--color-bg-alt:        #F6E9E3;   /* pudrowy róż na przemienne sekcje */
	--color-card:          #FFFDF9;   /* karty — niemal biel z ciepłym odcieniem */
	--color-text:          #4A3238;   /* ciemny, przygaszony śliwkowy */
	--color-text-soft:     #7A6066;   /* śliwkowy, jaśniejszy do tekstu pomocniczego */
	--color-accent:        #8C5A68;   /* śliwkowy / mauve — akcent główny */
	--color-accent-dark:   #6E4451;   /* hover / ciemniejszy ton */
	--color-accent-soft:   #D9B8B0;   /* jasny róż-mauve, obrysy, tła subtelne */
	--color-border:        #E7D6CC;
	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--shadow-soft: 0 20px 45px -25px rgba(74,50,56,0.35);
	--shadow-card: 0 12px 30px -18px rgba(74,50,56,0.28);
	--font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--container-w: 1180px;
	--container-narrow-w: 760px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; }

.container{ max-width: var(--container-w); margin: 0 auto !important; padding: 0 28px !important; box-sizing: border-box !important; }
.container-narrow{ max-width: var(--container-narrow-w); margin: 0 auto !important; padding: 0 28px !important; box-sizing: border-box !important; }

/* Dodatkowa, bezpośrednia siatka bezpieczeństwa na samej treści — nawet gdyby coś
   nadpisało .container z zewnątrz, te elementy i tak będą miały własny margines. */
.entry-content, .offer-description, .story-content, .page-content,
.offer-body, .offer-gallery, .offer-faq, .offer-cta, .offer-related {
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}
@media (min-width: 600px){
	.entry-content, .offer-description, .story-content, .page-content,
	.offer-body, .offer-gallery, .offer-faq, .offer-cta, .offer-related {
		padding-left: 28px !important;
		padding-right: 28px !important;
	}
}
.center{ text-align: center; }

.serif{ font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.2px; }

h1, h2, h3{ font-family: var(--font-serif); font-weight: 400; color: var(--color-text); margin: 0 0 18px; }
h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05; }
h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; }
h3{ font-size: 1.5rem; }

.eyebrow{
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 0.78rem;
	color: var(--color-accent);
	margin: 0 0 14px;
}

/* Podstrony Historii: etykieta kategorii ("Historia Narzeczeńska" itp.) i cała treść
   poniżej (akapity, wstawione zdjęcia) są wyśrodkowane. Selektor oparty tylko o klasę
   nadrzędnego <article class="story-detail"> (unikalną dla Historii), żeby na pewno
   zadziałać niezależnie od dokładnego zagnieżdżenia elementów pomiędzy.
   Uwaga: gdy dana historia nie ma jeszcze przypisanej kategorii, ta etykieta pokazuje się
   jako .offer-lead (zajawka/excerpt) zamiast .eyebrow — dlatego celujemy w oba warianty. */
.story-detail .eyebrow,
.story-detail .offer-lead{ text-align: center !important; }
.story-detail .story-content{ text-align: center; }
.story-detail .story-content img,
.story-detail .story-content figure{ margin-left: auto; margin-right: auto; }

.section{ padding: 96px 0; }

/* ---------- Sekcja Instagram (strona główna) ---------- */
.section-instagram{ padding: 50px 0 96px; }
.instagram-heading-link{ display: block; text-decoration: none; text-align: center; margin-bottom: 26px; }
.instagram-heading{
	font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 4px;
	font-size: 0.95rem; font-weight: 600; color: var(--color-accent); margin: 0 0 6px;
}
.instagram-handle{ font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 1px; color: var(--color-text-soft); margin: 0; }
.instagram-grid{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
@media (min-width: 700px){ .instagram-grid{ grid-template-columns: repeat(6, 1fr); } }
.instagram-tile{ display: block; aspect-ratio: 1/1; overflow: hidden; position: relative; }
.instagram-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; }
.instagram-tile:hover img{ transform: scale(1.06); }
.section:nth-of-type(even){ background: var(--color-bg-alt); }
.section-heading{ max-width: 640px; margin: 0 auto 52px; }
.section-subtitle{ color: var(--color-text-soft); font-size: 1.05rem; }

.img-placeholder{
	width: 100%; height: 100%; min-height: 220px;
	background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-alt));
	border-radius: var(--radius-md);
}

/* -------------------- PRZYCISKI -------------------- */
.btn{
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 34px;
	border-radius: 999px;
	font-size: 0.92rem;
	letter-spacing: 0.5px;
	font-weight: 500;
	transition: all .3s ease;
	white-space: nowrap;
}
.btn-primary{ background: var(--color-accent); color: #fff; }
.btn-primary:hover{ background: var(--color-accent-dark); transform: translateY(-2px); }
.btn-outline{ border: 1px solid var(--color-accent); color: var(--color-accent); }
.btn-outline:hover{ background: var(--color-accent); color: #fff; }
.btn-small{ padding: 10px 22px; font-size: 0.82rem; }
.btn-block{ width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
	position: sticky; top: 0; z-index: 500;
	background: rgba(251, 243, 236, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
}
.header-inner{
	max-width: var(--container-w); margin: 0 auto; padding: 18px 28px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo-text{ font-family: var(--font-serif); font-size: 1.7rem; color: var(--color-text); letter-spacing: 0.5px; }
.logo-text em{ font-style: normal; color: var(--color-accent); }
.logo-text.small{ font-size: 1.4rem; }

.main-navigation{ display: none; }
@media (min-width: 992px){ .main-navigation{ display: block; } }

.primary-menu{ display: flex; align-items: center; gap: 6px; }
.primary-menu > .menu-item{ position: relative; }
.menu-link{
	display: inline-block; padding: 10px 16px;
	font-size: 0.95rem; font-weight: 400; color: var(--color-text);
	transition: color .25s ease;
}
.menu-link:hover{ color: var(--color-accent); }

.primary-menu .has-submenu > .submenu-toggle{ display: none; }

.mfoto-submenu{
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 240px;
	background: var(--color-card);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft);
	padding: 10px;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: all .25s ease;
}
.primary-menu .has-submenu:hover .mfoto-submenu,
.primary-menu .has-submenu:focus-within .mfoto-submenu{
	opacity: 1; visibility: visible; transform: translateY(0);
}
.mfoto-submenu li a{
	display: block; padding: 10px 14px; border-radius: var(--radius-sm);
	font-size: 0.9rem; color: var(--color-text);
}
.mfoto-submenu li a:hover{ background: var(--color-bg-alt); color: var(--color-accent); }

/* Mobile toggle */
.mobile-menu-toggle{
	display: flex; flex-direction: column; gap: 5px; padding: 10px;
}
.mobile-menu-toggle span{ width: 26px; height: 2px; background: var(--color-text); transition: all .3s ease; }
@media (min-width: 992px){
	.mobile-menu-toggle{ display: none; }
	.mobile-navigation{ display: none !important; }
}

.mobile-navigation{
	position: fixed;
	top: var(--mfoto-header-h, 70px);
	left: 0; right: 0; bottom: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--color-card);
	border-top: 1px solid var(--color-border);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	z-index: 501;
}
.mobile-navigation.open{
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease;
}
html.mfoto-nav-open, html.mfoto-nav-open body{ overflow: hidden; height: 100%; } /* blokuje przewijanie tła, gdy menu jest otwarte — przewija się tylko panel menu */
.mobile-menu{ padding: 10px 28px 40px; min-height: 100%; }
.mobile-menu > .menu-item > a{ display: block; padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); }
.accordion-head{ display: flex; align-items: center; justify-content: space-between; }
.accordion-toggle{ width: 36px; height: 36px; position: relative; flex-shrink: 0; }
.accordion-toggle span, .accordion-toggle::before{
	content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--color-text);
}
.accordion-toggle span{ transform: rotate(90deg); transition: transform .25s ease; }
.accordion-toggle[aria-expanded="true"] span{ transform: rotate(0deg); }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .3s ease; padding-left: 14px; }
.accordion-item.open .accordion-panel{ max-height: 2000px; } /* wystarczająco duży zapas, żeby żadna, nawet długa lista podpozycji się nie ucięła — realne przewijanie i tak zapewnia .mobile-navigation */
.accordion-panel li a{ display: block; padding: 10px 0; color: var(--color-text-soft); font-size: 0.95rem; }

.submenu-toggle{ width: 30px; height: 30px; position: relative; }
.submenu-toggle span{ position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: var(--color-text); }
.submenu-toggle span::before{ content:""; position:absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--color-text); transform: rotate(90deg); transition: transform .2s ease; }
.submenu-toggle[aria-expanded="true"] span::before{ transform: rotate(0); }

/* =========================================================
   HERO
   ========================================================= */
.hero-section{ padding: 64px 0 96px; }
.hero-grid{ display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 992px){ .hero-grid{ grid-template-columns: 1fr 1fr; gap: 64px; } }
.hero-title{ margin-bottom: 22px; }
.hero-lead{ color: var(--color-text-soft); font-size: 1.1rem; max-width: 460px; margin-bottom: 34px; }
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }
.hero-media img, .hero-placeholder{
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	max-width: 420px; max-height: 320px;
	margin: 0 auto;
	display: block;
}
@media (min-width: 992px){
	.hero-media img, .hero-placeholder{
		aspect-ratio: 4 / 3.4;
		max-width: 480px; max-height: 520px;
	}
}

/* =========================================================
   O MNIE
   ========================================================= */
.o-mnie-full .entry-content{ margin-top: 30px; text-align: left; }
.o-mnie-full .entry-content p{ color: var(--color-text-soft); }

/* =========================================================
   SLIDERY / KARUZELE (Swiper)
   ========================================================= */
.slider-section .swiper{ padding-bottom: 56px; }
.mfoto-swiper{ position: relative; }
.mfoto-card{
	background: var(--color-card);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	height: 100%;
	display: flex; flex-direction: column;
}
.mfoto-card-media{ display: block; aspect-ratio: 4/5; overflow: hidden; }
.mfoto-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mfoto-card:hover .mfoto-card-media img{ transform: scale(1.04); }
.mfoto-card-body{ padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mfoto-card-category{
	text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; color: var(--color-accent);
}
.mfoto-card-title{ font-size: 1.4rem; margin: 0; }
.mfoto-card-excerpt{ color: var(--color-text-soft); font-size: 0.92rem; flex: 1; }
.mfoto-card-price{ font-weight: 500; color: var(--color-accent-dark); }
.mfoto-card-body .btn{ align-self: flex-start; margin-top: 8px; }

.swiper-pagination-bullet{ background: var(--color-accent-soft); opacity: 1; }
.swiper-pagination-bullet-active{ background: var(--color-accent); }
.mfoto-swiper-nav{
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--color-card); box-shadow: var(--shadow-card);
	color: var(--color-accent);
}
.mfoto-swiper-nav::after{ font-size: 16px; }
.section-more{ margin-top: 40px; }

.section-opinie .swiper{ padding-bottom: 40px; }

/* ---------- Sekcja "Przed i po" (O mnie) ---------- */
.section-before-after .swiper{ padding-bottom: 40px; }
/* Slajdy mają szerokość "auto" (Swiper w trybie slidesPerView:'auto') — każde zdjęcie
   zachowuje swoje naturalne proporcje kadru, przy wspólnej, stałej wysokości rzędu. */
.mfoto-swiper-before-after .swiper-slide{ width: auto; height: 340px; }
/* Wyśrodkowanie "gdy elementów za mało na pełny rząd" obsługuje teraz Swiper natywnie
   przez opcję centerInsufficientSlides (main.js) — bezpieczniejsze niż CSS, bo nie psuje
   karuzel, w których elementów jest wystarczająco dużo, żeby faktycznie przewijać. */
.before-after-item{
	display: block; height: 100%; border-radius: var(--radius-sm); overflow: hidden;
	box-shadow: var(--shadow-card); cursor: zoom-in; position: relative;
}
.before-after-item img{ height: 100%; width: auto; display: block; object-fit: contain; }
.before-after-item::after{ content:""; position:absolute; inset:0; background: rgba(74,50,56,0); transition: background .2s ease; }
.before-after-item:hover::after{ background: rgba(74,50,56,0.15); }
@media (max-width: 600px){
	.mfoto-swiper-before-after .swiper-slide{ height: 240px; }
}
.opinia-card{
	background: var(--color-card); border-radius: var(--radius-md); padding: 32px 26px;
	box-shadow: var(--shadow-card); text-align: center; height: 100%;
}
.opinia-photo{
	width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%;
	overflow: hidden; box-shadow: var(--shadow-card);
}
.opinia-photo img{ width: 100%; height: 100%; object-fit: cover; }
.opinia-photo-placeholder{
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: var(--color-bg-alt); color: var(--color-accent);
	font-family: var(--font-serif); font-size: 1.8rem;
}
.opinia-author{
	font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-accent);
	margin-bottom: 18px; letter-spacing: 0.3px;
}
.opinia-author span{ color: var(--color-text-soft); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 400; }
.opinia-text{ font-family: var(--font-sans); font-size: 1rem; line-height: 1.75; color: var(--color-text-soft); }

/* =========================================================
   KONTAKT / FORMULARZ
   ========================================================= */
.kontakt-grid{ display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 20px; max-width: 640px; margin-left: auto; margin-right: auto; }
.kontakt-info{ text-align: center; }
.kontakt-info .footer-social{ justify-content: center; }
.kontakt-info ul{ margin-bottom: 26px; }
.kontakt-info li{ margin-bottom: 12px; color: var(--color-text-soft); }
.footer-social{ display: flex; gap: 18px; }
.footer-social a{ color: var(--color-accent); font-size: 0.9rem; letter-spacing: 0.4px; }
.footer-social a:hover{ color: var(--color-accent-dark); }

.mfoto-contact-form{ background: var(--color-card); padding: 36px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.form-row{ margin-bottom: 20px; }
.form-row label{ display: block; margin-bottom: 8px; font-size: 0.88rem; color: var(--color-text-soft); }
.form-row input, .form-row textarea{
	width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	background: var(--color-bg); font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-text);
}
.form-row input:focus, .form-row textarea:focus{ outline: none; border-color: var(--color-accent); }
.form-status{ min-height: 20px; font-size: 0.9rem; color: var(--color-accent-dark); }
.form-consent{ font-size: 0.78rem; line-height: 1.6; color: var(--color-text-soft); margin-top: 18px; }
.form-privacy-link{ margin-top: 8px; }
.form-privacy-link a{ font-size: 0.82rem; color: var(--color-accent); text-decoration: underline; }
.form-privacy-link a:hover{ color: var(--color-accent-dark); }

/* =========================================================
   PODSTRONY: OFERTA / PRODUKT / WARSZTAT / HISTORIA
   ========================================================= */
.offer-hero{ position: relative; padding-top: 40px; }
.offer-hero-media{ aspect-ratio: 16/8; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.offer-hero-media img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px){
	/* Na szerokich ekranach stały stosunek szerokości do wysokości robił banner coraz szerszy
	   i coraz krótszy wraz ze wzrostem szerokości okna — efekt mocno "rozjechanego", zbyt
	   przyciętego kadru. Zamiast tego ograniczamy realną wysokość zdjęcia niezależnie od
	   szerokości ekranu, dodajemy marginesy po bokach (czystszy wygląd, bez "pełnego bleedu")
	   i zamieniamy przycinanie (cover) na skalowanie z zachowaniem całego kadru (contain) —
	   zdjęcie się dopasowuje, ale nic z niego nie znika (np. głowa na górze).
	   Mobile (gdzie już dobrze wygląda) zostaje całkowicie bez zmian. */
	.offer-hero-media{
		aspect-ratio: auto; height: 58vh; min-height: 420px; max-height: 620px;
		max-width: var(--container-w); margin: 0 auto; box-sizing: border-box;
		background: var(--color-bg-alt);
	}
	.offer-hero-media img{ object-fit: cover; }
}
.offer-hero-text{ margin-top: -80px; position: relative; background: var(--color-card); border-radius: var(--radius-lg); padding: 44px 44px 34px; box-shadow: var(--shadow-soft); text-align: center; }
.offer-hero-text .hero-cta, .offer-hero-text .btn{ margin-left: auto; margin-right: auto; }
/* Karta z tytułem dzieli tę samą szerokość i te same marginesy co zdjęcie nad nią (.offer-hero-media),
   żeby ich lewa/prawa krawędź zawsze się pokrywały — inaczej (węższa karta na środku szerszego zdjęcia)
   wyglądało to na "rozjechane", mimo że oba elementy technicznie były wyśrodkowane. */
.offer-hero .offer-hero-text.container-narrow{ max-width: var(--container-w) !important; }
.offer-title{ margin: 10px 0 16px; }
.offer-lead{ color: var(--color-text-soft); font-size: 1.1rem; margin-bottom: 26px; }

.mfoto-breadcrumbs{ font-size: 0.82rem; color: var(--color-text-soft); margin-bottom: 18px; }
.mfoto-breadcrumbs a{ color: var(--color-accent); }
.mfoto-breadcrumbs span{ margin: 0 6px; }

.offer-body{ padding: 70px 0; }
.offer-body-grid{ display: grid; grid-template-columns: 1fr; gap: 50px; }
@media (min-width: 992px){ .offer-body-grid{ grid-template-columns: 1.5fr 1fr; } }
.offer-body-grid.offer-body-grid-full{ grid-template-columns: 1fr; }

.offer-benefits-full{ padding: 10px 0 75px !important; margin-top: 45px !important; }
.offer-benefits-full .offer-benefits{ background: var(--color-card); border-radius: var(--radius-md); padding: 30px 34px; box-shadow: var(--shadow-card); }
.offer-benefits-full .offer-benefits ul{ max-width: 480px; margin: 14px auto 0; }
.offer-description p{ color: var(--color-text-soft); }
.offer-sidebar{ display: flex; flex-direction: column; gap: 28px; }
.offer-sidebar-full{ display: flex; flex-direction: column; gap: 28px; }
.offer-sidebar-full.container-narrow{ padding-top: 60px !important; padding-bottom: 40px !important; }
.offer-price-box{
	background: var(--color-accent); color: #fff; border-radius: var(--radius-md); padding: 30px; text-align: center;
}
.offer-price-label{ display: block; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.offer-price-value{ display: block; font-family: var(--font-serif); font-size: 2rem; margin-bottom: 20px; }
.offer-price-box .btn-primary{ background: #fff; color: var(--color-accent); }
.offer-price-box .btn-primary:hover{ background: var(--color-bg); }
.offer-benefits{ background: var(--color-card); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-card); }
.offer-benefits ul{ margin-top: 14px; }
.offer-benefits li{ padding: 8px 0 8px 22px; position: relative; color: var(--color-text-soft); border-bottom: 1px solid var(--color-border); }
.offer-benefits li:last-child{ border-bottom: none; }
.offer-benefits li::before{ content: "✦"; position: absolute; left: 0; color: var(--color-accent); }

.offer-gallery{ padding-bottom: 70px; }
.offer-gallery-product-gap{ padding-bottom: 75px !important; }
.gallery-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
.gallery-item{ border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1/1; display: block; cursor: zoom-in; position: relative; }
.gallery-item::after{
	content: ""; position: absolute; inset: 0; background: rgba(74,50,56,0); transition: background .2s ease;
}
.gallery-item:hover::after{ background: rgba(74,50,56,0.15); }

/* ---------------- LIGHTBOX ---------------- */
.mfoto-lightbox-overlay{
	position: fixed; inset: 0; z-index: 900;
	background: rgba(30,20,22,0.92);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
	padding: 40px;
}
.mfoto-lightbox-overlay.open{ opacity: 1; visibility: visible; transition: opacity .25s ease; }
.mfoto-lightbox-img{
	max-width: 100%; max-height: 100%; border-radius: var(--radius-sm);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.mfoto-lightbox-close{
	position: absolute; top: 22px; right: 28px;
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,0.12); color: #fff; font-size: 28px; line-height: 1;
	border: none; cursor: pointer; transition: background .2s ease;
}
.mfoto-lightbox-close:hover{ background: rgba(255,255,255,0.25); }
.mfoto-lightbox-arrow{
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(255,255,255,0.12); color: #fff; font-size: 30px; line-height: 1;
	border: none; cursor: pointer; transition: background .2s ease;
	display: flex; align-items: center; justify-content: center;
}
.mfoto-lightbox-arrow:hover{ background: rgba(255,255,255,0.25); }
.mfoto-lightbox-prev{ left: 16px; }
.mfoto-lightbox-next{ right: 16px; }
html.mfoto-lightbox-open, html.mfoto-lightbox-open body{ overflow: hidden; }
@media (max-width: 600px){
	.mfoto-lightbox-overlay{ padding: 16px; }
	.mfoto-lightbox-close{ top: 12px; right: 12px; width: 40px; height: 40px; font-size: 24px; }
	.mfoto-lightbox-arrow{ width: 42px; height: 42px; font-size: 24px; }
	.mfoto-lightbox-prev{ left: 6px; }
	.mfoto-lightbox-next{ right: 6px; }
}
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; }

.offer-faq{ padding-bottom: 70px; }
.offer-faq.container-narrow{ padding-bottom: 40px !important; }
.faq-list{ margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.faq-item{ background: var(--color-card); border-radius: var(--radius-sm); padding: 20px 24px; box-shadow: var(--shadow-card); }
.faq-item summary{ cursor: pointer; font-weight: 500; }
.faq-item p{ color: var(--color-text-soft); margin: 14px 0 0; }

.offer-cta{ padding: 70px 0; }
.offer-cta.container-narrow{ padding-top: 0 !important; padding-bottom: 40px !important; }
.offer-related{ padding-bottom: 90px; }
.offer-related.container{ padding-top: 0 !important; }
.story-detail .offer-cta{ margin-top: 44px; }
.story-detail .offer-related{ margin-top: 44px; }
.story-detail .related-title{ text-align: center; display: block; }
.related-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
@media (min-width: 768px){ .related-grid{ grid-template-columns: repeat(3, 1fr); } }
.related-card{ display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-card); }
.related-thumb{ aspect-ratio: 4/5; overflow: hidden; }
.related-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.related-title{ display: block; padding: 16px; font-family: var(--font-serif); font-size: 1.1rem; }

/* =========================================================
   ARCHIWA / LISTY
   ========================================================= */
.archive-hero{ padding: 60px 0 20px; }
.archive-grid, .post-grid{ display: grid; grid-template-columns: 1fr; gap: 30px; padding: 30px 0 80px; }
@media (min-width: 700px){
	.archive-grid, .post-grid{
		grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
		justify-content: center; /* gdy kart jest mniej niż miejsca w rzędzie, są wyśrodkowane, a nie przyklejone do lewej */
	}
}
.archive-card, .post-card{ background: var(--color-card); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.archive-card-thumb, .post-card-thumb{ display: block; aspect-ratio: 4/5; overflow: hidden; }
.archive-card-thumb img, .post-card-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.archive-card-body, .post-card-body{ padding: 24px; text-align: center; }
.archive-card-excerpt, .post-card-excerpt{ color: var(--color-text-soft); font-size: 0.92rem; margin-bottom: 16px; }

/* =========================================================
   STRONA GENERYCZNA / POST
   ========================================================= */
.page-generic, .site-main.container-narrow{ padding: 60px 0 90px; }
.page-header{ margin-bottom: 30px; }
.page-thumb{ border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; aspect-ratio: 16/9; }
.page-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.entry-content p{ color: var(--color-text-soft); }

/* Strona O mnie: zdjęcia i tekst wstawione w treści przez blok "Kolumny" w edytorze
   WordPressa mają subtelne, spójne ze stroną stylowanie (zaokrąglenie, cień, odstępy) —
   dzięki temu możesz samodzielnie ułożyć dowolny układ (np. zdjęcie w jednej kolumnie,
   tekst w drugiej), przeciągając bloki w edytorze, a wygląd i tak będzie pasował do reszty. */
.o-mnie-full .entry-content .wp-block-columns{
	gap: 40px; margin: 28px 0;
	display: flex; flex-wrap: wrap; /* WordPress domyślnie już to ustawia, ale wymuszamy na wszelki wypadek */
}
.o-mnie-full .entry-content .wp-block-column{
	min-width: 0; /* KLUCZOWE: bez tego zdjęcie potrafi rozepchnąć kolumnę szerzej niż dostępne miejsce */
	flex: 1 1 320px; /* każda kolumna kurczy się elastycznie, zamiast "rozjeżdżać" układ */
}
.o-mnie-full .entry-content .wp-block-column img{
	border-radius: var(--radius-md); box-shadow: var(--shadow-card);
	width: 100%; height: auto; max-width: 100%; display: block;
}
@media (max-width: 700px){
	.o-mnie-full .entry-content .wp-block-columns{ gap: 20px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: #F1E2DA; border-top: 1px solid var(--color-border); padding: 80px 0 0; }
.footer-inner{
	max-width: var(--container-w); margin: 0 auto; padding: 0 28px 60px;
	display: grid; grid-template-columns: 1fr; gap: 44px;
}
@media (min-width: 768px){ .footer-inner{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand p{ color: var(--color-text-soft); margin: 16px 0 20px; }
.footer-widget-title{ font-size: 1.1rem; margin-bottom: 18px; }
.footer-menu li, .footer-contact li{ margin-bottom: 10px; color: var(--color-text-soft); }
.footer-menu a:hover{ color: var(--color-accent); }
.footer-bottom{ border-top: 1px solid var(--color-border); padding: 22px 28px; text-align: center; font-size: 0.82rem; color: var(--color-text-soft); }

/* =========================================================
   WOOCOMMERCE — dopasowanie do estetyki motywu
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
	background: var(--color-card); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-card);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
	background: var(--color-accent); color: #fff; border-radius: 999px; padding: 14px 30px; border: none; font-family: var(--font-sans);
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--color-accent-dark); }
.woocommerce span.price{ color: var(--color-accent-dark); }

/* =========================================================
   SKIP LINK / ACCESSIBILITY
   ========================================================= */
.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: #fff; padding: 12px 20px; z-index: 999; }
.skip-link:focus{ left: 10px; top: 10px; }

@media (max-width: 600px){
	.section{ padding: 64px 0; }
	.offer-hero-text{ padding: 30px 24px; margin-top: -50px; }
	.header-inner{ padding: 14px 20px; }
}


/* =========================================================
   GUTENBERG / DWIE KOLUMNY I GALERIE OBOK SIEBIE (DESKTOP & MOBILE)
   ========================================================= */
.entry-content .wp-block-columns,
.offer-description .wp-block-columns,
.story-content .wp-block-columns,
.page-content .wp-block-columns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 16px !important;
	margin: 24px 0 !important;
	align-items: stretch !important;
}

.entry-content .wp-block-columns > .wp-block-column,
.offer-description .wp-block-columns > .wp-block-column,
.story-content .wp-block-columns > .wp-block-column,
.page-content .wp-block-columns > .wp-block-column {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.entry-content .wp-block-columns img,
.offer-description .wp-block-columns img,
.story-content .wp-block-columns img,
.page-content .wp-block-columns img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	display: block !important;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	object-fit: cover;
}

/* Wymuszenie 2 kolumn dla galerii blokowych Gutenberg również na urządzeniach mobilnych */
.entry-content .wp-block-gallery.columns-2,
.offer-description .wp-block-gallery.columns-2,
.story-content .wp-block-gallery.columns-2,
.wp-block-gallery.columns-2,
.blocks-gallery-grid.columns-2 {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 14px !important;
}

.entry-content .wp-block-gallery img,
.offer-description .wp-block-gallery img,
.story-content .wp-block-gallery img {
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
}

@media (max-width: 600px) {
	.entry-content .wp-block-columns,
	.offer-description .wp-block-columns,
	.story-content .wp-block-columns,
	.page-content .wp-block-columns {
		gap: 10px !important;
		margin: 16px 0 !important;
	}
	.entry-content .wp-block-gallery.columns-2,
	.offer-description .wp-block-gallery.columns-2,
	.story-content .wp-block-gallery.columns-2,
	.wp-block-gallery.columns-2,
	.blocks-gallery-grid.columns-2 {
		gap: 10px !important;
	}
}


/* Wyjątek dla strony / sekcji "O mnie" na telefonach: tekst pod zdjęciem (układ pionowy) */
@media (max-width: 768px) {
	.section-o-mnie .entry-content .wp-block-columns,
	.o-mnie-full .entry-content .wp-block-columns,
	body.page-slug-o-mnie .entry-content .wp-block-columns,
	body.page-id-o-mnie .entry-content .wp-block-columns,
	.section-o-mnie .wp-block-columns,
	.o-mnie-full .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: wrap !important;
		gap: 20px !important;
	}

	.section-o-mnie .entry-content .wp-block-column,
	.o-mnie-full .entry-content .wp-block-column,
	.section-o-mnie .wp-block-column,
	.o-mnie-full .wp-block-column {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.section-o-mnie .entry-content .wp-block-column img,
	.o-mnie-full .entry-content .wp-block-column img {
		max-width: 320px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


.related-card { text-align: center; }
.related-card .related-title { display: block; padding: 18px 16px 4px; font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.25; margin: 0; }
.related-card .related-subtitle { display: block; padding: 0 16px 18px; font-family: var(--font-sans); font-size: 0.88rem; color: var(--color-text-soft); }


/* =========================================================
   PRAWIDŁOWE ODSTĘPY MIĘDZY AKAPITAMI I OBSŁUGA PUSTYCH LINII
   ========================================================= */
p {
	margin: 0 0 1.4em 0;
}

.entry-content p,
.offer-description p,
.story-content p,
.page-content p {
	margin: 0 0 1.4em 0 !important;
	line-height: 1.8;
}

/* Zachowanie pustych linii i akapitów dodanych w edytorze */
.entry-content p:empty,
.offer-description p:empty,
.story-content p:empty,
.page-content p:empty,
p:empty {
	min-height: 1.5em !important;
	display: block !important;
	margin-bottom: 1.4em !important;
}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.offer-description h1, .offer-description h2, .offer-description h3, .offer-description h4,
.story-content h1, .story-content h2, .story-content h3, .story-content h4 {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
}

.wp-block-spacer {
	display: block !important;
}


.form-terms-text {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--color-text-soft);
	margin-top: 10px;
	margin-bottom: 6px !important;
}
.form-terms-text a {
	color: var(--color-accent);
	text-decoration: underline;
}
.form-terms-text a:hover {
	color: var(--color-accent-dark);
}

.form-privacy-link,
.form-terms-link {
	margin-top: 4px;
	margin-bottom: 4px !important;
}
.form-privacy-link a,
.form-terms-link a {
	font-size: 0.82rem;
	color: var(--color-accent);
	text-decoration: underline;
}
.form-privacy-link a:hover,
.form-terms-link a:hover {
	color: var(--color-accent-dark);
}


.form-consent a,
.form-terms-text a {
	color: var(--color-accent) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}
.form-consent a:hover,
.form-terms-text a:hover {
	color: var(--color-accent-dark) !important;
}


/* =========================================================
   STRZAŁKI SLIDERA NA DESKTOPIE POZA KARTAMI / NA MOBILE WEWNĄTRZ
   ========================================================= */
@media (min-width: 1024px) {
	.slider-section .swiper,
	.section-opinie .swiper {
		overflow: visible !important;
	}

	.slider-section .swiper-button-prev,
	.section-opinie .swiper-button-prev {
		left: -58px !important;
		top: 45% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}

	.slider-section .swiper-button-next,
	.section-opinie .swiper-button-next {
		right: -58px !important;
		top: 45% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
}

@media (min-width: 1024px) and (max-width: 1280px) {
	.slider-section .swiper-button-prev,
	.section-opinie .swiper-button-prev {
		left: -32px !important;
	}

	.slider-section .swiper-button-next,
	.section-opinie .swiper-button-next {
		right: -32px !important;
	}
}


/* =========================================================
   WRAPPER I STRZAŁKI SLIDERA (CLIPPING SŁAJDÓW + POZYCJA STRZAŁEK)
   ========================================================= */
.mfoto-slider-wrap {
	position: relative;
	width: 100%;
}

/* Swiper zachowuje overflow: hidden, dzięki czemu na desktopie widać dokładnie 4 karty */
.mfoto-swiper {
	overflow: hidden !important;
	position: relative;
}

.mfoto-swiper-nav {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-card) !important;
	box-shadow: var(--shadow-card);
	color: var(--color-accent) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 20;
	position: absolute;
	cursor: pointer;
	transition: all 0.25s ease;
}
.mfoto-swiper-nav::after {
	font-size: 16px !important;
	font-weight: 700;
}

/* DESKTOP (>= 1024px): strzałki na zewnątrz 4 kart po bokach */
@media (min-width: 1024px) {
	.mfoto-slider-wrap .swiper-button-prev {
		left: -58px !important;
		top: 40% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
	.mfoto-slider-wrap .swiper-button-next {
		right: -58px !important;
		top: 40% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
}

@media (min-width: 1024px) and (max-width: 1280px) {
	.mfoto-slider-wrap .swiper-button-prev {
		left: -32px !important;
	}
	.mfoto-slider-wrap .swiper-button-next {
		right: -32px !important;
	}
}

/* MOBILE / TABLET (< 1024px): strzałki wewnątrz kart przy krawędziach */
@media (max-width: 1023px) {
	.mfoto-slider-wrap .swiper-button-prev {
		left: 8px !important;
		top: 36% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
	.mfoto-slider-wrap .swiper-button-next {
		right: 8px !important;
		top: 36% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
}


/* =========================================================
   WRAPPER I STRZAŁKI SLIDERA (DOKŁADNIE 4 KARTY + STRZAŁKI POZA KARTAMI)
   ========================================================= */
.mfoto-slider-wrap {
	position: relative;
	width: 100%;
}

/* Swiper ODCINA wszystko poza widocznym obszarem (dokładnie 4 karty na desktopie) */
.mfoto-swiper,
.slider-section .swiper,
.section-opinie .swiper {
	overflow: hidden !important;
	position: relative;
	padding-bottom: 50px !important;
}

.mfoto-swiper-nav {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: var(--color-card) !important;
	box-shadow: 0 6px 18px rgba(74,50,56,0.2) !important;
	color: var(--color-accent) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 20 !important;
	position: absolute !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	border: 1px solid var(--color-border) !important;
}
.mfoto-swiper-nav::after {
	font-size: 15px !important;
	font-weight: 700 !important;
}
.mfoto-swiper-nav:hover {
	background: #fff !important;
	color: var(--color-accent-dark) !important;
	transform: translateY(-50%) scale(1.08) !important;
}

/* DESKTOP (>= 1200px): dokładnie 4 karty, strzałki na zewnątrz kart */
@media (min-width: 1200px) {
	.mfoto-slider-wrap .swiper-button-prev {
		left: -58px !important;
		top: 40% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
	.mfoto-slider-wrap .swiper-button-next {
		right: -58px !important;
		top: 40% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.mfoto-slider-wrap .swiper-button-prev {
		left: -32px !important;
		top: 40% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
	.mfoto-slider-wrap .swiper-button-next {
		right: -32px !important;
		top: 40% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
}

/* MOBILE / TABLET (< 1024px): strzałki wewnątrz kart przy krawędziach */
@media (max-width: 1023px) {
	.mfoto-slider-wrap .swiper-button-prev {
		left: 8px !important;
		top: 36% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
	.mfoto-slider-wrap .swiper-button-next {
		right: 8px !important;
		top: 36% !important;
		transform: translateY(-50%) !important;
		margin-top: 0 !important;
	}
}


/* =========================================================
   3 RAMKI / PAKIETY W OFERCIE
   ========================================================= */
.packages-grid-offer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 20px;
}
.packages-grid-offer .package-box {
	background: var(--color-card);
	border-radius: var(--radius-md);
	padding: 30px 24px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-border);
}
.packages-grid-offer .package-title {
	font-size: 1.4rem;
	color: var(--color-text);
	margin-bottom: 20px;
}
.packages-grid-offer .package-list {
	margin-top: 10px;
}
.packages-grid-offer .package-list li {
	padding: 8px 0 8px 22px;
	position: relative;
	color: var(--color-text-soft);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.95rem;
}
.packages-grid-offer .package-list li:last-child {
	border-bottom: none;
}
.packages-grid-offer .package-list li::before {
	content: "✦";
	position: absolute;
	left: 0;
	color: var(--color-accent);
}
@media (max-width: 992px) {
	.packages-grid-offer {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* =========================================================
   3 RAMKI / PAKIETY W OFERCIE (CIEMNIEJSZY ODIEŃ TŁA)
   ========================================================= */
.packages-section-wrapper {
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	margin-top: 30px;
	box-shadow: var(--shadow-card);
}
.packages-grid-offer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.packages-grid-offer .package-box {
	background: var(--color-card);
	border-radius: var(--radius-md);
	padding: 30px 24px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-border);
}
.packages-grid-offer .package-title {
	font-size: 1.4rem;
	color: var(--color-text);
	margin-bottom: 20px;
}
.packages-grid-offer .package-list {
	margin-top: 10px;
}
.packages-grid-offer .package-list li {
	padding: 8px 0 8px 22px;
	position: relative;
	color: var(--color-text-soft);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.95rem;
}
.packages-grid-offer .package-list li:last-child {
	border-bottom: none;
}
.packages-grid-offer .package-list li::before {
	content: "✦";
	position: absolute;
	left: 0;
	color: var(--color-accent);
}
@media (max-width: 992px) {
	.packages-section-wrapper {
		padding: 24px 16px;
	}
	.packages-grid-offer {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* =========================================================
   3 RAMKI / PAKIETY W OFERCIE (CIEMNIEJSZY ODIEŃ TŁA)
   ========================================================= */
.packages-section-wrapper {
	background: var(--color-bg-alt) !important;
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	margin-top: 30px;
	box-shadow: var(--shadow-card);
}
.packages-grid-offer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.packages-grid-offer .package-box {
	background: var(--color-card);
	border-radius: var(--radius-md);
	padding: 30px 24px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-border);
}
.packages-grid-offer .package-title {
	font-size: 1.4rem;
	color: var(--color-text);
	margin-bottom: 20px;
}
.packages-grid-offer .package-list {
	margin-top: 10px;
}
.packages-grid-offer .package-list li {
	padding: 8px 0 8px 22px;
	position: relative;
	color: var(--color-text-soft);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.95rem;
}
.packages-grid-offer .package-list li:last-child {
	border-bottom: none;
}
.packages-grid-offer .package-list li::before {
	content: "✦";
	position: absolute;
	left: 0;
	color: var(--color-accent);
}
@media (max-width: 992px) {
	.packages-section-wrapper {
		padding: 24px 16px;
	}
	.packages-grid-offer {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}





/* Styl dla wyróżnionego bloku tekstu (np. ramka z ciemniejszym tłem w edytorze) */
.entry-content .mfoto-highlight-box,
.offer-description .mfoto-highlight-box,
.wp-block-group.mfoto-highlight-box {
	background: var(--color-bg-alt) !important;
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	margin: 30px 0;
	box-shadow: var(--shadow-card);
}


/* Poprawka: wyśrodkowanie i rozmiar logotypów (góra i dół) */
.site-branding img, .site-logo img, .custom-logo {
    max-height: 70px;
    width: auto;
    display: inline-block;
}
.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-center-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
}
.footer-center-logo img,
.footer-center-logo .custom-logo {
    display: block !important;
    margin: 0 auto !important;
    max-height: 80px !important;
    width: auto !important;
}
@media screen and (max-width: 768px) {
    .site-footer, .footer-inner, .footer-col, .footer-links, .footer-col-title {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* Niezawodny poziom układ karuzeli Przed i po */
.mfoto-swiper-before-after {
    overflow: hidden !important;
}
.mfoto-swiper-before-after .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}
.mfoto-swiper-before-after .swiper-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    height: 340px !important;
}
.before-after-item {
    display: block !important;
    height: 100% !important;
}
.before-after-item img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}


/* Widoczność i pozycjonowanie strzałek w karuzeli Przed i po */
.section-before-after {
    position: relative;
}
.section-before-after .mfoto-swiper {
    overflow: visible !important;
}
.section-before-after .swiper-button-prev {
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.section-before-after .swiper-button-next {
    right: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
@media (max-width: 768px) {
    .section-before-after .swiper-button-prev { left: 4px !important; }
    .section-before-after .swiper-button-next { right: 4px !important; }
}


/* Karuzela Przed i po — dopracowane tło i strzałki */
.section-before-after {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    padding: 60px 30px;
    margin: 40px 0;
    box-shadow: var(--shadow-card);
    position: relative;
}
.section-before-after .container {
    max-width: 100% !important;
    padding: 0 !important;
}
.mfoto-swiper-before-after {
    overflow: hidden !important;
    position: relative;
}
.mfoto-swiper-before-after .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}
.mfoto-swiper-before-after .swiper-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    height: 340px !important;
}
.before-after-item {
    display: block !important;
    height: 100% !important;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}
.before-after-item img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
}

/* Eleganckie okrągłe strzałki nawigacji */
.section-before-after .mfoto-swiper-nav {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: var(--color-card) !important;
    box-shadow: 0 6px 18px rgba(74,50,56,0.2) !important;
    color: var(--color-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    border: 1px solid var(--color-border) !important;
    transition: all 0.25s ease !important;
}
.section-before-after .mfoto-swiper-nav:hover {
    background: #fff !important;
    color: var(--color-accent-dark) !important;
    transform: translateY(-50%) scale(1.08) !important;
}
.section-before-after .swiper-button-prev {
    left: -10px !important;
}
.section-before-after .swiper-button-next {
    right: -10px !important;
}
@media (min-width: 1200px) {
    .section-before-after .swiper-button-prev {
        left: -30px !important;
    }
    .section-before-after .swiper-button-next {
        right: -30px !important;
    }
}
@media (max-width: 768px) {
    .section-before-after {
        padding: 40px 16px;
    }
    .section-before-after .swiper-button-prev {
        left: 4px !important;
    }
    .section-before-after .swiper-button-next {
        right: 4px !important;
    }
}


/* Wyśrodkowanie karuzeli Przed i po oraz ikony strzałek SVG */
.section-before-after .mfoto-swiper-before-after {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden !important;
}

@media (min-width: 992px) {
    .section-before-after .mfoto-swiper-before-after {
        max-width: fit-content;
        overflow: visible !important;
    }
}

.section-before-after .swiper-wrapper {
    justify-content: flex-start; /* Domyślnie startuje od lewej na mobile */
}

/* Wymuszona stabilna szerokość slajdu na mobile - zapobiega błędom startowym Swipera */
@media (max-width: 768px) {
    .mfoto-swiper-before-after .swiper-slide {
        width: 280px !important;
        max-width: 80vw !important;
        flex-shrink: 0 !important;
    }
}

/* Ikony strzałek SVG dla przycisków karuzeli */
.section-before-after .swiper-button-prev::after,
.section-before-after .swiper-button-next::after {
    content: '' !important;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.section-before-after .swiper-button-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C5A68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.section-before-after .swiper-button-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C5A68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}


/* Poprawka dotykowa: zwolnienie interakcji z nakładkami w karuzeli Przed i po */
.before-after-item::after {
    pointer-events: none !important;
}
.section-before-after .mfoto-swiper-nav {
    pointer-events: auto !important;
    z-index: 30 !important;
}
.mfoto-swiper-before-after {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
}
/* Idealne dopasowanie zdjęć w karuzeli "Przed i po" na telefonach - likwidacja obcinania */
@media (max-width: 768px) {
    .mfoto-swiper-before-after .swiper-slide {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important; /* Odblokowanie sztywnej wysokości, slajd rośnie ze zdjęciem */
    }
    
    .before-after-item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        box-shadow: none !important;
        width: 100% !important;
        height: auto !important; /* Odblokowanie wysokości ramki, aby nie ucinać napisów Przed i Po */
        padding: 10px 0; /* Minimalny odstęp pionowy, by cień zdjęcia ładnie wyglądał */
    }

    .before-after-item img {
        width: 100% !important;
        height: auto !important; /* Zdjęcie zachowuje naturalne proporcje w 100% widoczności */
        object-fit: contain !important;
        border-radius: var(--radius-sm, 8px);
        box-shadow: var(--shadow-card);
    }
}
/* Zmiana ikonek na liście pakietów na gwiazdki */
.packages-grid-offer .package-list li::before {
    content: "★" !important;
    font-size: 14px !important;
    top: 1px !important;
}