/* ============================================================================
 * mobile.css - mobile/tablet shim dla mundiczarter.pl
 * ----------------------------------------------------------------------------
 * Cel: poprawic mobile-friendly score Google + uzytecznosc na telefonie
 *      bez zadnej zmiany wygladu desktopu (>=1020px).
 *
 * Strategia bezpieczenstwa:
 *  - CALA tresc tego pliku jest w @media (max-width: 1019px) lub mniejsze.
 *  - Desktop (>=1020px) nie widzi tych regul.
 *  - Plik dolaczany w index.tpl PO style.css - wygrywa kaskada.
 *  - Rollback = usun jedna linie <link> w index.tpl.
 *
 * UWAGA dot. body.class:
 *  body.sub jest ustawiane gdy !$is_main, ale $is_main przekazywane jest
 *  TYLKO przez main.module.php. Na startpage uzywany jest page.module.php
 *  (bo ISDEFAULT=true), wiec body ma class="sub" rowniez na "/".
 *  Z tego powodu identyfikujemy startpage przez obecnosc unikalnych elementow
 *  HTML (#header-menu, #left + #right jako dzieci #content, #weather, #ports,
 *  .fb-wrapper, #lm), ktore istnieja WYLACZNIE na startpage.tpl.
 *
 * Priorytety wg klienta:
 *  1. Menu hamburger - kompaktowe, overlay (nie pcha h1)
 *  2. Strona jachtu - rezerwacja MUSI dzialac (sticky CTA, czytelne formularze)
 *  3. Strona glowna - tekst + wyszukiwarka + last minute, kafelki male 3 obok siebie
 * ========================================================================== */


/* Desktop fallback: hamburger + strap NIGDY na desktopie (poza media query). */
.mobile-burger,
.mobile-burger-strap {
	display: none;
}

/* Mobile-only menu items (login/wyloguj/moje konto) - hidden na desktopie.
   Na desktopie te akcje sa w wrapper.topcontent (gornym pasku), na mobile
   wrapper.topcontent jest hidden, wiec dodajemy je do menu hamburger. */
li.mobile-login {
	display: none;
}

/* === Przycisk "Zarezerwuj jacht" na samej gorze strony jachtu ===
   Wyswietlany na PC i mobile. Klik scrolluje smooth do kalendarza
   (id="reserve-calendar-anchor"). */
.reserve-top-wrap {
	text-align: center;
	padding: 16px 15px 6px 15px;
	background: transparent;
}
/* Scroll-margin: gdy scrollIntoView, kalendarz nie chowa sie pod
   sticky hamburgerem. */
#reserve-calendar-anchor {
	scroll-margin-top: 16px;
}
@media (max-width: 1019px) {
	#reserve-calendar-anchor {
		scroll-margin-top: 68px;
	}
}
/* Gorny przycisk NIE uzywa .reserve (widac site_*.js .reserve click).
   Styl samodzielny na a.reserve-cta-top. */
a.reserve-cta-top {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: auto;
	width: auto;
	min-width: 220px;
	max-width: 340px;
	min-height: 0;
	padding: 11px 22px;
	background: #ff9e00;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	margin: 0 auto;
}
a.reserve-cta-top:hover {
	background: #ffb030;
}
a.reserve-cta-top img {
	position: static;
	top: auto;
	left: auto;
	padding: 0;
	width: 18px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
}
a.reserve-cta-top span {
	position: static;
	top: auto;
	left: auto;
	font-size: 14px;
	display: inline-block;
	vertical-align: middle;
}

/* Sticky CTA - PC pokazuje wersje pod cala sekcja (.send-desktop-only),
   mobile pokazuje wersje zaraz po kalendarzu (.send-mobile-only).
   Domyslnie (desktop) ukrywamy mobile. */
.send.send-mobile-only {
	display: none;
}


/* ============================================================
 * BREAKPOINT 1: tablet i mniej (<= 1019px)
 * ============================================================ */
@media (max-width: 1019px) {

	/* --- 0. NIE-OVERFLOW HORIZONTAL --- */
	html, body {
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* --- 1. GLOWNE WRAPPERY 980px -> 100% --- */
	div.wrapper,
	div#mdata,
	div#yachts,
	div#actions div#text,
	div#footer div#fcontent,
	div#footer div#fcontent div#fbox div.content,
	.activationblock {
		width: 100% !important;
		max-width: 980px !important;
		box-sizing: border-box !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}


	/* ============================================================
	 * 2. HAMBURGER + MENU (overlay)
	 * ============================================================ */

	/* Stary header bar (logo + 5 blokow + g-rating) - chowamy na mobile */
	div.wrapper.topcontent {
		display: none !important;
	}

	/* Hamburger header — flex layout, samodostosowujacy.
	   [hamburger] [logo] [title (flex)] [actions]
	   Tytul wypelnia pozostala przestrzen, kazdy element bierze naturalna szerokosc.
	   Brak absolutnego pozycjonowania ani vw-paddingu => brak nakladania na zadnej szerokosci. */
	.mobile-burger {
		display: flex !important;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: 58px;
		padding: 4px 8px 14px;
		background: #ffffff;
		border-bottom: 0;
		box-sizing: border-box;
		position: sticky;
		top: 0;
		z-index: 1100;
		overflow: hidden;
	}
	/* Dekoracyjny niebieski pas „fali" przy dolnej krawedzi — pelna szerokosc, bez matematyki. */
	.mobile-burger-wave-fill {
		display: block !important;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 12px;
		background: linear-gradient(to bottom, #2b8ecc 0%, #2685c6 42%, #2480be 100%);
		pointer-events: none;
		z-index: 0;
	}
	.mobile-burger-button {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
		color: #005789;
		position: relative;
		z-index: 2;
	}
	.mobile-burger-button .bar,
	.mobile-burger-button .bar::before,
	.mobile-burger-button .bar::after {
		content: "";
		display: block;
		width: 24px;
		height: 3px;
		background: #005789;
		border-radius: 2px;
		position: relative;
		transition: transform 0.2s, top 0.2s, opacity 0.2s, background 0.2s;
	}
	.mobile-burger-button .bar::before {
		position: absolute;
		top: -8px;
		left: 0;
	}
	.mobile-burger-button .bar::after {
		position: absolute;
		top: 8px;
		left: 0;
	}
	.mobile-burger-button[aria-expanded="true"] .bar {
		background: transparent;
	}
	.mobile-burger-button[aria-expanded="true"] .bar::before {
		top: 0;
		transform: rotate(45deg);
	}
	.mobile-burger-button[aria-expanded="true"] .bar::after {
		top: 0;
		transform: rotate(-45deg);
	}
	.mobile-burger-logo {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		padding: 0;
		margin: 0;
		position: relative;
		z-index: 2;
	}
	.mobile-burger-logo .mobile-burger-logo-main {
		display: block !important;
		width: auto;
		max-width: none;
		height: clamp(36px, 11vw, 56px);
		object-fit: contain;
	}
	a.mobile-burger-title {
		flex: 1 1 0;
		min-width: 0;
		font-family: "Open Sans", Arial, sans-serif;
		font-size: clamp(14px, 4.6vw, 22px);
		font-weight: 800;
		color: #41ace9;
		text-decoration: none;
		text-align: center;
		line-height: 1.15;
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-tap-highlight-color: transparent;
		position: relative;
		z-index: 2;
	}
	a.mobile-burger-title:active {
		opacity: 0.88;
	}
	.mobile-burger-actions {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 2px;
		position: relative;
		z-index: 2;
	}
	.mobile-burger-mail-icon {
		display: block;
	}
	.mobile-burger-phone,
	.mobile-burger-mail {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		box-sizing: border-box;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #005789;
		text-decoration: none;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}
	.mobile-burger-phone:focus-visible,
	.mobile-burger-mail:focus-visible {
		outline: 2px solid #1460b4;
		outline-offset: 2px;
	}

	/* Niski viewport (np. telefon w poziomie) — kompaktowy pasek. */
	@media (max-height: 520px) {
		.mobile-burger {
			min-height: 48px;
			padding: 2px 6px 10px;
		}
		.mobile-burger-wave-fill {
			height: 8px;
		}
		.mobile-burger-logo .mobile-burger-logo-main {
			height: clamp(28px, 7vh, 42px);
		}
		a.mobile-burger-title {
			font-size: clamp(13px, 3vw, 18px);
		}
		div#menu.is-open {
			top: 48px !important;
		}
	}
	div#menu {
		display: none !important;
		position: static !important;
		/* Ten sam gradient co lewa belka / fala (--mc-wave-grad) */
		background: linear-gradient(to bottom, #2b8ecc 0%, #2685c6 42%, #2480be 100%) !important;
		background-color: #2685c6 !important;
		height: auto !important;
		width: 100% !important;
	}

	/* Nawigacja po otwarciu: overlay tuz pod .mobile-burger (min-height 58 + padding w box-sizing; top 64 zostawial przeswit). */
	div#menu.is-open {
		display: block !important;
		position: fixed !important;
		top: 58px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 1050 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}
	div#menu div#mdata {
		padding: 0 !important;
		width: 100% !important;
	}
	div#menu div.menucontent {
		float: none !important;
		height: auto !important;
		display: block !important;
	}
	div#menu ul {
		display: block !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
	}
	div#menu ul li {
		float: none !important;
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}
	div#menu ul li:first-child:before,
	div#menu ul li:last-child:after {
		display: none !important;
	}
	div#menu ul li a {
		display: block !important;
		padding: 14px 16px !important;
		min-height: 48px !important;
		box-sizing: border-box !important;
		font-size: 14px !important;
		border: 0 !important;
		color: #fff !important;
		line-height: 20px !important;
	}

	/* Mobile-only menu items (login/wyloguj/moje konto) - widoczne tylko w
	   menu hamburger na mobile. Wyrozniamy zoltym akcentem zeby uzytkownik
	   wiedzial ze to akcja konta, nie zwykly link nawigacyjny. */
	div#menu ul li.mobile-login {
		display: block !important;
		background: rgba(0, 0, 0, 0.18) !important;
		border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
	}
	div#menu ul li.mobile-login a {
		color: #ffd47b !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		cursor: pointer !important;
	}


	/* ============================================================
	 * 3. STRONA GLOWNA (rozpoznana przez obecnosc #header-menu / #left+#right)
	 * Te elementy istnieja TYLKO w startpage.tpl, wiec selektor globalny
	 * (bez body.sub) jest bezpieczny dla pozostalych stron.
	 * ============================================================ */

	/* Hero startpage mobile: prosty pas + object-fit (bez scale/tla). */
	div#photo {
		position: relative;
		margin-top: 0 !important;
		overflow: hidden !important;
		height: 220px !important;
	}
	div#photo img {
		width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center 38% !important;
		margin: 0 !important;
		display: block !important;
	}
	div#photo h1.page-h1 {
		top: 2px !important;
		bottom: auto !important;
		left: 8px !important;
		right: 8px !important;
		font-size: 14px !important;
		line-height: 1.25 !important;
		padding: 8px 10px !important;
		border-radius: 4px !important;
		background: linear-gradient(to bottom, rgba(0, 60, 95, 0.78) 0%, rgba(0, 60, 95, 0.45) 100%) !important;
	}
	div.main-text {
		display: none !important;
	}

	/* Header podstron */
	img#normalheader {
		height: 72px !important;
		margin-top: 0 !important;
		position: relative !important;
		object-fit: cover !important;
		object-position: center top !important;
	}

	/* --- 3a. KAFELKI HERO (Flota / LM / Lifting / Cumy) ---
	   Desktop: 3-4 kafelki absolute pozycjonowane (top:-100/-130/-100, left:0/50%/right:0)
	   Mobile: maly horyzontalny rzad, flex 1:1 - 3-4 kafelki obok siebie
	   po ~33%/25% szerokosci, z malymi miniaturami (~70px wysokie). */
	div#header-menu {
		width: 100% !important;
		height: auto !important;
		padding: 0 8px !important;
		/* Wyzszej na hero: wiekszy ujemny margin = kafelki + #content pod spodem w gore. */
		margin: calc(-0.5 * (220px + 76px) - 36px) 0 12px 0 !important;
		position: relative !important;
		z-index: 4 !important;
	}
	div#header-menu ul {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
		position: static !important;
	}
	div#header-menu ul li,
	div#header-menu ul li:nth-child(1),
	div#header-menu ul li:nth-child(2),
	div#header-menu ul li:nth-child(3),
	div#header-menu ul li:nth-child(4) {
		position: static !important;
		display: block !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		margin: 0 !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}
	div#header-menu ul li:after {
		display: none !important;
	}
	div#header-menu ul li div {
		width: 100% !important;
		height: 70px !important;
		padding: 0 !important;
		border: 1px solid #e8eef3 !important;
		background: #fafafa !important;
		box-sizing: border-box !important;
		position: relative !important;
		overflow: hidden !important;
	}
	div#header-menu ul li div img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
	/* Link rozciagniety na CALY kafelek (a nie tylko dolny pasek).
	   Tlo gradientem: transparent na gorze + ciemne na dole = napis czytelny
	   na dole, ale klikalna powierzchnia obejmuje cale zdjecie. */
	div#header-menu ul li div a,
	div#header-menu ul li div a.lm {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		height: auto !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0 0.22em !important;
		align-items: flex-end !important;
		justify-content: center !important;
		padding: 4px 4px 6px 4px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		text-align: center !important;
		line-height: 1.2 !important;
		background: linear-gradient(to bottom, rgba(0, 87, 137, 0) 0%, rgba(0, 87, 137, 0) 55%, rgba(0, 87, 137, 0.85) 100%) !important;
		color: #fff !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
	}
	div#header-menu ul li div a.lm {
		background: linear-gradient(to bottom, rgba(255, 158, 0, 0) 0%, rgba(255, 158, 0, 0) 55%, rgba(255, 158, 0, 0.92) 100%) !important;
	}
	div#header-menu ul li div a span {
		display: inline !important;
		font-size: 12px !important;
		color: #fff !important;
	}
	div#header-menu ul li div a.lm:after {
		display: none !important;
	}

	/* --- 3b. UKRYTE elementy strony glownej na mobile ---
	   Dystrakory ktore zajmuja miejsce. Tekst + wyszukiwarka + LM = priorytet. */
	#weather,                /* "AKTUALNOSCI" (FB widget) i "POGODA" - oba */
	#ports,                  /* lista portow w sidebarze startpage */
	.fb-wrapper {            /* FB widget na startpage */
		display: none !important;
	}
	/* Mobile startpage: 3 kafelki (Flota / LM / Lifting) — ukryj 4. (Cumy). */
	div#header-menu ul li:nth-child(n+4) {
		display: none !important;
	}
	div#header-menu ul li:nth-child(1),
	div#header-menu ul li:nth-child(2),
	div#header-menu ul li:nth-child(3) {
		display: block !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		width: auto !important;
	}
	div#header-menu ul li:nth-child(1) div,
	div#header-menu ul li:nth-child(2) div,
	div#header-menu ul li:nth-child(3) div {
		height: 76px !important;
	}
	/* Mobilny blok FB usuniety - zostawiamy ukryty fallback. */
	.mobile-fb-box {
		display: none !important;
	}

	/* --- 3c. REORDER #content na startpage:
	   Cel: yacht-finder (wyszukiwarka) NAD filmem (na samej gorze), pozostale
	   elementy w naturalnej kolejnosci.
	   Technika:
	     #content   -> flex column (pojemnik)
	     #right     -> display:contents  (znika z layoutu, jego dzieci staja sie
	                                       siblingami #left w flex contenerze)
	     yacht-finder -> order: 1  (na gorze)
	     #left      -> order: 2  (srodek - film + tekst + extrahead.yachts_content)
	     #lm        -> order: 3  (dol - LM slider, oferty specjalne)
	   display:contents ma support 99%+ na mobile w 2026 (Chrome 65+, Safari 11.1+,
	   Firefox 37+). Dzieci nadal scriptable przez selektory parent>*. --- */
	div#content {
		padding: 14px 10px !important;
		display: flex !important;
		flex-direction: column !important;
	}
	/* Twarde resety desktopowego sidebaru 325px na mobile. */
	div#content div#right,
	div#right {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		clear: both !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	div#content > div#left {
		display: block !important;
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
		margin: 0 0 18px 0 !important;
		order: 2 !important;
	}
	/* Startpage: lepsza hierarchia tytulow sekcji i mniejszy "skok" wizualny */
	div#content > div#left > hr {
		margin: 22px 0 14px 0 !important;
		border-top-color: #dce8f2 !important;
	}
	div#content > div#left a.p2 {
		font-size: 22px !important;
		line-height: 1.15 !important;
		margin-bottom: 6px !important;
	}
	div#content > div#left p.add {
		font-size: 16px !important;
		line-height: 1.35 !important;
		margin-bottom: 14px !important;
	}
	div#content > div#right {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 1 !important;
		box-sizing: border-box !important;
	}
	div#content > div#right > * {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	div#content > div#right > .yacht-finder {
		margin: 0 0 18px 0 !important;
	}
	div#content > div#right > #lm {
		margin: 0 0 18px 0 !important;
	}
	/* yacht-finder + #lm - DOKLADNIE rownej szerokosci i marginesach od krawedzi.
	   Oba maja niebieskie tlo (#2ab5f4). Margines lewy/prawy bierze sie z
	   padding 10px na #content. Tu wymuszamy:
	   - margin-left: 0, margin-right: 0  (oba widgety bezposrednio dziedzicza
	     padding rodzica, BEZ wlasnego marginesu)
	   - padding-left: 12px = padding-right: 12px  (rownie po obu stronach)
	   - width: 100%  (wypelnia content area #content)
	   - box-sizing: border-box  (padding wewnatrz width, nie wystaje)
	   Rozbita zapis padding/margin na explicit strony zeby SUMA reguly
	   widget'a (yacht-finder ma <style> z padding:10px) nie miala zadnej
	   szansy nadpisania pojedynczej property. */
	div#content > div#right > .yacht-finder,
	div#content > div#right > .yacht-finder.yacht-finder--vertical,
	div#content > div#right > .yacht-finder.yacht-finder--horizontal,
	div#content > div#right > #lm,
	div#right > .yacht-finder,
	div#right > .yacht-finder.yacht-finder--vertical,
	div#right > #lm,
	.yacht-finder.yacht-finder--vertical,
	#content > #right > #lm {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		float: none !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 18px !important;
	}
	.yacht-finder,
	.yacht-finder.yacht-finder--vertical,
	.yacht-finder.yacht-finder--horizontal {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Wymuszenie identycznej szerokosci widgetow w prawej kolumnie jak blok wideo
	   (w praktyce: cala szerokosc contentu mobilnego). */
	div#content > div#right > .yacht-finder.yacht-finder--vertical,
	div#content > div#right > #lm,
	#right .yacht-finder.yacht-finder--vertical,
	#right #lm {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	div#content > div#right > .yacht-finder.yacht-finder--vertical {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	div#content > div#right > #lm {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.yacht-finder.yacht-finder--vertical:after,
	div#content div#right div#lm:after {
		display: none !important;
		content: none !important;
	}
	/* yacht-finder horizontal na /yachts, /yacht/{id} */
	.yacht-finder.yacht-finder--horizontal {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* LM slider na mobile - poziomy scroll palcem.
	   Inline div ma "width:300px; height:250px; overflow:hidden" - rozciagamy
	   na 100%, wycentrujemy zeby slider 300px byl posrodku boxa. */
	#lm > div[style*="overflow:hidden"] {
		width: 300px !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
	}
	/* Strzalki nawigacyjne #lm (lmnext/lmprev) - desktop ma inline style
	   right:3% / left:3%. Na mobile box jest szerszy niz slider 300px,
	   wiec strzalki musza byc relatywnie do slider'a, nie boxa. Dlatego
	   ukrywamy strzalki w #lm na mobile - slider scrolluje sie palcem. */
	#lm > #lmnext,
	#lm > #lmprev {
		display: none !important;
	}

	/* Last minute – oddech pod kadrem + badge nie nachodzi na tytuł na wąskim ekranie */
	div#lm .lm-slide-wrap {
		padding-bottom: 6px !important;
	}
	div#lm .lm-slide-wrap .lastminute {
		transition: box-shadow 0.2s ease !important;
	}
	/* LM mobile: jednolity kadr obrazka + bezpieczna przestrzen na opis. */
	#lm > div[style*="overflow:hidden"] {
		height: 292px !important;
	}
	#lmslider .content {
		height: 292px !important;
		padding-top: 6px !important;
	}
	#lmslider .content .lm-slide-wrap {
		width: 100% !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
	#lmslider .content .lastminute {
		width: 100% !important;
		height: 186px !important;
		object-fit: cover !important;
		object-position: center center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}
	#lmslider .content p {
		margin: 10px 10px 0 10px !important;
		font-size: 13px !important;
		line-height: 1.32 !important;
		text-align: left !important;
		max-height: 96px !important;
		overflow: hidden !important;
	}
	#lmslider .content p a {
		display: block !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}
	/* Wyszukiwarka: tryb tygodniowy ma dlugi tekst opcji "ostatnia noc". */
	.yacht-finder #yf_weeks {
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		padding-right: 22px !important;
	}
	.yacht-finder #yf_weeks option {
		font-size: 12px !important;
	}
	/* ============================================================
	 * 4. STRONA JACHTU (yachtview.tpl)
	 * Struktura DOM:
	 *   <div id="yachts">
	 *     <div id="ygallery">[h1, model-tagline, #gallery z thumbsami]</div>
	 *     <div id="yachtinfo">
	 *       <p class="desc">opis</p>
	 *       <table class="general">[2-kol: wyposazenie | plan + oceny]</table>
	 *       <div class="reserveinfo">[procedura rezerwacji]</div>
	 *       <div style="overflow:hidden; margin-top:30px">
	 *         <div style="float:left; width:490px">[kalendarz gldp]</div>
	 *         <div class="reserveinfodown" style="float:right; width:430px">[platnosc]</div>
	 *       </div>
	 *       <div class="send">[Zarezerwuj jacht CTA]</div>
	 *     </div>
	 *     <div id="yachtcontent">[opinie, dodatkowe seo, related yachts]</div>
	 *   </div>
	 * UWAGA: tabela general jest w #yachtinfo (nie #yachtcontent jak na port!).
	 * ============================================================ */
	div#yachtinfo,
	div#yachtcontent,
	div#yachtcontent.port,
	div#yachtcontent.diary {
		padding: 16px 10px !important;
		padding-top: 16px !important;
		margin-top: 0 !important;
	}

	/* Galeria zdjec jachtu (galleria.js przejmuje #gallery i tworzy widget).
	   Desktop: #ygallery ma min-height: 760px, #gallery: 960x720px sztywne.
	   Na mobile galleria.js init na 100% width = max ~414px, ale 720px height
	   to 75% wysokosci ekranu - przesadnie. Zmniejszamy do 280-320px. */
	div#yachts div#ygallery {
		width: 100% !important;
		min-height: 0 !important;
		margin-top: 0 !important;
		padding-bottom: 8px !important;
	}
	div#yachts div#ygallery h1 {
		font-size: 18px !important;
		line-height: 1.3 !important;
		padding: 8px 10px !important;
	}
	div#yachts div#ygallery .model-tagline {
		font-size: 12px !important;
		padding: 0 10px 8px !important;
	}
	/* #gallery dostosowuje sie do viewportu, ale ma stala height dla galleria.js
	   (galleria potrzebuje fixed dimensions zeby narysowac stage + thumbsy). */
	div#yachts div#ygallery div#gallery {
		width: 100% !important;
		max-width: 100% !important;
		height: 320px !important;
		min-height: 0 !important;
		margin: 0 auto !important;
	}
	/* NIE override-uj img w #gallery - galleria.js sama je obsluguje
	   (ukrywa thumbsy i tworzy wlasny carousel z thumbnailami pod stage'm). */

	/* Tabela general (wyposazenie + plan + opinie) - stack
	   UWAGA: jest w #yachtinfo, nie #yachtcontent! */
	div#yachts table.general,
	div#yachts table.general > tbody,
	div#yachts table.general > tbody > tr,
	div#yachts table.general > tbody > tr > td,
	div#yachts table.general > tbody > tr > td.left,
	div#yachts table.general > tbody > tr > td.right {
		display: block !important;
		width: 100% !important;
		padding: 0 0 10px 0 !important;
		box-sizing: border-box !important;
	}
	#equipment-list {
		max-height: 400px !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}
	/* Equipment search - input full-width */
	.equipment-search-wrap input#equipment-search {
		max-width: 100% !important;
	}

	/* Sekcja rezerwacji (kalendarz + .reserveinfodown) - stack
	   Wrapper: <div style="overflow:hidden; margin-top:30px; margin-bottom:30px;">
	     <div style="float:left; width:490px">[kalendarz]</div>
	     <div class="reserveinfodown" style="float:right; width:430px">[platnosc]</div>
	   </div> */
	div#yachts > div#yachtinfo > div[style*="overflow:hidden"][style*="margin-top:30px"],
	div#yachts > div#yachtinfo > div[style*="overflow:hidden"][style*="margin-bottom:30px"],
	div#yachtinfo > div[style*="overflow:hidden"][style*="margin-top:30px"],
	div#yachtcontent > div[style*="overflow:hidden"][style*="margin-top:30px"] {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		margin: 16px 0 !important;
		overflow: visible !important;
	}
	/* Kalendarz wrapper - 490px float left -> 100% block.
	   Overflow-x:auto NIE na wrapperze (zlamaloby sticky CTA wewnatrz),
	   tylko na samym widget'e kalendarza (gldp-el). */
	div#yachtinfo > div > div[style*="float:left"][style*="width:490px"],
	div#yachtcontent > div > div[style*="float:left"][style*="width:490px"] {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-bottom: 4px !important;
	}
	div[gldp-el="mydate"] {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 260px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
	}
	/* glDatePicker (strona jachtu): komorki maja float:left + szerokosci w px.
	   Przy wezkim viewport suma 7 komorek moze przekroczyc 100% przez
	   zaokraglenia — naglowki dni lamia sie (np. 5+2), daty trafiaja pod
	   zle kolumny. Flex + dokladnie 1/7 szerokosci (bez ujemnych marginow)
	   utrzymuje siatke 7xN. */
	div[gldp-el="mydate"].gldp-default {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		align-content: flex-start !important;
	}
	div[gldp-el="mydate"].gldp-default > .core.border {
		float: none !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		margin-left: 0 !important;
		margin-top: 0 !important;
		width: calc(100% / 7) !important;
		max-width: calc(100% / 7) !important;
		flex: 0 0 calc(100% / 7) !important;
		min-width: 0 !important;
		min-height: 38px !important;
		height: auto !important;
		line-height: 1.25 !important;
		padding: 6px 2px !important;
	}
	div[gldp-el="mydate"].gldp-default > .core.border.monyear.title {
		width: calc(500% / 7) !important;
		max-width: calc(500% / 7) !important;
		flex: 0 0 calc(500% / 7) !important;
	}
	#reserve-calendar-anchor {
		overflow: visible !important;
	}
	/* table.cal (2 td-y) - stack */
	div#yachts table.cal,
	div#yachts table.cal > tbody,
	div#yachts table.cal > tbody > tr,
	div#yachts table.cal > tbody > tr > td.left,
	div#yachts table.cal > tbody > tr > td.right {
		display: block !important;
		width: 100% !important;
	}
	.boxes-under-cal {
		width: 100% !important;
		max-width: 100% !important;
		grid-template-columns: 1fr 1fr !important;
		font-size: 11px !important;
	}
	/* Inline style="float:right; width:430px" override - reserveinfodown */
	.reserveinfodown,
	div#yachts .reserveinfodown[style] {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
		padding-left: 0 !important;
		box-sizing: border-box !important;
	}
	.reserveinfodown ul {
		padding-left: 18px !important;
	}

	/* Toggle .send-desktop-only / .send-mobile-only.
	   Na mobile pokazujemy ten po kalendarzu (zaraz po wyborze terminu),
	   ten na koncu strony chowamy. */
	div.send.send-desktop-only {
		display: none !important;
	}
	div.send.send-mobile-only {
		display: block !important;
	}

	/* Sticky CTA "Zarezerwuj jacht" - kompaktowy bez box-shadow rzucajacego
	   szare paski po obu stronach buttona. Margin -10px po bokach pozwala
	   na pelnoekranowe tlo (bez przerw od padding rodzica). */
	div.send {
		position: sticky !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		z-index: 800 !important;
		background: #ffffff !important;
		padding: 4px 10px !important;
		box-shadow: none !important;
		border-top: 1px solid #eef2f6 !important;
		text-align: center !important;
		margin: 8px -10px 0 -10px !important;
		box-sizing: border-box !important;
	}
	/* Override desktopowych: position:relative; height:40px; width:25%;
	   margin: 0 auto - tu chcemy flexowy compact button. Dodatkowo musze
	   zresetowac position:absolute na <img> i <span> wewnatrz a.reserve
	   (linia 399-400 w style.css), inaczej icon i text wyladuja na 0/0. */
	div.send a.reserve {
		position: relative !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		width: auto !important;
		min-width: 220px !important;
		max-width: 320px !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 9px 18px !important;
		background: #ff9e00 !important;
		color: #fff !important;
		font-weight: 700 !important;
		font-size: 14px !important;
		line-height: 1 !important;
		border: 0 !important;
		border-radius: 4px !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
		text-decoration: none !important;
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
		margin: 0 auto !important;
	}
	div.send a.reserve:hover {
		background: #ffb030 !important;
	}
	/* Reset desktopowych position:absolute na obrazek i napis w buttonie */
	div.send a.reserve img {
		position: static !important;
		top: auto !important;
		left: auto !important;
		padding: 0 !important;
		width: 16px !important;
		height: 16px !important;
		display: inline-block !important;
		vertical-align: middle !important;
	}
	div.send a.reserve span {
		position: static !important;
		top: auto !important;
		left: auto !important;
		font-size: 14px !important;
		display: inline-block !important;
		vertical-align: middle !important;
	}

	/* Powiazane jachty na dole */
	.mc-related {
		padding: 16px 10px !important;
	}
	.mc-related-groups {
		flex-direction: column !important;
		gap: 16px !important;
	}


	/* ============================================================
	 * 4a. LISTA FLOTY/PORTOW/DZIENNIKOW - HEADER 2-kolumnowy
	 * /yachts ma na gorze:
	 *   <div id="yachts">
	 *     <div id="header" style="position:relative">
	 *       <img id="extra" style="position:absolute; width:55%; border:18px white">
	 *       <div id="text" style="position:absolute; left:60%; width:40%">
	 *         <img>FLOTA</img><h2>FLOTA</h2>
	 *         <div id="hcontent">[opis]</div>
	 *         <table id="legend">[symbole gratis]</table>
	 *       </div>
	 *     </div>
	 *     <div id="yachtcontent">[yacht-finder + table.all]</div>
	 *   </div>
	 * Problem: #header ma height 0 (children absolute), wiec yacht-finder zaczyna
	 * sie tam gdzie #extra/#text - nakladaja sie. Na mobile to jest naprawde ZBE.
	 * Rozwiazanie: ukryc #extra (zdjecie jachtu - duplikat z thumbsow w kartach
	 * jachtow ponizej), zostawic #text ale w normalnym flow (static, 100%). */
	div#yachts > div#header {
		position: static !important;
		width: 100% !important;
		padding: 14px 10px 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	div#yachts > div#header img#extra {
		display: none !important;
	}
	div#yachts > div#header div#text {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		z-index: auto !important;
	}
	div#yachts > div#header div#text > img {
		float: none !important;
		display: inline-block !important;
		vertical-align: middle !important;
		height: 22px !important;
		margin: 0 6px 0 0 !important;
	}
	div#yachts > div#header div#text > h2 {
		float: none !important;
		display: inline-block !important;
		vertical-align: middle !important;
		margin: 0 0 8px 0 !important;
		font-size: 22px !important;
	}
	div#yachts > div#header div#text div#hcontent,
	div#yachts > div#header div#text div#hcontent.port {
		clear: both !important;
		height: auto !important;
		max-height: none !important;
		padding: 0 !important;
		font-size: 13px !important;
	}
	/* Legend (gratisy w 4-kol tabeli) - na mobile 2-kol */
	div#yachts > div#header div#text table#legend {
		width: 100% !important;
		margin: 8px 0 !important;
	}
	div#yachts > div#header div#text table#legend tr td.img {
		width: 32px !important;
		padding: 2px !important;
	}
	div#yachts > div#header div#text table#legend tr td.img img {
		float: none !important;
		height: 22px !important;
		padding: 0 !important;
	}
	div#yachts > div#header div#text table#legend tr td.desc {
		width: auto !important;
		font-size: 11px !important;
		padding: 2px 4px !important;
	}


	/* ============================================================
	 * 4b. LISTA FLOTY (/yachts) - <table class="all"> 3-kolumnowa
	 * Struktura DOM:
	 *   <div id="yachts">
	 *     <div id="yachtcontent">
	 *       [yacht-finder horizontal]
	 *       <table class="all">
	 *         <thead><tr><th 33.3% x3></tr></thead>
	 *         <tbody>
	 *           <tr>
	 *             <td class="general left"><table class="oneyacht">[1 jacht]</table></td>
	 *             <td class="general center"><table class="oneyacht">[2 jacht]</table></td>
	 *             <td class="general right"><table class="oneyacht">[3 jacht]</table></td>
	 *           </tr>
	 *         </tbody>
	 *       </table>
	 *     </div>
	 *   </div>
	 * Cel: kazdy <td> staje sie blokiem 100% szerokosci pod poprzednim.
	 * ============================================================ */
	div#yachtcontent table.all,
	div#yachtcontent table.all > tbody,
	div#yachtcontent table.all > thead {
		display: block !important;
		width: 100% !important;
	}
	div#yachtcontent table.all > thead {
		display: none !important; /* puste TH-y - na desktopie tylko grid 33% */
	}
	div#yachtcontent table.all > tbody > tr {
		display: block !important;
		width: 100% !important;
	}
	div#yachtcontent table.all > tbody > tr > td,
	div#yachtcontent table.all > tbody > tr > td.general,
	div#yachtcontent table.all > tbody > tr > td.general.left,
	div#yachtcontent table.all > tbody > tr > td.general.center,
	div#yachtcontent table.all > tbody > tr > td.general.right {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 0 18px 0 !important;
		box-sizing: border-box !important;
		border: 1px solid #d7dde3 !important;
		border-radius: 10px !important;
		background: #ffffff !important;
		box-shadow: 0 5px 14px rgba(35, 45, 58, 0.13) !important;
		padding: 10px !important;
	}
	/* Zewnetrzny wrapper oneyacht - desktop ma height: 400px (port).
	   Na mobile pozwol auto-height + 100% width. */
	div#yachtcontent table.oneyacht,
	div#yachtcontent table.oneyacht.port {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		table-layout: auto !important;
		background: transparent !important;
	}
	div#yachtcontent table.oneyacht img {
		max-width: 100% !important;
		height: auto !important;
	}
	/* Foto jachtu - usuwam desktopowe ramki/cienie ktore na mobile zostawiaja
	   szare gradientowe artefakty (shadow.jpg :after pozycjonowany absolutnie
	   na 207px - na mobile laduje w srodku zdjecia). */
	div#yachtcontent table.oneyacht tr.img td,
	div#yachtcontent table.oneyacht.diary tr.img td,
	div#yachtcontent table.oneyacht.port tr.img td {
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}
	div#yachtcontent table.oneyacht tr.img:after,
	div#yachtcontent table.oneyacht.diary tr.img:after,
	div#yachtcontent table.oneyacht.port tr.img:after {
		display: none !important;
		content: none !important;
		background: none !important;
	}
	/* Obraz jachtu - aspect-ratio zamiast fixed 185px height (rozciagnal sie
	   ekstremalnie poziomo na full width mobile). */
	div#yachtcontent table.oneyacht tr.img td img,
	div#yachtcontent table.oneyacht.diary tr.img td img {
		width: 100% !important;
		height: auto !important;
		max-height: 240px !important;
		aspect-ratio: 16 / 9 !important;
		object-fit: cover !important;
		display: block !important;
		border-radius: 4px !important;
	}
	/* Last Minute badge na mobilu: mniejszy, zeby nie zaslanial miniatury. */
	div#yachtcontent table.oneyacht tr.img td img.lmflag {
		width: 64px !important;
		height: 64px !important;
		right: 0 !important;
		top: 0 !important;
	}
	div#yachtcontent table.oneyacht tr.img td div.lmcircle {
		width: 34px !important;
		height: 34px !important;
		right: 16px !important;
		top: 104px !important;
		border-radius: 17px !important;
	}
	div#yachtcontent table.oneyacht tr.img td div.lmcircle p {
		line-height: 34px !important;
		font-size: 11px !important;
	}
	div#yachtcontent table.oneyacht tr.img td div.lmcircle.dynamic {
		width: 36px !important;
		height: 36px !important;
		right: 15px !important;
		top: 102px !important;
		border-radius: 18px !important;
	}
	div#yachtcontent table.oneyacht tr.img td div.lmcircle.dynamic p .lmcircle-do {
		font-size: 8px !important;
	}
	div#yachtcontent table.oneyacht tr.img td div.lmcircle.dynamic p .lmcircle-percent {
		font-size: 10px !important;
	}
	div#yachtcontent table.oneyacht tr.img td div.lmcirclehint {
		right: 10px !important;
		top: 143px !important;
		font-size: 9px !important;
		padding: 3px 5px !important;
	}
	div#yachtcontent table.oneyacht tr.title a {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}
	div#yachtcontent table.oneyacht tr.title td {
		padding-top: 8px !important;
	}
	div#yachtcontent table.oneyacht tr.lmprice td {
		font-size: 14px !important;
	}
	div#yachtcontent table.oneyacht tr.rating td.val img {
		max-width: 16px !important;
		display: inline-block !important;
		margin-right: 1px !important;
	}
	/* Gratis icons - mniejsze na mobile */
	div#yachtcontent table.oneyacht .gratis-icons-wrap .gratis-list {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
	}
	div#yachtcontent table.oneyacht .gratis-item img {
		max-width: 28px !important;
		height: auto !important;
	}


	/* ============================================================
	 * 4c. STRONA PORTU/KOTWICY (/portview/{id})
	 * Struktura DOM:
	 *   <div id="yachts">
	 *     <div id="yachtinfo" style="margin-top:80px">
	 *       <div class="port_head">  [position:relative; height:50px]
	 *         <img src="port_logo">  [absolute; height:50px]
	 *         <h1>NAZWA PORTU</h1>   [float:left; text-indent:70px]
	 *         <p class="contact">    [float:right]
	 *         <p class="address">    [float:right]
	 *       </div>
	 *       <div class="photohead">  [height:150px; img absolute top:-200px]
	 *       <table class="general">
	 *         <tr><td class="left">[opis + .weather (Leaflet) + .flags]</td>
	 *             <td class="right">[.ytbox + .gallerybox + opinie]</td></tr>
	 *       </table>
	 *     </div>
	 *   </div>
	 * Desktop ma 2-kol layout. Na mobile - stack pionowy 100% wszystko.
	 * ============================================================ */

	/* margin-top:80px (inline) za duze na mobile */
	div#yachts > div#yachtinfo[style*="margin-top:80px"] {
		margin-top: 0 !important;
	}

	/* Port_head: img + h1 + dane kontaktowe ulozone w jeden blok */
	.port_head {
		position: static !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		margin: 0 0 16px 0 !important;
		padding: 0 !important;
	}
	.port_head > img {
		position: static !important;
		height: auto !important;
		max-height: 60px !important;
		width: auto !important;
		max-width: 80% !important;
		display: block !important;
		margin: 0 auto 8px auto !important;
	}
	.port_head h1 {
		float: none !important;
		display: block !important;
		text-align: center !important;
		text-indent: 0 !important;
		padding: 0 !important;
		margin: 0 0 10px 0 !important;
		font-size: 20px !important;
		line-height: 1.3 !important;
	}
	.port_head > p,
	.port_head > p.contact,
	.port_head > p.address {
		float: none !important;
		display: block !important;
		margin: 0 0 6px 0 !important;
		padding: 4px 0 4px 30px !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
		background-position: 0 center !important;
	}

	/* Foto port - duzy banner zdjecia */
	.photohead {
		height: 140px !important;
		padding: 0 !important;
		border-width: 4px !important;
		margin: 0 0 14px 0 !important;
		box-sizing: border-box !important;
	}
	.photohead > img {
		position: static !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		top: auto !important;
		left: auto !important;
	}

	/* Mapa pogody/lokalizacji (Leaflet) - desktop ma .general .weather z
	   padding:20px. Na mobile pelna szerokosc, bez paddingu. */
	div#yachts div#yachtinfo .weather,
	.general .weather {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 0 16px 0 !important;
		box-sizing: border-box !important;
	}
	.weather .leaflet-container {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	/* Linetrough naglowki (Sprawdz pogode, Wyposazenie, Filmy, Galeria) */
	div.linetrough {
		margin: 18px 0 8px 0 !important;
		padding: 0 !important;
	}
	div.linetrough h2.portdesc {
		font-size: 16px !important;
		margin: 0 !important;
		padding: 4px 0 !important;
	}
	/* Tabela flagi (wyposazenie portu) - jest juz w mobile-friendly stanie,
	   tylko upewnij sie ze nie wykracza poza viewport. */
	div#yachts div#yachtinfo table.general tr td table.flags {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
	}
	div#yachts div#yachtinfo table.general tr td table.flags tr td.img {
		width: 40px !important;
	}
	div#yachts div#yachtinfo table.general tr td table.flags tr td.txt {
		font-size: 14px !important;
		word-break: break-word !important;
	}

	/* YouTube + Gallery boxy - na mobile mniejsze (240px zamiast 350px) */
	.ytbox,
	.gallerybox {
		width: 100% !important;
		max-width: 100% !important;
		height: 240px !important;
		box-sizing: border-box !important;
	}


	/* ============================================================
	 * 4d. STRONA BUDOWY JACHTOW (/building - lista)
	 * Struktura: <div class="lr"> <div class="b">
	 *   <div class="img"><img w:263 h:185></div>     [width:280px desktop]
	 *   <div class="desc">                            [width: calc(100% - 280px)]
	 *     <h3>Budowa jachtu ANTILA X</h3>
	 *     <div class="content"><p>...</p></div>
	 *     <a class="blue" href="buildingview/X">Zobacz jacht!</a>
	 *   </div>
	 * </div></div>
	 * Plus przeplata sie kolejnoscia (nth-child even/odd) - wszystko ma
	 * float:left lub float:right. Na mobile staka pionowo. */
	div#yachtcontent div.lr div.b {
		overflow: visible !important;
		padding: 14px 0 !important;
		margin-bottom: 14px !important;
	}
	div#yachtcontent div.lr div.b:nth-child(even) *,
	div#yachtcontent div.lr div.b:nth-child(odd) * {
		float: none !important;
	}
	div#yachtcontent div.lr div.b div.img {
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
		margin: 0 0 12px 0 !important;
	}
	div#yachtcontent div.lr div.b div.img img {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 220px !important;
		display: inline-block !important;
		border-radius: 4px !important;
	}
	div#yachtcontent div.lr div.b div.desc {
		width: 100% !important;
		max-width: 100% !important;
	}
	div#yachtcontent div.lr div.b div.desc h3 {
		font-size: 18px !important;
		margin: 0 0 8px 0 !important;
	}
	div#yachtcontent div.lr div.b div.desc div.content {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
	div#yachtcontent div.lr div.b div.desc a,
	div#yachtcontent div.lr div.b:nth-child(even) a,
	div#yachtcontent div.lr div.b:nth-child(odd) a {
		float: none !important;
		display: inline-block !important;
		margin: 8px 0 !important;
	}
	/* Tresc CKEditor (.content) - tabele/img wewnatrz CKEditor czesto maja
	   inline width="600" lub style="width:600px" - na mobile lamie sie. */
	div.content table {
		width: 100% !important;
		max-width: 100% !important;
		table-layout: auto !important;
	}
	div.content img {
		max-width: 100% !important;
		height: auto !important;
	}


	/* ============================================================
	 * 5. POPUPY (login, edit, rezerwacja, cennik, oceny)
	 * Desktop: .popup ma left:50% + .popup-body width:610px margin-left:-305px
	 * (centrowane przez negative margin = -width/2). Na mobile robimy to
	 * przez transform:translateX(-50%) - dziala z dynamiczna szerokoscia
	 * popup-body (nie potrzeba znac viewport width-u). */
	.popup .popup-body,
	#example-popup .popup-body,
	#rate-popup .popup-body,
	#edit-popup .popup-body,
	#reservation-popup .popup-body,
	#pricing-popup .popup-body {
		width: 96vw !important;
		max-width: 540px !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		transform: translateX(-50%) !important;
		max-height: 92vh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		box-sizing: border-box !important;
	}
	/* Krzyzyk zamykania: desktop ma top:-12px — na telefonie ucina sie
	   pod paskiem statusu / safe-area; w srodku naglowka popupu.
	   Nie dotykamy .reservation-popup (wlasny duzy przycisk w style.css). */
	.popup:not(.reservation-popup) .popup-exit {
		top: 10px !important;
		right: 10px !important;
		z-index: 6 !important;
	}
	.popup .popup-content {
		max-height: none !important;
		padding: 12px !important;
		box-sizing: border-box !important;
	}
	/* === EDIT POPUP (Moje konto) ===
	   Desktop ma 2 floaty 455px + 400px obok siebie w popup 960px.
	   Na mobile staka jeden pod drugim. */
	#edit-popup .popup-content > div[style*="float:left"] {
		float: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		margin-bottom: 16px !important;
	}
	/* Tabela "Moje rezerwacje" - 5 kolumn (Od/Do/Status/Koszt/Rabat).
	   Poprzednio display:block + thead/tbody rozjezdzaly sie kolumnami.
	   Teraz: table-layout:fixed + procentowe szerokosci kolumn + word-break.
	   Kolumny dat sa najwezsze (data 2026-04-25 lamie sie na 2 linie),
	   Status najszerszy (najdluzszy tekst "Niepotwierdzona"). */
	#edit-popup table {
		display: table !important;
		width: 100% !important;
		max-width: 100% !important;
		table-layout: fixed !important;
		border-collapse: collapse !important;
		font-size: 11px !important;
		margin: 6px 0 !important;
	}
	#edit-popup table thead {
		display: table-header-group !important;
	}
	#edit-popup table tbody {
		display: table-row-group !important;
	}
	#edit-popup table tr {
		display: table-row !important;
	}
	#edit-popup table th,
	#edit-popup table td {
		display: table-cell !important;
		padding: 5px 4px !important;
		font-size: 10px !important;
		line-height: 1.3 !important;
		text-align: left !important;
		vertical-align: top !important;
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		border-bottom: 1px solid #eee !important;
	}
	#edit-popup table th {
		font-weight: 700 !important;
		background: #f5f5f5 !important;
		text-transform: uppercase !important;
		font-size: 9px !important;
		letter-spacing: 0.3px !important;
	}
	/* Stale szerokosci kolumn - oryginalna kolejnosc:
	   1. Od    2. Do    3. Status    4. Koszt    5. Rabat
	   Razem 100%, dopasowane do typowej zawartosci. */
	#edit-popup table th:nth-child(1),
	#edit-popup table td:nth-child(1) { width: 22% !important; }
	#edit-popup table th:nth-child(2),
	#edit-popup table td:nth-child(2) { width: 22% !important; }
	#edit-popup table th:nth-child(3),
	#edit-popup table td:nth-child(3) { width: 24% !important; }
	#edit-popup table th:nth-child(4),
	#edit-popup table td:nth-child(4) { width: 18% !important; text-align: right !important; }
	#edit-popup table th:nth-child(5),
	#edit-popup table td:nth-child(5) { width: 14% !important; text-align: right !important; }
	/* Sekcja zgody RODO w Moje konto - desktopowy float:left + width:80% +
	   absolute checkbox top:10px right:10px. Na mobile - normalny flow. */
	#edit-popup .regs {
		position: relative !important;
		margin: 16px 0 12px 0 !important;
		padding: 12px 44px 12px 12px !important; /* miejsce na checkbox po prawej */
		background: #fafafa !important;
		border: 1px solid #e6e6e6 !important;
		border-radius: 4px !important;
		box-sizing: border-box !important;
		clear: both !important;
		overflow: hidden !important;
	}
	#edit-popup .regs p.reg,
	#edit-popup .regs > p {
		float: none !important;
		width: 100% !important;
		font-size: 11px !important;
		line-height: 1.4 !important;
		margin: 0 !important;
		color: #666 !important;
	}
	#edit-popup .regs input.userdataaccept,
	#edit-popup .regs input[type="checkbox"] {
		position: absolute !important;
		top: 14px !important;
		right: 14px !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
	}

	/* === LOGIN POPUP (#example-popup) ===
	   Desktop: padding-left:105px right:105px height:220px + przyciski 20% wide
	   floated. Mobile: full-width pole, pelnoekranowe przyciski. */
	#example-popup .loginbox,
	#example-popup .remindme {
		padding-left: 12px !important;
		padding-right: 12px !important;
		height: auto !important;
	}
	#example-popup .registerform {
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-top: 14px !important;
		padding-top: 14px !important;
		border-top: 1px solid #eee !important;
	}
	#example-popup .popup-pre {
		font-size: 13px !important;
		text-align: center !important;
		margin: 0 0 4px 0 !important;
	}
	#example-popup .registerform .loginrow .l {
		float: none !important;
		width: 100% !important;
		text-align: left !important;
	}
	/* "Zapomniales hasla?" - na desktopie float:right z margin-left:110px,
	   na mobile - blok wyrownany do prawej, oddzielony od buttona. */
	#example-popup .loginbox .loginrow .showremind,
	#example-popup .loginbox .loginrow a.showremind,
	#example-popup .showlogin {
		display: block !important;
		float: none !important;
		text-align: right !important;
		margin: 0 0 8px 0 !important;
		padding: 4px 0 !important;
	}
	/* Przyciski ZALOGUJ/REJESTRUJ/PRZYPOMNIJ - desktopowe width:20% + float:right
	   daje malenkie przyciski (~58px szerokosci) ktore obcinaja tekst "ZALOG..." */
	#example-popup a.loginsend,
	#example-popup a.loginreset,
	#example-popup a.registerme {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 44px !important;
		padding: 12px 16px !important;
		margin: 8px 0 12px 0 !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0.4px !important;
		box-sizing: border-box !important;
		text-align: center !important;
		clear: both !important;
	}
	/* Inline "height:50px" na .loginrow z REJESTRUJ - override + miejsce na button */
	#example-popup .registerform .loginrow[style*="height:50px"] {
		height: auto !important;
		min-height: 0 !important;
	}
	/* Inputy w popup logowania - desktopowe width:260px na mobile = full width */
	#example-popup .loginrow input[type="text"],
	#example-popup .loginrow input[type="email"],
	#example-popup .loginrow input[type="password"],
	#example-popup .popup-content input {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* === Wspolne: formularze w popupach === */
	/* Formularze: label NAD inputem (zamiast obok) */
	.popup .loginrow,
	.popup .regbox .loginrow,
	.reservation-popup .loginrow {
		display: block !important;
		margin-bottom: 10px !important;
		height: auto !important;
	}
	.popup .loginrow .l,
	.popup .regbox .loginrow .l {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 0 0 4px 0 !important;
	}
	.popup .loginrow .l label {
		font-size: 12px !important;
		line-height: 1.3 !important;
		padding: 0 !important;
	}
	.popup .loginrow input[type="text"],
	.popup .loginrow input[type="email"],
	.popup .loginrow input[type="password"],
	.popup .loginrow input[type="tel"],
	.popup .loginrow input[type="number"],
	.popup .loginrow textarea {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 8px 10px !important;
	}
	.popup .loginrow textarea {
		min-height: 60px !important;
		resize: vertical !important;
	}
	.popup .popup-content > .regbox > div[style*="border:1px solid #eee"] {
		padding: 12px !important;
		margin: 0 0 12px 0 !important;
		box-sizing: border-box !important;
	}
	/* === Sekcja OPCJE w popup rezerwacji ===
	   <h4>Opcje</h4>
	   <div style="border:1px solid #eee; rgba(222,222,222,0.2); padding-right:10px">
	     <div class="loginrow" style="height:30px"> [Pies/WC + radio NIE/TAK] </div>
	   </div>
	   <div class="coupon-summary">[Rabat klienta -204zl]</div>
	   
	   Problem: .rcheckboxes ma desktop float:left + width:320px (z style.css 1404)
	   plus inline height:30px na .loginrow blokuje rozszerzanie. Plus brak
	   padding-bottom na container OPCJE - coupon-summary nakladal sie.
	   Fix: rcheckboxes -> 100% width, no float; .loginrow z inline height -> auto. */
	.reservation-popup .loginrow[style*="height:30px"] {
		height: auto !important;
		min-height: 0 !important;
	}
	.reservation-popup .rcheckboxes {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		padding: 4px 0 0 0 !important;
		display: block !important;
	}
	.reservation-popup .rcheckboxes input,
	.reservation-popup .rcheckboxes label {
		float: none !important;
		display: inline-block !important;
		vertical-align: middle !important;
	}
	.reservation-popup .rcheckboxes label {
		margin: 0 16px 0 4px !important;
		padding: 6px 0 !important;
		font-size: 14px !important;
		min-height: 32px !important;
		line-height: 32px !important;
	}
	.reservation-popup .rcheckboxes input[type="radio"] {
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		vertical-align: middle !important;
	}
	/* Coupon-summary (Rabat klienta) - upewniamy sie ze jest na PEWNO pod
	   sekcja OPCJI, z odstepem. */
	.reservation-popup .coupon-summary {
		clear: both !important;
		margin: 8px 0 12px 0 !important;
	}
	/* Container OPCJE - dodajemy padding-bottom (desktop ma rgba(222,222,222,0.2)
	   tlo ale nie ma padding na dole, co lepi sie do coupon-summary. */
	.reservation-popup .popup-content .regbox > div[style*="rgba(222,222,222"],
	.reservation-popup .popup-content .regbox > div[style*="rgba(222, 222, 222"] {
		padding: 10px 12px !important;
		margin: 0 0 12px 0 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		clear: both !important;
		overflow: hidden !important;
	}
	.rform-header {
		padding: 12px !important;
	}
	.rform-title {
		font-size: 18px !important;
	}
	.rform-subtitle {
		font-size: 12px !important;
	}
	/* Karta rezerwacji: rząd z .reserveyacht (również yachtview_nip.tpl) */
	#reservation-popup .loginrow:has(.reserveyacht) {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px 14px !important;
		min-height: 0 !important;
		margin: 12px 6px 8px !important;
		padding: 0 4px 6px !important;
		clear: both !important;
	}
	#reservation-popup a.reserveyacht {
		display: inline-flex !important;
		width: auto !important;
		max-width: min(340px, 100%) !important;
		min-height: 0 !important;
		height: auto !important;
		font-size: clamp(13px, 3.9vw, 15px) !important;
		padding: 10px 22px !important;
		line-height: 1.2 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		text-align: center !important;
		border-radius: 6px !important;
		flex: 0 0 auto !important;
	}
	.reservation-summary,
	.coupon-summary {
		font-size: 13px !important;
	}
	.reservation-summary .rs-row,
	.coupon-summary .rs-row {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 4px !important;
	}
	#pricing-popup table#pricing {
		display: block !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		font-size: 12px !important;
	}
	#pricing-popup table#pricing th,
	#pricing-popup table#pricing td {
		padding: 4px 6px !important;
	}


	/* ============================================================
	 * 6. PODSTRONY (yachts list, port, porady, kontakt itd.)
	 * Override .sub div#content { padding: 35px 0 35px 10px; margin-top: 40px }
	 * (style.css line 17). Na mobile margin-top: 40px daje bialy pasek nad
	 * trescia, padding 35px na nokrotne za duzo - przyciasniej i bez paska. */
	body.sub div#content {
		padding: 16px 10px !important;
		margin-top: 0 !important;
	}
	/* Treść tekstowa: spójnie wyrównana do lewej na małych ekranach */
	body.sub div#content p,
	div#content #left p {
		text-align: left !important;
	}


	/* --- 7. FOOTER - 4 kolumny x 22% -> stack --- */
	div#footer {
		padding-bottom: 0 !important;
	}
	div#footer div#fcontent div.fmenu,
	div#footer div#fcontent div.fmenu.contact {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 16px !important;
	}
	div#footer div#fcontent div.fmenu ul li a {
		display: inline-block !important;
		padding: 8px 4px !important;
		min-height: 40px !important;
		box-sizing: border-box !important;
		line-height: 1.35 !important;
	}
	div#footer div#fcontent div#fbox {
		position: static !important;
		height: auto !important;
		padding: 12px 10px !important;
		text-align: center !important;
	}
	div#footer div#fcontent div#fbox div.content {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	div#footer div#fcontent span.ftext {
		position: static !important;
		display: block !important;
		text-align: center !important;
		padding: 5px 10px !important;
		line-height: 1.4 !important;
		left: auto !important;
		top: auto !important;
	}
	div#footer div#fcontent .copy a {
		position: static !important;
	}


	/* --- 8. INPUTY: font-size >=16px (zapobiega auto-zoom iOS) --- */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px !important;
	}


	/* --- 8c. MOBILE POZIOMO: siatka 3 kolumn (lista floty, LM, wyniki w sidebarze) ---
	   Domyślnie mobile.css stackuje listę jachtów i wyniki w widgetcie pionowym;
	   przy orientation:landscape i ~pełnej szerokości poziomej przywracamy układ zbliżony do desktopu. */
	@media (orientation: landscape) and (min-width: 568px) {

		.yacht-finder--vertical #yf_results .yf-grid {
			display: grid !important;
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			gap: 12px !important;
		}
		.yacht-finder--vertical #yf_results .yf-card {
			width: auto !important;
			margin-bottom: 0 !important;
		}
		.yacht-finder--vertical #yf_results .yf-card-img {
			height: 130px !important;
		}

		div#yachtcontent table.all {
			display: block !important;
			width: 100% !important;
		}
		div#yachtcontent table.all > thead {
			display: none !important;
		}
		div#yachtcontent table.all > tbody {
			display: grid !important;
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			column-gap: 10px !important;
			row-gap: 14px !important;
			width: 100% !important;
		}
		div#yachtcontent table.all[data-cols="2"] > tbody {
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			column-gap: 12px !important;
		}
		div#yachtcontent table.all[data-cols="1"] > tbody {
			grid-template-columns: minmax(0, 1fr) !important;
		}
		div#yachtcontent table.all > tbody > tr {
			display: contents !important;
		}
		div#yachtcontent table.all > tbody > tr > td.general,
		div#yachtcontent table.all > tbody > tr > td.general.left,
		div#yachtcontent table.all > tbody > tr > td.general.center,
		div#yachtcontent table.all > tbody > tr > td.general.right {
			display: block !important;
			width: 100% !important;
			max-width: none !important;
			min-width: 0 !important;
			margin: 0 !important;
			padding: 8px !important;
		}
		div#yachtcontent table.all[data-cols="3"] > tbody > tr > td.general.left,
		div#yachtcontent table.all:not([data-cols]) > tbody > tr > td.general.left {
			padding-right: 6px !important;
			padding-left: 8px !important;
		}
		div#yachtcontent table.all[data-cols="3"] > tbody > tr > td.general.center,
		div#yachtcontent table.all:not([data-cols]) > tbody > tr > td.general.center {
			padding-left: 6px !important;
			padding-right: 6px !important;
		}
		div#yachtcontent table.all[data-cols="3"] > tbody > tr > td.general.right,
		div#yachtcontent table.all:not([data-cols]) > tbody > tr > td.general.right {
			padding-left: 6px !important;
			padding-right: 8px !important;
		}
		div#yachtcontent table.all[data-cols="2"] > tbody > tr > td.general.left,
		div#yachtcontent table.all[data-cols="2"] > tbody > tr > td.general.center,
		div#yachtcontent table.all[data-cols="2"] > tbody > tr > td.general.right {
			padding-left: 8px !important;
			padding-right: 8px !important;
		}
		div#yachtcontent table.all[data-cols="1"] > tbody > tr > td.general.left,
		div#yachtcontent table.all[data-cols="1"] > tbody > tr > td.general.center,
		div#yachtcontent table.all[data-cols="1"] > tbody > tr > td.general.right {
			padding-left: 8px !important;
			padding-right: 8px !important;
		}

		#lm > div[style*="overflow:hidden"] {
			width: 100% !important;
			height: auto !important;
			min-height: 0 !important;
			overflow-x: auto !important;
			overflow-y: hidden !important;
			-webkit-overflow-scrolling: touch !important;
		}
		#lmslider {
			display: flex !important;
			flex-direction: row !important;
			flex-wrap: nowrap !important;
			width: max-content !important;
			max-width: none !important;
			height: auto !important;
			margin-left: 0 !important;
			transition: none !important;
		}
		#lmslider .content {
			float: none !important;
			flex: 0 0 calc((100vw - 56px) / 3) !important;
			width: calc((100vw - 56px) / 3) !important;
			max-width: 300px !important;
			min-width: 0 !important;
			height: auto !important;
			box-sizing: border-box !important;
		}
		#lmslider .content .lm-slide-wrap {
			width: 100% !important;
			padding: 0 6px !important;
		}
		#lmslider .content .lastminute {
			width: 100% !important;
			height: auto !important;
			aspect-ratio: 300 / 186 !important;
			max-height: 200px !important;
		}
		#lmslider .content p {
			max-height: none !important;
			margin: 8px 4px 0 4px !important;
		}
	}

	/* --- 9. OBRAZY GLOBALNIE --- */
	img {
		max-width: 100% !important;
		height: auto;
	}
	.flags img,
	.equipment-row img,
	.legend-item img,
	p.opinl.i img,
	p.inl.i img,
	div.block img,
	.mobile-burger img,
	div#header-menu ul li div img,
	div#photo img {
		max-width: none !important;
	}

}


/* ============================================================
 * BREAKPOINT 2: telefony (<= 600px)
 * ============================================================ */
@media (max-width: 600px) {

	div#photo {
		height: 180px !important;
	}
	div#header-menu {
		margin: calc(-0.5 * (180px + 60px) - 28px) 0 12px 0 !important;
	}
	img#normalheader {
		height: 56px !important;
	}
	div#yachts div#ygallery h1 {
		font-size: 16px !important;
		padding: 6px 8px !important;
	}
	div#footer div#fcontent {
		font-size: 12px !important;
	}
	/* Logo na malych telefonach (<=600px) — lekko mniejszy obraz. */
	.mobile-burger-logo .mobile-burger-logo-main {
		height: clamp(32px, 9vw, 48px) !important;
	}
	div#menu.is-open {
		top: 58px !important;
	}

	/* Kafelki hero - jeszcze ciasniej */
	div#header-menu ul li div {
		height: 60px !important;
	}
	/* Większy obszar dotykowy etykiet na hero-kafelkach */
	div#header-menu ul li div a,
	div#header-menu ul li div a.lm {
		font-size: 11px !important;
		padding: 6px 3px 8px 3px !important;
	}
	div#header-menu ul li div a span {
		font-size: 11px !important;
	}

	/* Kompaktowy badge % na LM sliderze – nie wchodzi na miniaturę */
	div#lm .lm-slider-badge,
	div#lm .lm-slider-badge-dyn {
		right: 6px !important;
		bottom: 6px !important;
		transform: scale(0.9);
		transform-origin: bottom right;
	}

	/* Popupy: full screen na malym telefonie */
	.popup .popup-body,
	#example-popup .popup-body,
	#rate-popup .popup-body,
	#edit-popup .popup-body,
	#reservation-popup .popup-body,
	#pricing-popup .popup-body {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: 0 !important;
		transform: translateX(-50%) !important;
		max-height: calc(100vh - 4px) !important;
		border-radius: 0 !important;
	}

}

/* ============================================================
 * MOBILE ACCORDION (yacht/port/reviews/specs collapsibles)
 * Built dynamically on small screens by inline script in
 * yachtview.tpl. Scoped to <=720px to match the JS breakpoint;
 * desktop and wide tablets keep the original 2-column layout.
 * ============================================================ */
@media (max-width: 720px) {
	div#yachts div#yachtinfo .yacht-mobile-accordion {
		margin: 8px 0 18px 0;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section {
		border: 1px solid #d7dde5;
		border-radius: 5px;
		margin-bottom: 8px;
		background: #fff;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section[open] {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section-head {
		list-style: none;
		cursor: pointer;
		padding: 11px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f4f9fd;
		color: #1e6d9d;
		font-family: "Open Sans", Arial, sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		-webkit-user-select: none;
		user-select: none;
		border-radius: 4px;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section-head::-webkit-details-marker { display: none; }
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section-head::marker { content: ""; }
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section-head:hover { background: #e7f1f9; }
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section[open] > .yacht-mobile-section-head {
		background: #e2eef8;
		border-bottom: 1px solid #d7dde5;
		border-radius: 4px 4px 0 0;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yms-title {
		flex: 1;
		min-width: 0;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yms-count {
		color: #7a8594;
		font-weight: 400;
		font-size: 12px;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yms-chevron {
		color: #1e6d9d;
		transition: transform 0.25s ease;
		font-size: 11px;
		margin-left: 12px;
		flex: 0 0 auto;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section[open] > .yacht-mobile-section-head .yms-chevron {
		transform: rotate(180deg);
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section-body {
		padding: 12px 12px 14px;
		font-family: "Open Sans", Arial, sans-serif;
		font-size: 14px;
		color: #666;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion .yacht-mobile-section-body h3 {
		font-size: 15px;
		color: #666;
		line-height: 1.6;
		font-weight: 500;
		margin: 6px 0 4px;
		padding: 0;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags {
		width: 100%;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags tr {
		border-bottom: 1px dashed #cacaca;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags tr:last-child {
		border-bottom: none;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags tr td {
		vertical-align: middle;
		height: 36px;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags tr td.img {
		width: 36px;
		text-align: center;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags tr td.img img {
		height: 22px;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags tr td.txt {
		font-family: "Open Sans";
		font-size: 14px;
		font-weight: 300;
		color: #666;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags.eq tr td {
		vertical-align: middle;
		height: 24px;
		font-size: 13px !important;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion table.flags.eq tr {
		border-bottom: none;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion tr.portoption td {
		vertical-align: middle;
		font-family: "Open Sans";
		color: #666;
		font-size: 13px;
		font-weight: 300;
		line-height: 1.35;
		text-align: left;
		padding-right: 6px;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion tr.portoption td.img {
		width: 40px;
		min-width: 40px;
		text-align: center;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion tr.portoption td.img img {
		height: 20px;
		padding: 0;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion tr.gratisoption td.txt {
		text-align: left;
		padding-right: 6px;
		font-size: 13px;
		font-weight: 300;
		color: #666;
		line-height: 1.35;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion tr.gratisoption td.img {
		width: 40px;
		min-width: 40px;
		text-align: center;
	}
	div#yachts div#yachtinfo .yacht-mobile-accordion tr.gratisoption td.img img {
		height: 18px !important;
		filter: brightness(0) saturate(100%) invert(46%) sepia(82%) saturate(1510%) hue-rotate(176deg) brightness(93%) contrast(88%);
		display: inline-block;
		vertical-align: middle;
		padding: 0;
	}
	/* Equipment list inside the mobile accordion shouldn't have its own
	   inner scrollbar - the section itself handles disclosure. */
	div#yachts div#yachtinfo .yacht-mobile-accordion #equipment-list {
		max-height: none !important;
		overflow: visible !important;
	}
}