/**
 * Super Yacht Agent - YATCO facelift.
 *
 * Visual alignment of the YATCO Connect plugin output (yacht search/listing,
 * yacht detail pages, broker forms and modal) with the SYA facelift.
 * Uses the design tokens defined in style.css ("Design Tokens").
 * Loaded after style.css, only on YATCO pages (see sya_enqueue_facelift_styles()
 * and sya_is_yatco_page() in functions.php). Do not edit YATCO plugin files.
 */

/* ==========================================================================
   YATCO FACELIFT
   ========================================================================== */

/* Shared: YATCO broker-form buttons (shape and type only) */
/* YATCO buttons already restyled in style.css: align shape and type only. */
#bottom-form-vessel-details .yt-btn,
.yt-input-block .yt-btn-block {
	border-radius: var(--sya-radius) !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
}

/* ==========================================================================
   13. YATCO yacht search / results (visual alignment only)
   Scoped to .yatco-shortcode-yachts-search-form, .yatco-shortcode-yacht-results
   and #yatco-contact-modal (jquery-modal moves the modal out of the results
   container when opened, so it is scoped by its id). CSS only; no behaviour changes.
   !important only where YATCO sets !important on the same property.
   ========================================================================== */

/* Search / Filters */
/* --- 1. Search form: each .col-input (label + inputs) is styled as one 48px field --- */
.yatco-shortcode-yachts-search-form .col-input {
	align-items: center;
	background-color: var(--sya-white);
	border: 1px solid #cfd3da;
	border-radius: var(--sya-radius);
	margin-bottom: var(--sya-space-2);
	min-height: var(--sya-control-h);
	padding: 0 6px 0 14px;
	transition: border-color var(--sya-dur) var(--sya-ease), box-shadow var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yachts-search-form .col-input:hover {
	border-color: #aeb4bf;
}

.yatco-shortcode-yachts-search-form .col-input:focus-within {
	border-color: var(--sya-navy);
	box-shadow: 0 0 0 3px rgba(247, 141, 45, 0.28);
}

/* Label: small uppercase metadata, consistent with other SYA forms */
.yatco-shortcode-yachts-search-form .col-input label {
	color: var(--sya-muted) !important;          /* YATCO: #406695 !important */
	font-family: var(--sya-font);
	font-size: 0.6875rem !important;             /* YATCO: 13px !important */
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0 8px 0 0;
	text-transform: uppercase;
	top: 0;
}

.yatco-shortcode-yachts-search-form .col-input label::after {
	content: "";                                 /* drop YATCO's trailing colon */
}

/* Inputs inside the field box: borderless, the box carries border/focus */
.yatco-shortcode-yachts-search-form .col-input input,
.yatco-shortcode-yachts-search-form .col-input select {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: var(--sya-ink);
	font-family: var(--sya-font);
	font-size: 1rem !important;                  /* 16px: no iOS zoom; YATCO forces 13px */
	line-height: 1.3;
	margin: 0;
	padding: 0 8px;
}

.yatco-shortcode-yachts-search-form .col-input input:focus,
.yatco-shortcode-yachts-search-form .col-input select:focus {
	box-shadow: none;
	outline: none;                               /* focus shown on the whole field box */
}

.yatco-shortcode-yachts-search-form .col-input input::placeholder {
	color: #6e737c !important;                   /* YATCO !important; AA contrast */
}

/* FT/M and currency: compact secondary selectors above the field */
.yatco-shortcode-yachts-search-form .yt-above-input {
	background-color: transparent;
	color: var(--sya-navy) !important;
	font-family: var(--sya-font);
	font-size: 0.75rem !important;
	font-weight: 600;
	height: auto;
	letter-spacing: 0.08em;
	margin: 0;
	min-height: 0;
	top: -28px;
}

.yatco-shortcode-yachts-search-form .yt-above-input:focus-visible {
	outline: 2px solid var(--sya-orange);
	outline-offset: 2px;
}

/* "Advanced Search +" and advanced-form text actions: understated text links */
.yatco-shortcode-yachts-search-form .expand-search,
.yatco-shortcode-yachts-search-form .close-advandenced-search,
.yatco-shortcode-yachts-search-form .SumbitButton_Section .btns-after-submit button {
	color: var(--sya-navy);
	font-family: var(--sya-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yachts-search-form .expand-search:hover,
.yatco-shortcode-yachts-search-form .close-advandenced-search:hover,
.yatco-shortcode-yachts-search-form .SumbitButton_Section .btns-after-submit button:hover {
	color: var(--sya-link);
}

.yatco-shortcode-yachts-search-form .include-filters label {
	color: var(--sya-muted) !important;
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* Search Actions */
/* --- 2. SEARCH YACHTS = SYA primary CTA (width behaviour unchanged) --- */
.yatco-shortcode-yachts-search-form input[type=submit].yt-btn {
	background-color: var(--sya-orange);
	border: 1px solid var(--sya-orange);
	border-radius: var(--sya-radius);
	color: var(--sya-navy);
	font-family: var(--sya-font);
	font-size: 0.8125rem !important;             /* YATCO search-form inputs: 13px !important */
	font-weight: 600;
	height: var(--sya-control-h);
	letter-spacing: 0.1em;
	line-height: 1.2;
	margin: 0;
	padding: 0 1.75em;
	text-transform: uppercase;
	transition: background-color var(--sya-dur) var(--sya-ease), border-color var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yachts-search-form input[type=submit].yt-btn:hover,
.yatco-shortcode-yachts-search-form input[type=submit].yt-btn:focus-visible {
	background-color: var(--sya-orange-deep);
	border-color: var(--sya-orange-deep);
	color: var(--sya-navy);
}

.yatco-shortcode-yachts-search-form input[type=submit].yt-btn:focus-visible {
	outline: 2px solid var(--sya-navy);
	outline-offset: 2px;
}

/* Results Toolbar */
/* --- 3. Results toolbar: Sort By + Gallery/List as a quiet utility bar --- */
.yatco-shortcode-yacht-results > .yt-row.top {
	border-bottom: 1px solid var(--sya-line);
	margin-bottom: var(--sya-space-3);
	padding-bottom: 10px;
}

.yatco-shortcode-yacht-results .sortby {
	align-items: center;
	background-color: transparent;
	display: inline-flex;
	gap: 8px;
	padding: 0;
}

.yatco-shortcode-yacht-results .sortby .label {
	color: var(--sya-muted) !important;          /* YATCO: #406695 !important */
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin-left: 0;
	text-transform: uppercase;
}

.yatco-shortcode-yacht-results .sortby select {
	background-color: var(--sya-white);
	border: 1px solid #cfd3da !important;        /* YATCO: border 0 !important */
	border-radius: var(--sya-radius);
	color: var(--sya-ink);
	font-family: var(--sya-font);
	font-size: 0.8125rem;
	margin: 0;
	min-height: 34px;   /* YATCO forces select.yt-input height:auto !important */
	padding: 0 8px;
}

.yatco-shortcode-yacht-results .sortby select:focus {
	border-color: var(--sya-navy) !important;
	box-shadow: 0 0 0 3px rgba(247, 141, 45, 0.28);
}

.yatco-shortcode-yacht-results .list-or-grid {
	top: 0;
}

.yatco-shortcode-yacht-results .list-or-grid label {
	margin-right: var(--sya-space-2);
}

.yatco-shortcode-yacht-results .list-or-grid label span {
	color: var(--sya-muted);
	display: inline-block;
	font-family: var(--sya-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 6px 0;
	text-transform: uppercase;
	transition: color var(--sya-dur) var(--sya-ease), box-shadow var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yacht-results .list-or-grid label:hover span {
	color: var(--sya-navy);
}

/* Active view: navy text + orange underline (YATCO uses a grey !important chip) */
.yatco-shortcode-yacht-results .list-or-grid input[type=radio]:checked + span {
	background-color: transparent !important;
	box-shadow: inset 0 -2px 0 var(--sya-orange);
	color: var(--sya-navy) !important;
}

.yatco-shortcode-yacht-results .list-or-grid input[type=radio]:focus-visible + span {
	outline: 2px solid var(--sya-orange);
	outline-offset: 3px;
}

/* Yacht Result Cards */
/* --- 4. Result cards: same editorial family as the other SYA cards --- */
.yatco-shortcode-yacht-results .card-container .card {
	border: 1px solid var(--sya-line);
	border-radius: var(--sya-radius);
	box-shadow: none;
	color: var(--sya-text);
	overflow: hidden;
	transition: box-shadow var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yacht-results .card-container .card:hover {
	box-shadow: 0 12px 32px rgba(20, 33, 59, 0.08);
}

.yatco-shortcode-yacht-results .card-container .card .pic {
	overflow: hidden;
}

.yatco-shortcode-yacht-results .card-container .card .pic img {
	transition: transform 700ms var(--sya-ease);
}

.yatco-shortcode-yacht-results .card-container .card:hover .pic img {
	transform: scale(1.035);
}

.yatco-shortcode-yacht-results .card-container .card .pic .overlay {
	background: none;                            /* drop YATCO's dark gradient over photos */
}

.yatco-shortcode-yacht-results .card-container .card .below-picture {
	padding: 18px 20px 20px;
}

/* Name first visually (CSS order only; DOM/data order unchanged) */
.yatco-shortcode-yacht-results .card-container .card.forsaleGallery .link-title {
	display: flex;
	flex-direction: column;
}

.yatco-shortcode-yacht-results .card-container .card.forsaleGallery .card-name {
	order: -1;
}

.yatco-shortcode-yacht-results .card-container .card .card-name {
	color: var(--sya-ink) !important;            /* YATCO .greyfont uses !important */
	font-family: var(--sya-font);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.35;
	padding-bottom: 4px;
}

/* Year / builder / length as metadata */
.yatco-shortcode-yacht-results .card-container .card .card-title:not(.card-name) {
	color: var(--sya-muted);
	font-family: var(--sya-font);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.5;
	padding-bottom: 10px;
	text-transform: uppercase;
}

.yatco-shortcode-yacht-results .card-container .card .card-price {
	color: var(--sya-ink);
	font-family: var(--sya-font);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* --- 5. Contact: understated text CTA (onclick/modal untouched) --- */
.yatco-shortcode-yacht-results .card-container .card .btnRow {
	bottom: 18px;
	right: 20px;
}

.yatco-shortcode-yacht-results .card-container .card .btnRow a,
.yatco-shortcode-yacht-results .card-container .card .btnRow span {
	border-bottom: 1px solid var(--sya-orange);
	color: var(--sya-navy);
	font-family: var(--sya-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	padding: 6px 0 3px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--sya-dur) var(--sya-ease), border-color var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yacht-results .card-container .card .btnRow a:hover,
.yatco-shortcode-yacht-results .card-container .card .btnRow span:hover {
	border-bottom-color: var(--sya-navy);
	color: var(--sya-link);
}

/* Pagination */
/* --- 6. Pagination --- */
.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination {
	margin: var(--sya-space-4) 0 var(--sya-space-2);
	text-align: center;
}

.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers {
	align-items: center;
	border-radius: var(--sya-radius);
	display: inline-flex;
	font-family: var(--sya-font);
	font-size: 0.875rem;
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding: 0 10px;
	text-decoration: none;
	transition: color var(--sya-dur) var(--sya-ease), box-shadow var(--sya-dur) var(--sya-ease);
}

.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers:not(.dots) {
	color: var(--sya-navy) !important;           /* YATCO: blue !important */
	font-weight: 500;
}

.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers.dots {
	color: var(--sya-muted);
}

.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers:not(.dots):hover,
.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers:not(.dots):focus-visible {
	box-shadow: inset 0 -2px 0 var(--sya-orange);
	color: var(--sya-link) !important;
	font-weight: 500;
}

.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers.current {
	box-shadow: inset 0 -2px 0 var(--sya-orange);
	color: var(--sya-navy) !important;
	font-weight: 700;
}

/* Attribution (search / listing) */
/* Powered by YATCO (bare link in page content): gutter + spacing only, size unchanged. */
.entry-content > a:has(> img.poweredbyyatco) {
	display: inline-block;
	margin: var(--sya-space-2) var(--sya-gutter) var(--sya-space-4);
}

/* Contact Broker Modal */
/* --- 7. Contact Broker modal (listing page) --- */
/* Overlay above the site header (z 9999) and hero mute icon (z 999); stacking only. */
.jquery-modal.blocker:has(#yatco-contact-modal) {
	z-index: 10000 !important; /* jquery-modal sets z-index: 500 inline */
}

#yatco-contact-modal.yt-modal {
	background-color: var(--sya-white);
	border-radius: var(--sya-radius);
	box-shadow: 0 20px 50px rgba(20, 33, 59, 0.2);
	padding: var(--sya-space-4) var(--sya-space-4) var(--sya-space-3);
}

#yatco-contact-modal .headings {
	margin-bottom: var(--sya-space-3);
}

#yatco-contact-modal .headings h4 {
	color: var(--sya-ink);
	font-family: var(--sya-font);              /* YATCO: font-family initial (serif) */
	font-size: var(--sya-fs-h3);
	font-weight: 400;
	letter-spacing: -0.01em;
	padding: 0;
}

#yatco-contact-modal .yt-input-block {
	margin-bottom: 12px;
}

#yatco-contact-modal input[type].yt-input,
#yatco-contact-modal textarea.yt-input {
	border: 1px solid #cfd3da;
	border-color: #cfd3da !important;            /* YATCO .yt-modal inputs use !important */
	border-radius: var(--sya-radius) !important;
	color: var(--sya-ink);
	font-family: var(--sya-font);
	font-size: 1rem;
	margin-bottom: 0;
	transition: border-color var(--sya-dur) var(--sya-ease), box-shadow var(--sya-dur) var(--sya-ease);
}

#yatco-contact-modal input[type].yt-input {
	min-height: var(--sya-control-h);            /* YATCO forces height:auto !important */
	padding: 0 14px;
}

#yatco-contact-modal textarea.yt-input {
	min-height: 120px;
	padding: 12px 14px;
}

#yatco-contact-modal .yt-input:focus {
	border-color: var(--sya-navy) !important;
	box-shadow: 0 0 0 3px rgba(247, 141, 45, 0.28);
	outline: none;
}

#yatco-contact-modal .yt-input::placeholder {
	color: #6e737c !important;                   /* YATCO !important; AA contrast */
}

#yatco-contact-modal input[type=submit].yt-btn {
	background-color: var(--sya-orange);
	border: 1px solid var(--sya-orange);
	border-radius: var(--sya-radius);
	color: var(--sya-navy);
	font-family: var(--sya-font);
	font-size: 0.8125rem;
	font-weight: 600;
	height: var(--sya-control-h);
	letter-spacing: 0.1em;
	margin-top: 4px;
	text-transform: uppercase;
	transition: background-color var(--sya-dur) var(--sya-ease), border-color var(--sya-dur) var(--sya-ease);
}

#yatco-contact-modal input[type=submit].yt-btn:hover,
#yatco-contact-modal input[type=submit].yt-btn:focus-visible {
	background-color: var(--sya-orange-deep);
	border-color: var(--sya-orange-deep);
}

#yatco-contact-modal a.close-modal {
	color: var(--sya-navy);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Responsive (search / listing) */
/* --- Responsive --- */
/* Desktop quick-search fields are narrow (4 across): 14px text so placeholders fit;
   phones/tablets keep 16px (prevents iOS zoom). */
@media only screen and (min-width: 960px) {

	.yatco-shortcode-yachts-search-form .col-input input,
	.yatco-shortcode-yachts-search-form .col-input select {
		font-size: 0.875rem !important;
		padding: 0 6px;
	}
}

/* 960-1279px: the four quick-search fields are only ~155px wide, so the label becomes
   a small caption above the inputs inside the same field box (inputs get full width). */
@media only screen and (min-width: 960px) and (max-width: 1279px) {

	.yatco-shortcode-yachts-search-form .col-input {
		align-content: center;
		flex-wrap: wrap;
		padding: 6px 6px 4px 12px;
	}

	.yatco-shortcode-yachts-search-form .col-input label {
		flex: 0 0 100%;
		font-size: 0.625rem !important;
		line-height: 1.2;
		margin: 0 0 2px;
	}

	.yatco-shortcode-yachts-search-form .col-input input,
	.yatco-shortcode-yachts-search-form .col-input select {
		flex: 1 1 40%;      /* forces a new row under the caption; Min and Max share it */
		min-width: 0;
		padding: 0;
	}
}

@media only screen and (max-width: 767px) {

	/* Toolbar wraps cleanly: Gallery/List left, Sort By below on its own line */
	.yatco-shortcode-yacht-results .sortby {
		margin-top: var(--sya-space-1);
	}

	#yatco-contact-modal.yt-modal {
		padding: var(--sya-space-3) var(--sya-space-2) var(--sya-space-2);
	}
}

/* Small phones: keep the full pagination row (incl. ">") on one line. */
@media only screen and (max-width: 480px) {

	.yatco-shortcode-yacht-results .yatco-shortcode-yacht-results-pagination .page-numbers {
		min-width: 34px;
		padding: 0 6px;
	}
}

/* ==========================================================================
   12. YATCO yacht detail pages (visual alignment only)
   Everything is scoped to .vessel-details-style-container (YATCO's page wrapper).
   Selectors mirror YATCO's own specificity; !important only where YATCO/style.css
   use !important or inline styles on the same property. No layout/JS-state changes.
   ========================================================================== */

/* YATCO containers: site gutters instead of YATCO's width: 90%.
   Same content width as the rest of the site (1250px) so text aligns with header/footer;
   the gutter padding also absorbs .yt-row's -15px margins (no horizontal overflow). */
.vessel-details-style-container .yt-container {
	max-width: 1250px;
	padding-left: var(--sya-gutter);
	padding-right: var(--sya-gutter);
	width: 100%;
}

/* Main content column: YATCO's .inner adds another 15px each side; drop it so the
   title, description and specs align with the breadcrumb and the site gutter. */
.vessel-details-style-container #single-yacht-about-the-boat .yachtdetail_left > .inner {
	padding-left: 0;
	padding-right: 0;
}

/* Yacht Detail – Layout */
/* The YATCO wrapper is a flex item in Genesis's content row; let it shrink below the
   nowrap breadcrumb's intrinsic width so the ellipsis can take effect (no overflow). */
.vessel-details-style-container {
	min-width: 0;
}

/* Yacht Detail – Breadcrumbs */
/* --- 1. Breadcrumb / Back to search --- */
/* Flex row: trail left, "Back to search" right; never collide. YATCO's floats are ignored in flex. */
.vessel-details-style-container #top-links {
	align-items: center;
	border-bottom: 1px solid var(--sya-line);
	column-gap: var(--sya-space-3);
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 14px 0;
	row-gap: 6px;
}

.vessel-details-style-container #top-links .yt-clearfix {
	display: none; /* float clearer, not needed in flex */
}

.vessel-details-style-container #top-links .breadcrumb {
	align-items: center;
	border-bottom: 0;   /* Genesis .breadcrumb rule in style.css adds its own underline */
	display: flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	font-size: inherit;
	margin-bottom: 0;
	min-width: 0;
	padding-bottom: 0;
}

.vessel-details-style-container .breadcrumb > li {
	align-items: center;
	display: flex;
	flex: 0 0 auto;      /* Home and Yacht Search never shrink */
	white-space: nowrap;
}

/* Only the current (last) item truncates; full text stays in the DOM. */
.vessel-details-style-container .breadcrumb > li:last-child {
	flex: 0 1 auto;
	min-width: 0;
}

.vessel-details-style-container .breadcrumb > li:last-child > a,
.vessel-details-style-container .breadcrumb > li:last-child > span {
	display: block;
	max-width: 440px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vessel-details-style-container #top-links .yt-pull-right {
	flex: 0 0 auto;
	white-space: nowrap;
}

.vessel-details-style-container #top-links a,
.vessel-details-style-container #top-links span {
	color: var(--sya-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-decoration: none !important; /* YATCO forces underline with !important */
}

.vessel-details-style-container #top-links a:hover,
.vessel-details-style-container #top-links a:focus-visible {
	color: var(--sya-link);
	text-decoration: underline !important;
	text-decoration-color: var(--sya-orange) !important;
}

.vessel-details-style-container .breadcrumb > li + li::before {
	color: var(--sya-stone);
	content: "\203A"; /* › */
	flex: 0 0 auto;
	height: auto;
	margin: 0 0.6em;
	width: auto; /* style.css gives list ::before a 15px tick-bullet box */
}

/* No leading separator/tick-bullet box before "Home". */
.vessel-details-style-container .breadcrumb > li:first-child::before {
	display: none;
}

.vessel-details-style-container .breadcrumb > li:last-child > a,
.vessel-details-style-container .breadcrumb > li:last-child > span {
	color: var(--sya-ink);
}

/* Keep breadcrumbs on tablet/mobile (YATCO hides the trail <=960px and the whole bar <=720px). */
@media only screen and (max-width: 960px) {

	.vessel-details-style-container #top-links .breadcrumb {
		display: flex;
	}
}

@media only screen and (max-width: 720px) {

	/* Back to search drops to its own line instead of squeezing the trail. */
	.vessel-details-style-container #top-links {
		display: flex;
		flex-wrap: wrap;
		padding: 12px 0; /* side gutter comes from .yt-container */
	}

	.vessel-details-style-container #top-links .breadcrumb {
		flex-basis: 100%;
	}

	.vessel-details-style-container .breadcrumb > li:last-child > a,
	.vessel-details-style-container .breadcrumb > li:last-child > span {
		max-width: 170px;
	}
}

/* Yacht Detail – Hero Gallery */
/* --- 2. Top gallery (Flickity): controls only --- */
.vessel-details-style-container #yt-light-slider-gallery .carousel-cell {
	border-radius: 0;
}

.vessel-details-style-container #yt-light-slider-gallery .flickity-button {
	background-color: rgba(255, 255, 255, 0.88) !important; /* YATCO sets blue with !important */
	border-radius: var(--sya-radius);
	color: var(--sya-navy);
	transition: background-color var(--sya-dur) var(--sya-ease), color var(--sya-dur) var(--sya-ease);
}

.vessel-details-style-container #yt-light-slider-gallery .flickity-button:hover {
	background-color: var(--sya-navy) !important;
	color: var(--sya-white);
}

.vessel-details-style-container #yt-light-slider-gallery .flickity-button:focus {
	box-shadow: none;
}

.vessel-details-style-container #yt-light-slider-gallery .flickity-button:focus-visible {
	outline: 2px solid var(--sya-orange);
	outline-offset: 2px;
}

.vessel-details-style-container .flickity-page-dots .dot {
	background: var(--sya-navy);
}

.vessel-details-style-container .flickity-page-dots .dot.is-selected {
	background: var(--sya-orange);
}

/* Yacht Detail – Secondary Navigation */
/* --- 3. Yacht secondary navigation --- */
.vessel-details-style-container #single-yacht-top-nav {
	border-bottom: 1px solid var(--sya-line);
	padding: 6px 0;
}

.vessel-details-style-container #single-yacht-top-nav .nav-links {
	align-items: center;
	margin-top: 0;
}

.vessel-details-style-container #single-yacht-top-nav .nav-links a {
	color: var(--sya-navy);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	padding: 14px 4px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--sya-dur) var(--sya-ease), box-shadow var(--sya-dur) var(--sya-ease);
}

.vessel-details-style-container #single-yacht-top-nav .nav-links a:hover,
.vessel-details-style-container #single-yacht-top-nav .nav-links a:focus-visible {
	box-shadow: inset 0 -1px 0 var(--sya-orange);
	color: var(--sya-navy);
}

/* Yacht Detail – Quick Specs */
/* --- 4. Quick specs: VALUE over a small label, thin dividers --- */
.vessel-details-style-container #single-yacht-quick-specs.ycd-mini-specs-container {
	background-color: var(--sya-sand-light);
	border-bottom: 1px solid var(--sya-line);
	padding: var(--sya-space-4) 0;
}

.vessel-details-style-container #single-yacht-quick-specs .ycd-mini-specs {
	color: var(--sya-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	margin: 0;
	padding: 0 clamp(1.5rem, 3vw, 3.5rem);
	text-transform: uppercase;
}

.vessel-details-style-container #single-yacht-quick-specs .ycd-mini-specs + .ycd-mini-specs {
	border-left: 1px solid var(--sya-line);
}

.vessel-details-style-container #single-yacht-quick-specs .ycd-specs-values {
	color: var(--sya-ink);
	font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 6px;
	text-transform: none;
}

/* Yacht Detail – Main Content */
/* --- 5. Title & description --- */
.vessel-details-style-container .yachtdetail_left #single-yacht-content .ycd-title {
	color: var(--sya-ink);
	font-family: var(--sya-font); /* YATCO sets font-family: initial (serif) */
	font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: var(--sya-space-2) 0 var(--sya-space-3);
	padding: 0;
	text-wrap: balance;
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content hr {
	border-bottom-color: var(--sya-line);
	color: var(--sya-line);
	margin: var(--sya-space-4) 0;
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content #ycd-description {
	color: var(--sya-text);
	font-size: 1rem;
	line-height: 1.75;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content #ycd-description p {
	padding: 0;
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content .read-more,
.vessel-details-style-container .yachtdetail_left #single-yacht-content .read-less {
	color: var(--sya-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content .read-more:hover,
.vessel-details-style-container .yachtdetail_left #single-yacht-content .read-less:hover {
	color: var(--sya-link);
}

/* Yacht Detail – Broker Form */
/* --- 6. Broker enquiry forms (sidebar, mobile and bottom band) --- */
.vessel-details-style-container .yachtdetail_right .inner,
.vessel-details-style-container .mobile-broker .inner {
	background-color: var(--sya-white);
	border: 1px solid var(--sya-line);
	border-radius: var(--sya-radius);
	box-shadow: none;
	padding: var(--sya-space-3);
}

/* Form heading has inline styles in YATCO markup, hence !important. */
.vessel-details-style-container .YachtDetail_ContactForm > div:first-child[style] {
	color: var(--sya-navy) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	padding-bottom: var(--sya-space-2) !important;
}

.vessel-details-style-container .contact-broker-form input[type].yt-input,
.vessel-details-style-container .contact-broker-form textarea.yt-input,
.vessel-details-style-container .yachtdetail_right .contact-broker-form .yt-input,
.vessel-details-style-container .mobile-broker .contact-broker-form .yt-input {
	border: 1px solid #cfd3da;
	border-radius: var(--sya-radius);
	color: var(--sya-ink);
	font-family: var(--sya-font);
	font-size: 1rem;
	line-height: 1.4;
	margin-bottom: 0;
	transition: border-color var(--sya-dur) var(--sya-ease), box-shadow var(--sya-dur) var(--sya-ease);
}

.vessel-details-style-container .contact-broker-form input[type].yt-input {
	min-height: var(--sya-control-h); /* YATCO forces height:auto !important; min-height gives 48px */
	padding: 0 14px;
}

.vessel-details-style-container .contact-broker-form textarea.yt-input {
	min-height: 140px;
	padding: 12px 14px;
}

.vessel-details-style-container .contact-broker-form .yt-input:focus {
	border-color: var(--sya-navy);
	box-shadow: 0 0 0 3px rgba(247, 141, 45, 0.28);
	outline: none;
}

.vessel-details-style-container .contact-broker-form .yt-input::placeholder,
.vessel-details-style-container .yachtdetail_right .contact-broker-form .yt-input::placeholder,
.vessel-details-style-container .mobile-broker .contact-broker-form .yt-input::placeholder {
	color: #6e737c !important; /* YATCO uses !important; AA contrast on white */
}

.vessel-details-style-container .contact-broker-form .yt-input-block {
	margin-bottom: 12px;
}

/* On the navy band the fields sit borderless, like the other dark SYA forms. */
.vessel-details-style-container #single-yacht-brokers .contact-broker-form .yt-input {
	border-color: transparent;
}

.vessel-details-style-container #single-yacht-brokers .contact-broker-form .yt-input:focus {
	border-color: var(--sya-orange);
}

/* MESSAGE BROKER / CONTACT BROKER = SYA primary CTA. */
.vessel-details-style-container .contact-broker-form input[type=submit].yt-btn,
.vessel-details-style-container #bottom-form-vessel-details input[type=submit].yt-btn {
	background-color: var(--sya-orange) !important;
	border: 1px solid var(--sya-orange) !important;
	border-radius: var(--sya-radius) !important;
	color: var(--sya-navy) !important;
	font-family: var(--sya-font) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	height: auto;
	letter-spacing: 0.1em !important;
	line-height: 1.2;
	margin-bottom: 0 !important;
	min-height: var(--sya-control-h);
	padding: 0.75em 1.75em !important;
	text-transform: uppercase;
	transition: background-color var(--sya-dur) var(--sya-ease), border-color var(--sya-dur) var(--sya-ease);
}

.vessel-details-style-container .contact-broker-form input[type=submit].yt-btn:hover,
.vessel-details-style-container .contact-broker-form input[type=submit].yt-btn:focus-visible,
.vessel-details-style-container #bottom-form-vessel-details input[type=submit].yt-btn:hover,
.vessel-details-style-container #bottom-form-vessel-details input[type=submit].yt-btn:focus-visible {
	background-color: var(--sya-orange-deep) !important;
	border-color: var(--sya-orange-deep) !important;
}

/* Yacht Detail – Specifications */
/* --- 7. Specification grid: small label, clear value, thin dividers --- */
.vessel-details-style-container .yachtdetail_left #single-yacht-content #yc-details-specs .ycd-specs {
	border-top: 1px solid var(--sya-line);
	font-size: 1rem;
	line-height: 1.35;
	padding: 14px 0 16px;
}

/* First visual row sits directly under YATCO's <hr>: avoid a double line
   (2 cells per row on mobile, 4 from YATCO's md breakpoint). */
.vessel-details-style-container .yachtdetail_left #single-yacht-content #yc-details-specs #features + .yt-row > :nth-child(-n+2) .ycd-specs {
	border-top: 0;
}

@media only screen and (min-width: 768px) {

	.vessel-details-style-container .yachtdetail_left #single-yacht-content #yc-details-specs #features + .yt-row .ycd-specs {
		border-top: 0;
	}
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content #yc-details-specs span.ycd-specs-title {
	color: var(--sya-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.vessel-details-style-container .yachtdetail_left #single-yacht-content #yc-details-specs .ycd-specs-loa {
	color: var(--sya-ink);
	font-weight: 500;
}

/* Yacht Detail – Gallery */
/* --- 8. Photo gallery --- */
.vessel-details-style-container .gallery-panel .col-pic .pic-overlay {
	background-color: rgba(27, 43, 75, 0.55);
	box-shadow: inset 0 -2px 0 var(--sya-orange);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: opacity 250ms var(--sya-ease);
}

/* VIEW ALL PHOTOS / VIEW LESS PHOTOS = SYA secondary CTA (YATCO colours use !important). */
.vessel-details-style-container .gallery-panel .view-all-button .yt-btn {
	background-color: var(--sya-white) !important;
	border: 1px solid var(--sya-navy) !important;
	border-radius: var(--sya-radius);
	color: var(--sya-navy) !important;
	font-family: var(--sya-font);
	font-size: 0.8125rem;
	font-weight: 600;
	height: auto;
	letter-spacing: 0.1em;
	line-height: 1.2;
	min-height: var(--sya-control-h);
	min-width: 0;
	padding: 0.95em 1.75em;
	transition: background-color var(--sya-dur) var(--sya-ease), color var(--sya-dur) var(--sya-ease);
}

.vessel-details-style-container .gallery-panel .view-all-button .yt-btn:hover,
.vessel-details-style-container .gallery-panel .view-all-button .yt-btn:focus-visible {
	background-color: var(--sya-navy) !important;
	color: var(--sya-white) !important;
}

/* Yacht Detail – Accordion */
/* --- 9. Full specifications accordion (matches destination FAQ) --- */
.vessel-details-style-container #details .section-heading {
	border-bottom: 0;
	color: var(--sya-ink);
	font-family: var(--sya-font); /* YATCO sets font-family: initial (serif) */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: var(--sya-space-5) 0 0;
	padding: 0 0 var(--sya-space-2);
}

.vessel-details-style-container #details .section-content {
	border-top: 1px solid var(--sya-line);
	margin-bottom: var(--sya-space-5);
}

.vessel-details-style-container #details .accordion {
	border-bottom: 1px solid var(--sya-line);
	border-top: 0;
	color: var(--sya-ink);
	cursor: pointer;
	font-family: var(--sya-font);
	font-size: var(--sya-fs-h4);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0;
	padding: 20px 2.5em 20px 0;
	text-align: left;
	white-space: normal;
}

.vessel-details-style-container #details .accordion:hover {
	color: var(--sya-link);
}

/* + closed / − open, driven by YATCO's own .active class (no JS changes). */
.vessel-details-style-container #details .accordion::after {
	color: var(--sya-link);
	content: "+";
	float: none;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	margin: 0;
	position: absolute;
	right: 0;
	top: 18px;
}

.vessel-details-style-container #details .accordion.active::after {
	content: "\2212";
}

.vessel-details-style-container #details ._panel {
	background-color: transparent;
	border-bottom: 1px solid var(--sya-line);
	padding: 0 2.5em 18px 0;
}

.vessel-details-style-container #details ._panel p {
	padding: 0;
}

/* Attribution (yacht detail) */
/* --- 10. Powered by YATCO (attribution unchanged; spacing only) --- */
.vessel-details-style-container .yachtdetail_left .inner > .yt-text-right {
	margin-top: var(--sya-space-3);
	padding-top: var(--sya-space-2);
}

/* Responsive (yacht detail) */
/* --- Mobile --- */
@media only screen and (max-width: 600px) {

	.vessel-details-style-container .yachtdetail_left #single-yacht-content .ycd-title {
		text-align: left;
	}

	.vessel-details-style-container .yachtdetail_right .inner,
	.vessel-details-style-container .mobile-broker .inner {
		padding: var(--sya-space-2);
	}

	.vessel-details-style-container #details .accordion {
		padding-right: 2em;
	}
}