/* ==========================================================================
   Fonts
   No custom @font-face declarations yet. Add @font-face rules here once
   Cool Beans brand font files are placed in /fonts.
   ========================================================================== */

:root {
	--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* ==========================================================================
   Cool Beans Brand Overrides
   Only override the --xo-* variables xo-dna exposes for branding.
   Do not redeclare xo-dna's primitive or semantic variable names.
   ========================================================================== */

:root {
	/* --xo-brand-primary: #___; */
	/* --xo-brand-secondary: #___; */
	/* --xo-brand-accent: #___; */
   --color-black: #000;
   --color-white: #fff;
   --color-turquoise: #18dcdb;
   --color-turquoise-over: #09ccc6;
   --superlight-blue: #e5fbf7;
   --xo-bg-light-blue: #e4f6f9;
   --xo-coolbeans-seafoam: #c9f4ed;
   --xo-coolbeans-seafoam-blue: #cdf3f7;
   --xo-coolbeans-cta-over-bg: #def9f4;
   --xo-coolbeans-blue: #0066b2;
   --color-deep-blue: #0044a1;
   --color-creamy-yellow: #fffeea;
   --color-light-grey-bg: #e8e8e8;

   /* Mobile menu colors */
   --xo-coolbeans-menu-background: #eeffff;
   --xo-coolbeans-submenu-text: #00779b;
   --xo-coolbeans-booking-blue: #0059ba;
   --xo-coolbeans-icon-blue: #82b5d8;

   --xo-coolbeans-blue-over: #1c7da3;
   --xo-coolbeans-blue-footer: #1d689c;
   --xo-coolbeans-submenu-bg: var( --superlight-blue );
   --bg-light-blue: var( --xo-bg-light-blue );
   --color-nav-background: transparent;
   --header-background-color: rgba(255, 255, 255, 0.777 );
   --header-sticky-background-color: rgba(0, 0, 0, 0.777 );
   --color-header-nav-text: var( --color-black );
   --color-header-sticky-nav-text: var( --color-white );
   --xo-coolbeans-lavender: #ece7f7;
   --xo-coolbeans-purple: #4b2a86;
   --xo-coolbeans-navy: #12307a;
   --xo-coolbeans-pale-cyan: #cdf3f7;
   --xo-slider-max-width: 90rem;

   /* Typography */
   --xo-font-size-h1: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
}

:root,
html[data-xo-theme="light"] {
   --color-nav-background: transparent;
   --color-nav-text: var( --color-header-nav-text );
}
/* ==========================================================================
   Base element overrides
   Add rules here only when Cool Beans needs to diverge from xo-dna's base
   element styles.
   ========================================================================== */


/* Typography */

h1{ font-size: var( --xo-font-size-h1 ); }


/* Buttons */

/*
 * ".wp-block-button__link.wp-element-button" (rather than just
 * ".wp-block-button__link") matches WordPress core's own default button
 * rule in specificity-breaking order: both classes are always present on
 * rendered button blocks, so this compound selector outscores core's
 * single-class rule regardless of stylesheet load order. Without it, core's
 * default background wins in the block editor iframe while ours wins on
 * the front end, since the two contexts print core and theme styles in a
 * different order.
 */
.button,
.wp-block-button__link,
.wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.555rem 1.444rem;
	border-radius: var(--radius);
	background: var(--color-button-background);
	color: var(--color-button-text);
	text-decoration: none;
	font-weight: 700;
	border: 1px solid var(--color-button-background);
}


.btn{
    display: inline-block;
    background: var(--xo-coolbeans-blue );
    color: var( --color-white );
    border-radius: 1.5rem;
    padding: .65rem 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
a.btn:hover{
	background: var(--xo-coolbeans-blue-over);
	color: var( --color-white );
}
/* ==========================================================================
   Layout overrides
   Add rules here only when Cool Beans needs to diverge from xo-dna's layout
   styles.
   ========================================================================== */


/* --- Body --- */

body{ font-size: clamp(1rem, 2vw, 1.125rem); }

/* --- Headings & Titles --- */

.xo-page-title{ margin: clamp(2rem, 5vw, 4rem) 0 clamp(1rem, 4vw, 3rem) 0;font-size: 1.75rem; text-align: center; }
.xo-page-title h1 { font-size: clamp(1.75rem, 3vw, 2.75rem); margin: 0 0 0 0; color: var(    --xo-coolbeans-purple ); }

/* --- Header --- */
.xo-site-header{ background-color: var( --header-background-color ); }
.xo-header-is-stuck .xo-site-header{ background-color: var( --header-sticky-background-color ); }
/* Blur lives on a pseudo-element: backdrop-filter on .xo-site-header itself would make it the containing block for the position:fixed mobile menu overlay inside it. */
.xo-header-is-stuck .xo-site-header::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.xo-header-is-stuck .xo-site-header__phone a{ color: var( --color-turquoise ); }
.xo-header-is-stuck nav.xo-site-header__navigation a.wp-block-navigation-item__content, nav.xo-site-header__navigation button.wp-block-navigation-item__content{ color: var( --color-header-sticky-nav-text ); }
.xo-header-is-stuck nav.xo-site-header__navigation .wp-block-navigation__submenu-icon{ color: var( --color-header-sticky-nav-text ); }
.xo-header-is-stuck nav.xo-site-header__navigation .wp-block-navigation__submenu-icon svg{ stroke: currentColor; }
.xo-header-is-stuck .xo-site-header .wp-block-button__link{ background-color: var( --color-turquoise ); color: var( --color-black ); }
.xo-site-header .wp-block-button__link{ background-color: var( --xo-coolbeans-blue ); color: var( --color-white ); }
.xo-site-header__navigation-row{ margin-block-start: 0; margin-block-end: 0; }
nav.xo-site-header__navigation{ border-radius: 2rem; }
nav.xo-site-header__navigation > ul > li > .wp-block-navigation-item__content { font-size: 1.2rem; font-weight: 600; text-transform: uppercase; }
nav.xo-site-header__navigation.xo-site-header__navigation--centered .wp-block-navigation__container{ justify-content: space-evenly; }
nav.xo-site-header__navigation .wp-block-navigation__submenu-container{ background-color: var(--xo-coolbeans-submenu-bg) !important; border: none; }
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{ background-color: var(--xo-coolbeans-submenu-bg) !important; border: none; }
.xo-site-header__cta .wp-block-button__link, .xo-site-header__cta .wp-block-button__link.wp-element-button{ border-radius: 1rem; font-size: 1.0625rem; border: none; }
.xo-site-header__cta .wp-block-button__link:hover, .xo-site-header__cta .wp-block-button__link.wp-element-button:hover{ border:none; background-color: var( --color-turquoise-over); color: var( --color-black ); }
.xo-site-header__inner{ padding-inline: var(--xo-header-gutter-mobile); }
.xo-site-header__phone{ font-size: 1.555rem; }
.xo-site-header__phone a{ color: var( --xo-coolbeans-blue ); }
.xo-site-header__phone a:hover{ color: var( --xo-coolbeans-blue-over); }
@media( min-width: 783px ){
   .xo-site-header__inner{ padding-inline: var(--xo-header-gutter); }
}

/* =========================================================
   Desktop Navigation — Dropdown Menus
   ========================================================= */

.xo-site-header__navigation .wp-block-navigation__submenu-container {
	width: -moz-max-content;
	width: max-content;
	min-width: 15rem;
	padding: 0.5rem 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.75rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

/* Dropdown links */
.xo-site-header__navigation
	.wp-block-navigation__submenu-container
	> .wp-block-navigation-item
	> .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.75rem 2rem;

	font-size: 1.125rem;
	line-height: 1.4;
	white-space: nowrap;
}

/* Dropdown hover / focus */
.xo-site-header__navigation
	.wp-block-navigation__submenu-container
	> .wp-block-navigation-item
	> .wp-block-navigation-item__content:hover,
.xo-site-header__navigation
	.wp-block-navigation__submenu-container
	> .wp-block-navigation-item
	> .wp-block-navigation-item__content:focus {
	background: #c9f4ed;
}


/* --- Main Content --- */

.bg-blue{ background-color: var(--color-deep-blue); }
.bg-light-blue{ background-color: var(--bg-light-blue); }
.bg-creamy-yellow{ background-color: var(--color-creamy-yellow); }
.blue-frame{ border: 5px solid var(--bg-light-blue); }

/* --- Homepage Content --- */

.xo-section.homepage-introduction{ padding: 2rem 0 1rem 0; }
.xo-section.section-home{ padding: 2rem 0 2rem 0; }
.xo-section.section-home-our-boats{ background-color: var(--color-light-grey-bg); }
.xo-section.section-home-our-boats .boat-name a{ color: var( --color-black ); }
@media( min-width: 90rem ){
	.xo-section.homepage-introduction{ font-size: 1.25rem; }
}

/* --- Team --- */

.xo-team .xo-team-intro{ margin: 0 0 0 0; padding: 2rem 0 2rem 0; font-size: clamp(1.222rem, 3vw, 2.333rem); line-height: 1.2; }

/* Team member sections (core blocks): circle photo floats left on desktop, centered on mobile */
.xo-section.xo-team-member{ padding: 2rem 0; }
.xo-team-member .xo-team-photo{ margin: 0 0 1rem 0; text-align: center; }
.xo-team-member .xo-team-photo img{ display: block; width: 100%; max-width: 266px; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; border-radius: 50%; margin: 0 auto; }
.xo-team-member h2{ font-size: 1.5rem; margin: 0 0 .75rem 0; text-align: center; }
@media( min-width: 783px ){
	.xo-team-member .xo-team-photo{ float: left; margin: 0 2rem 1rem 0; }
	.xo-team-member h2{ text-align: left; }
}
.xo-team-member .xo-container__inner::after{ content: ""; display: block; clear: both; }
@media( max-width: 782px ){
	.xo-team-member .xo-team-photo.alignleft{ float: none; margin: 0 auto 1rem auto; display: block; }
}

/* --- Shelling page (XO Sections + core blocks; effects are xo-reveal classes in the content) --- */

.xo-section.shelling-intro,
.xo-section.shelling-why,
.xo-section.shelling-treasures,
.xo-section.shelling-area,
.xo-section.shelling-faq{ padding: 3rem 0; }
.xo-section[class*="shelling-"] h2{ font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0 0 1.5rem 0; }
.shelling-lead{ margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; }
.shelling-why-text{ max-width: 48rem; margin: 0 auto 2rem auto; text-align: center; }

.shelling-perks .wp-block-column{ display: flex; }
.shelling-perk{ flex: 1; padding: 1.5rem; background: var(--color-white); border-top: 4px solid var(--color-turquoise); border-radius: .75rem; box-shadow: 0 .25rem 1rem rgba(0, 68, 161, .08); }
.shelling-perk h3{ margin: 0 0 .5rem 0; font-size: 1.25rem; }
.shelling-perk p{ margin: 0; }

.shelling-grid{ gap: 1.5rem; margin-top: 2rem; }
@media( max-width: 480px ){
	.shelling-grid.is-layout-grid{ grid-template-columns: 1fr; }
}
.shelling-card{ padding: 1.5rem 1rem; text-align: center; border: 1px solid #d3edf2; border-radius: .75rem; }
.shelling-card h3{ margin: 0 0 .5rem 0; font-size: 1.25rem; }
.shelling-card p{ margin: 0; }
/* Shell photos are squares on a flat beige; the circle carries that beige and the photo sits
   inside it (72% ≈ the inscribed square) so nothing is cropped. */
.shelling-card figure.shelling-photo{ display: flex; align-items: center; justify-content: center; width: 180px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 1rem auto; border-radius: 50%; background: rgb(228, 225, 220); }
.shelling-photo img{ display: block; width: 72%; height: auto; aspect-ratio: 1; -o-object-fit: contain; object-fit: contain; border-radius: 0; }
.shelling-card p.shelling-rarity{ display: inline-block; margin: 0 0 .75rem 0; padding: .15rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--color-light-grey-bg); color: #333; }
.shelling-card p.shelling-rarity--uncommon{ background: var(--xo-coolbeans-seafoam); color: var(--xo-coolbeans-submenu-text); }
.shelling-card p.shelling-rarity--rare{ background: var(--color-deep-blue); color: var(--color-white); }

.shelling-map{ max-width: 640px; margin: 0 auto; }
.shelling-map img{ width: 100%; border-radius: .75rem; box-shadow: 0 .25rem 1rem rgba(0, 68, 161, .15); }

.shelling-faqs{ max-width: 50rem; margin: 0 auto; }
.shelling-faqs details{ margin: 0 0 .75rem 0; background: var(--color-white); border: 1px solid #d3edf2; border-radius: .5rem; }
.shelling-faqs summary{ padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; }
.shelling-faqs details[open] summary{ border-bottom: 1px solid #d3edf2; }
.shelling-faqs details > :not(summary){ margin: 1rem 1.25rem; }

/* --- Featured review page (XO Sections + core blocks; effects are xo-reveal classes in the content) --- */

.xo-section.review-showcase{ padding: 3rem 0; overflow-x: clip; }
.xo-section.review-closing{ padding: 3rem 0; color: var(--color-white); }
.xo-section.review-closing h2{ margin: 0 0 .5rem 0; color: var(--color-white); }
.xo-section.review-closing p{ margin: 0 0 1.5rem 0; }
.review-eyebrow{ margin: 0 0 .25rem 0; font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-deep-blue); }
.xo-section.review-showcase > .xo-container > .xo-container__inner > h2{ margin: 0 0 2rem 0; font-size: clamp(2rem, 5vw, 3.25rem); color: var(--color-deep-blue); }

.review-card{ padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--color-white); border-radius: 1.5rem; box-shadow: 0 .5rem 2rem rgba(0, 68, 161, .12); }
.review-card p{ margin: 0 0 1rem 0; line-height: 1.6; }
.review-card strong{ color: #00826a; }
.review-stars{ margin: 0 0 .5rem 0; font-size: 1.75rem; letter-spacing: .2em; color: #00a680; }
.review-card h2.review-headline{ margin: 0 0 1rem 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; text-transform: uppercase; color: var(--color-deep-blue); }
.review-headline em{ display: inline-block; margin-top: .25rem; font-size: 1.25em; text-transform: none; color: #00a680; }
.review-card p.review-meta{ font-size: .95rem; }
.review-meta strong{ color: inherit; }
.review-card figure.review-badge{ margin: 0; }
.review-badge img{ display: block; width: 200px; max-width: 100%; height: auto; }

.review-polaroids{ gap: 1.25rem; }
@media( min-width: 783px ){
	.review-polaroids{ position: sticky; top: 7rem; }
}
.review-polaroids figure.review-polaroid{ margin: 0; padding: .6rem .6rem 0 .6rem; background: var(--color-white); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .2); transform: rotate(-2deg); }
.review-polaroids figure.review-polaroid:nth-child(even){ transform: rotate(2deg); }
.review-polaroid img{ display: block; width: 100%; aspect-ratio: 4 / 3; -o-object-fit: cover; object-fit: cover; }
.review-polaroid figcaption{ margin: 0; padding: .6rem 0; font-style: italic; text-align: center; color: var(--color-deep-blue); }

/* --- Slider --- */

.xo-slider{ overflow: hidden; max-width: var( --xo-slider-max-width ); margin: 0 auto; }
.xo-slider__next, .xo-slider__previous{
	display: none;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
}

@media (min-width: 783px){
	.xo-slider__next, .xo-slider__previous{
		display: inline-flex;
	}
}

/* Slider media
--------------------------------------------- */

.xo-slider__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.xo-slider__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.xo-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* --- Cruise Cards --- */
.xo-cruise-cards-container{ padding: 2rem 0 2rem 0; }

/* Section title (content-less; the plugin block has no heading) */
.xo-cruise-cards-container .xo-container::before{ content: "Sailing & Excursion Packages"; display: block; margin: 0 0 1.5rem; color: #fff; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.2; text-align: center; }

/* 1 up mobile, 2 up tablet, 3 over 3 desktop (overrides plugin's 4-up) */
.xo-cruise-cards-container .xo-cruise-cards{ grid-template-columns: minmax(0, 1fr); }
@media (min-width: 783px){ .xo-cruise-cards-container .xo-cruise-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem){ .xo-cruise-cards-container .xo-cruise-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xo-cruise-cards-container .xo-cruise-cards .xo-cruise-card__image{ border: 1px solid #fff; }
.xo-cruise-cards-container .xo-cruise-cards .xo-cruise-card__prices{ font-weight: 600; }

/* Mobile: 4:3
--------------------------------------------- */

@media (max-width: 480px) {

	.xo-slider__media {
		aspect-ratio: 4 / 3;
	}

}


/* Large desktop: panoramic
 * Approx. 1136 × 505 = 2.25:1
--------------------------------------------- */

@media (min-width: 1200px) {

	.xo-slider__media {
		aspect-ratio: 2.25 / 1;
	}

}

.xo-review-cards{ padding: 2rem 0 0 0; }
.coolbeans-contact-form{ padding: 2rem 2rem 2rem 2rem; border: 1px solid var( --xo-coolbeans-seafoam-blue ); border-radius: 1.5rem; }

/* --- Footer --- */

.xo-site-footer{ padding-block: 0px; }
.xo-customer-reviews{ background-color: var(--bg-light-blue); color: var( --color-black ); padding: 2.5rem 0 2.5rem 0; }
.xo-customer-reviews__heading, .xo-customer-reviews__links{ margin: 0px auto; }
.xo-customer-reviews__heading{ display: table; margin: 0 auto 1.5rem auto; }
.xo-customer-reviews__links{ display: flex; justify-content: center; gap: 1rem; }
.xo-customer-reviews__links a{ color: var(  --xo-coolbeans-blue-footer ); text-transform: uppercase; font-weight: 600; }
@media( min-width: 783px ){
	.xo-customer-reviews__heading{ display: table; margin: 0 auto 2rem auto; }
	.xo-customer-reviews__links{ gap: 3rem; }
}

.xo-site-footer__copyright{ text-align: center; padding: 1rem 0; }

/* Footer information stays within the existing three-column block layout. */
.xo-site-footer__bottom { padding-block: clamp(2.5rem, 5vw, 4rem) 1.25rem; }
.xo-footer-columns { gap: clamp(2rem, 5vw, 5rem); margin-bottom: 2.5rem; }
.xo-footer-columns h2 { color: inherit; font-size: 1.25rem; margin: 0 0 1.25rem; }
.xo-footer-columns p { margin-block: 1rem; }
.xo-footer-columns .wp-block-xo-dna-site-logo { max-width: 180px; margin-bottom: 1.25rem; }
.xo-footer-columns .contact-info { line-height: 1.5; }
.xo-footer-links { list-style: none; padding: 0; margin: 0; }
.xo-footer-links li { margin-bottom: 0.85rem; }
.xo-site-footer__bottom a:not(.wp-element-button) { color: inherit; text-underline-offset: 0.2em; }
.xo-site-footer__bottom a:not(.wp-element-button):hover { color: var(--color-turquoise); }
.xo-site-footer__bottom a:focus-visible { outline: 2px solid var(--color-turquoise); outline-offset: 5px; }
.xo-footer-columns .wp-element-button { background: var(--color-turquoise); color: #111; border: 0; border-radius: 1.5rem; font-weight: 700; }
.xo-footer-columns .wp-element-button:hover { background: var(--color-turquoise-over); }
.xo-footer-columns .xo-footer-follow { margin-top: 1.75rem; font-size: 0.95rem; }
.xo-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; border-top: 1px solid #ffffff30; padding-top: 1.25rem; font-size: 0.875rem; }
.xo-footer-legal .xo-site-footer__copyright { padding: 0; text-align: left; }
.xo-footer-legal > *, .xo-footer-legal p { margin: 0; }
@media (max-width: 782px) {
	.xo-footer-columns { gap: 2.25rem; }
	.xo-footer-legal { flex-direction: column; align-items: flex-start; }
}

/* Photo gallery index: centered thumbnail titles (replaces editor font sizes). */
.coolbeans-gallery-title {
	margin-top: .75rem;
	text-align: center;
	font-size: clamp(1.125rem, 1rem + 0.9vw, 1.375rem);
	line-height: 1.3;
}

/* FAQ block: card-style items using existing color tokens. */
.xo-faq {
	--xo-faq-border: var(--color-turquoise);
	--xo-faq-focus-color: var(--color-deep-blue);
	--xo-faq-padding-block: 1rem;
}

.xo-faq .xo-faq__list {
	display: grid;
	gap: .75rem;
}

.xo-faq .xo-faq__item,
.xo-faq .xo-faq__list > .xo-faq__item:first-child {
	border: 1px solid var(--color-light-grey-bg);
	border-left: 4px solid var(--color-turquoise);
	border-radius: .5rem;
	background: var(--color-white);
	transition: background-color .2s ease, border-color .2s ease;
}

.xo-faq .xo-faq__item[open] {
	border-left-color: var(--color-deep-blue);
	background: var(--bg-light-blue);
}

.xo-faq .xo-faq__question,
.xo-faq .xo-faq__answer {
	padding-inline: 1.25rem;
}

.xo-faq .xo-faq__question-text {
	color: var(--color-deep-blue);
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
}

.xo-faq .xo-faq__question::after {
	color: var(--color-turquoise-over);
}

@media (hover: hover) {
	.xo-faq .xo-faq__item:not([open]):hover {
		background: var(--bg-light-blue);
	}
}
/*
 * XO Featured Image — hero treatment matching the home page video hero.
 * Layer 1: image (media). Layer 2: dark gradient (::after).
 * Layer 3: description + button (content).
 */
.xo-featured-image,
a.xo-featured-image:is(:link, :visited, :hover, :focus, :active) {
	color: #fff;
}

.xo-featured-image {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #173f50;
	color: #fff;
}

.xo-featured-image__media {
	position: absolute;
	inset: 0;
}

.xo-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 25%, rgba(0, 20, 32, .35) 50%, rgba(0, 20, 32, .82) 100%);
	pointer-events: none;
}

.xo-featured-image__content {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	padding: 3rem 1.25rem clamp(1.5rem, 3vw, 3rem);
	text-align: center;
}

.xo-featured-image__title {
	max-width: 65rem;
	margin: 0 auto;
	color: inherit;
	font-size: clamp(1.75rem, 2.8vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.xo-featured-image__description {
	margin: 0 auto 1.25rem;
	max-width: 65rem;
	color: inherit;
	font-size: clamp(1.125rem, 1.8vw, 2rem);
	line-height: 1.4;
	text-wrap: balance;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.xo-featured-image__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2.75rem;
	padding: .65rem 2rem;
	border: 2px solid var(--color-turquoise);
	border-radius: .5rem;
	background: var(--color-turquoise);
	color: #173f50;
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
}

a.xo-featured-image:hover .xo-featured-image__button {
	background: var(--xo-coolbeans-cta-over-bg, #def9f4);
	border-color: var(--xo-coolbeans-cta-over-bg, #def9f4);
}

a.xo-featured-image:focus-visible {
	outline: 3px solid var(--color-turquoise);
	outline-offset: 3px;
}

@media (max-width: 782px) {
	.xo-featured-image { aspect-ratio: 4 / 3; }
	.xo-featured-image__content { padding: .75rem; }
	.xo-featured-image__title { font-size: clamp(1rem, 3.5vw, 1.75rem); }
	.xo-featured-image__description { margin-bottom: .5rem; font-size: clamp(.875rem, 3vw, 1.125rem); }
	.xo-featured-image__button { padding: .5rem 1rem; font-size: clamp(.875rem, 3vw, 1.125rem); }
}
/* ==========================================================================
   Single Cruise (xo_cruise) — mobile first
   Scoped to .xo-cruise-detail; the slider keeps its own xo-slider CSS.
   ========================================================================== */

.xo-cruise-detail { overflow-x: clip; }
.xo-cruise-detail > * { margin-block: 0; }

/* --- Title --- */
.xo-cruise-detail__header { padding: 0.875rem 0.75rem; }
.xo-cruise-detail .xo-cruise-detail__title { margin: 0; color: var( --xo-coolbeans-purple ); font-size: 1.25rem; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }

/* --- Slider --- */
.xo-cruise-detail__slider-section{ background-color: var(--xo-bg-light-blue); }
.xo-cruise-detail__slider { padding-inline: 0; }
.xo-cruise-detail__slider .xo-slider { max-width: none; margin: 0; border-radius: 0; }
.xo-cruise-detail__slider .xo-slider__media { aspect-ratio: 4 / 3; }

/* Pagination sits below the image as even-width bars. */
.xo-cruise-detail__slider .xo-slider__pagination { position: static; display: flex; gap: 0.5rem; padding: 0.5rem; }
.xo-cruise-detail__slider .xo-slider__pagination-item { flex: 1 1 0; width: auto; height: 0.5rem; background-color: var( --xo-coolbeans-blue ); border-radius: 0; position: relative; }
.xo-cruise-detail__slider .xo-slider__pagination-item::before { content: ""; position: absolute; inset: -0.75rem 0; } /* larger touch target */
.xo-cruise-detail__slider .xo-slider__pagination-item.is-active { background-color: var( --color-turquoise ); }
.xo-cruise-detail__slider .xo-slider__pagination-item:focus-visible { outline: 2px solid var( --xo-coolbeans-blue ); outline-offset: 2px; }

/* --- Information --- */
.xo-cruise-detail__information { margin-top: 1rem; display: grid; gap: 1rem; }
.xo-cruise-detail__item p { margin: 0; line-height: 1.45; }
.xo-cruise-detail__item + .xo-cruise-detail__item { margin: 0; }
.xo-cruise-detail .xo-cruise-detail__label { margin: 0 0 0.125rem; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.xo-cruise-detail__pricing-notes { margin-top: 0.25rem !important; font-size: 0.9375rem; }
.xo-cruise-detail__sale { margin-top: 0.25rem !important; font-weight: 600; }
.xo-cruise-detail__price-regular { opacity: 0.65; }

/* --- Booking CTA --- */
.xo-cruise-detail__booking { margin-top: 1.25rem; text-align: left; }
.xo-cruise-detail .xo-cruise-detail__button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.5rem; background-color: var( --xo-coolbeans-blue ); color: var( --color-white ); border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
.xo-cruise-detail .xo-cruise-detail__button:hover { background-color: var( --xo-coolbeans-blue-over ); color: var( --color-white ); }
.xo-cruise-detail .xo-cruise-detail__button:focus-visible { outline: 3px solid var( --xo-coolbeans-navy ); outline-offset: 3px; }

/* --- Details & Policies --- */
.xo-cruise-detail__body { padding-block: 0.5rem 2.5rem; }
.xo-cruise-detail .xo-cruise-detail__content-heading { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; font-weight: 600; }
.xo-cruise-detail__content > :first-child { margin-top: 0; }
.xo-cruise-detail__content > * + * { margin-block-start: 1rem; }
.xo-cruise-detail__content { line-height: 1.55; }

/* --- Tablet --- */
@media ( min-width: 783px ) {
	.xo-cruise-detail__header { padding-block: 1.25rem; padding-inline: 1.5rem; }
	.xo-cruise-detail .xo-cruise-detail__title { font-size: 1.75rem; }
	.xo-cruise-detail__slider { padding-inline: var( --xo-page-gutter ); }
	.xo-cruise-detail__slider .xo-slider__media { aspect-ratio: 16 / 9; }
	.xo-cruise-detail__body { padding-block: 1rem 3.5rem; }
}
/* One header row: phone / logo / booking on desktop, phone / logo / menu on mobile. */
body .xo-site-header .xo-site-header__top-row--responsive {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
}

body .xo-site-header .xo-site-header__top-row--responsive > * {
	grid-area: auto;
	min-width: 0;
	margin: 0;
}

.xo-site-header__top-row--responsive > .xo-site-header__phone { justify-self: start; }
.xo-site-header__top-row--responsive > .xo-site-header__identity { justify-self: center; }
.xo-site-header__top-row--responsive > .xo-site-header__cta { justify-self: end; }
.xo-site-header__top-row--responsive > .xo-mobile-menu__toggle { display: none; }

.xo-site-header__phone a:focus-visible,
.xo-site-header__top-row--responsive > .xo-mobile-menu__toggle:focus-visible {
	outline: 3px solid var(--xo-coolbeans-blue);
	outline-offset: 4px;
}

@media (min-width: 783px) {
	body.xo-mobile-menu-enabled .xo-mobile-menu { display: none !important; }
}

@media (max-width: 782px) {
	body .xo-site-header .xo-site-header__top-row--responsive {
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		gap: clamp(0.75rem, 3vw, 1.5rem);

	}

	.xo-site-header__top-row--responsive .xo-site-header__identity {
		width: min(80%, 150px);
	}

	.xo-site-header__top-row--responsive .xo-site-header__identity img {
		width: 100%;
		height: auto;
	}

	.xo-site-header__phone p { margin: 0; }
	.xo-site-header__phone a {
		display: block;
		width: 44px;
		height: 44px;
		font-size: 0;
		background: url("../images/icons/phone-icon.svg") center / contain no-repeat;
	}

	.xo-site-header__top-row--responsive > .xo-site-header__cta,
	body .xo-site-header .xo-site-header__navigation-row { display: none; }

	.xo-site-header__top-row--responsive > .xo-mobile-menu__toggle {
		display: block;
		justify-self: end;
		width: 48px;
		height: 46px;
		padding: 0;
		border-radius: 10px;
		background: url("../images/icons/menu-icon.svg") center / contain no-repeat;
	}

	.xo-site-header__top-row--responsive > .xo-mobile-menu__toggle > * { display: none; }
}

/* Keep the final desktop dropdown within the viewport at tablet widths. */
.xo-site-header__navigation > ul > li:last-child > .wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
}


/* Cool Beans mobile menu design. */
#xo-mobile-menu {
	--xo-mobile-menu-background: var(--xo-coolbeans-menu-background);
	--xo-mobile-menu-color: var(--xo-coolbeans-blue);
	--xo-mobile-menu-submenu-color: var(--xo-coolbeans-submenu-text);
}

@media (max-width: 782px) {
	#xo-mobile-menu .xo-mobile-menu__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border-radius: 50%;
		background: var(--xo-coolbeans-blue);
		color: var(--xo-coolbeans-menu-background);
		margin: 0.5rem 0.75rem 0;
	}

	#xo-mobile-menu .xo-mobile-menu__close .xo-mobile-menu__icon {
		width: 28px;
		height: 28px;
	}

	#xo-mobile-menu .xo-mobile-menu__content {
		padding: 0.75rem clamp(1.5rem, 12vw, 4rem) max(2rem, env(safe-area-inset-bottom));
	}

	#xo-mobile-menu .xo-mobile-menu__navigation > ul {
		gap: 1.35rem;
		align-items: stretch;
	}

	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.3;
		text-transform: uppercase;
	}

	#xo-mobile-menu .xo-mobile-submenu__toggle {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0;
		min-height: 44px;
		font: inherit;
		text-align: left;
		color: var(--xo-coolbeans-blue);
		background: transparent;
		border: 0;
	}

	#xo-mobile-menu .xo-mobile-submenu__symbol {
		flex: 0 0 21px;
		width: 21px;
		height: 21px;
		font-size: 0;
		border-radius: 50%;
		background: var(--xo-coolbeans-blue) url("../images/icons/plus-bg-01.svg") center / contain no-repeat;
	}

	#xo-mobile-menu .xo-mobile-submenu__symbol--expanded {
		border-radius: 4px;
		background-image: url("../images/icons/minus-bg-01.svg");
	}

	#xo-mobile-menu .wp-block-navigation__submenu-container > li {
		font-size: 1.375rem;
		font-weight: 600;
		line-height: 1.4;
		text-transform: none;
	}

	#xo-mobile-menu .wp-block-navigation__submenu-container > li > a {
		padding: 0.65rem 0;
		white-space: normal;
	}

	#xo-mobile-menu .xo-mobile-menu__actions {
		margin-top: 2.5rem;
	}

	#xo-mobile-menu .xo-mobile-menu__actions .wp-block-button__link {
		padding: 0.65rem 1.35rem;
		border: 0;
		border-radius: 1.5rem;
		background: var(--xo-coolbeans-booking-blue);
		color: #fff;
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.3;
	}

	#xo-mobile-menu .xo-mobile-menu__actions p {
		margin-top: 1.75rem;
		font-size: clamp(1.25rem, 6vw, 1.5rem);
		font-weight: 700;
		white-space: nowrap;
	}

	#xo-mobile-menu .xo-mobile-menu__actions p a { color: var(--xo-coolbeans-booking-blue); }
	#xo-mobile-menu :is(a, button):focus-visible {
		outline: 3px solid var(--xo-coolbeans-booking-blue);
		outline-offset: 4px;
	}
}

@media (max-width: 782px) {
	body.admin-bar #xo-mobile-menu .xo-mobile-menu__panel {
		padding-top: 46px;
		box-sizing: border-box;
	}

	#xo-mobile-menu .xo-mobile-menu__actions p a {
		text-decoration: none;
	}
}

/* Mobile menu: depth, current page, pinned logo + address footer, and an items-only entrance.
   The overlay itself still opens instantly (see xo-dna _docs/mobile-menu-system.md "Animation");
   only the items inside it animate, so the page never ghosts through a fading panel. */
@keyframes xo-coolbeans-menu-rise {
	from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes xo-coolbeans-menu-spin {
	from { opacity: 0; transform: rotate(-90deg) scale(.6); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 782px) {
	#xo-mobile-menu .xo-mobile-menu__panel {
		background: linear-gradient(180deg, var(--xo-coolbeans-menu-background) 0%, var(--xo-coolbeans-seafoam) 100%);
	}

	/* Content becomes a column so the footer can sit at the bottom of short menus. */
	#xo-mobile-menu .xo-mobile-menu__content { display: flex; flex-direction: column; }

	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:not(:last-child) {
		padding-bottom: 1rem;
		border-bottom: 1px solid rgba(0, 102, 178, .18);
	}

	/* Current page: its divider becomes a bold, bright green line (padding offsets the extra
	   3px so the labels never shift). */
	/* Also the parent of the current page (WordPress adds current-menu-ancestor/-parent). Cruise
	   pages are not menu-matched by WordPress, so the Cruises parent follows the body class. */
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li.current-menu-item,
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li.current-menu-ancestor,
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li.current-menu-parent,
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:has(> a[aria-current="page"]),
	body.single-xo_cruise #xo-mobile-menu .xo-mobile-menu__navigation > ul > li.cruises-parent,
	body.post-type-archive-xo_cruise #xo-mobile-menu .xo-mobile-menu__navigation > ul > li.cruises-parent {
		padding-bottom: calc(1rem - 3px);
		border-bottom: 4px solid #1fd68a;
	}

	#xo-mobile-menu .xo-mobile-menu__actions { margin-bottom: 2.5rem; }
	#xo-mobile-menu .xo-mobile-menu__actions .wp-block-button__link { box-shadow: 0 .35rem 1rem rgba(0, 89, 186, .3); }
	#xo-mobile-menu .xo-mobile-menu__actions .wp-block-button__link:active { transform: scale(.97); }

	#xo-mobile-menu .xo-mobile-menu__actions p a::before {
		content: "";
		display: inline-block;
		width: 1.6em;
		height: 1.6em;
		margin-right: .6rem;
		vertical-align: -.4em;
		background: url("../images/icons/phone-icon.svg") center / contain no-repeat;
	}

	#xo-mobile-menu .xo-mobile-menu__footer {
		margin-top: auto;
		padding-top: 1.5rem;
		border-top: 1px solid rgba(0, 102, 178, .25);
	}

	/* No display rule on the images: the logo's light/dark variants are hidden by the theme-mode rules. */
	#xo-mobile-menu .xo-mobile-menu__footer img { max-width: 150px; height: auto; }
	#xo-mobile-menu .xo-mobile-menu__footer .wp-block-xo-dna-physical-address {
		margin: .85rem 0 0;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.5;
		color: var(--xo-coolbeans-submenu-text);
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: no-preference) {
	#xo-mobile-menu.is-open .xo-mobile-menu__close {
		animation: xo-coolbeans-menu-spin .45s cubic-bezier(.22, 1, .36, 1) both;
	}

	#xo-mobile-menu.is-open .xo-mobile-menu__navigation > ul > li,
	#xo-mobile-menu.is-open .xo-mobile-menu__actions > *,
	#xo-mobile-menu.is-open .xo-mobile-menu__footer > * {
		animation: xo-coolbeans-menu-rise .55s cubic-bezier(.22, 1, .36, 1) both;
		animation-delay: calc(80ms + var(--xo-menu-i, 0) * 70ms);
	}

	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:nth-child(2) { --xo-menu-i: 1; }
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:nth-child(3) { --xo-menu-i: 2; }
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:nth-child(4) { --xo-menu-i: 3; }
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:nth-child(5) { --xo-menu-i: 4; }
	#xo-mobile-menu .xo-mobile-menu__navigation > ul > li:nth-child(n+6) { --xo-menu-i: 5; }
	#xo-mobile-menu .xo-mobile-menu__actions > :nth-child(1) { --xo-menu-i: 6; }
	#xo-mobile-menu .xo-mobile-menu__actions > :nth-child(2) { --xo-menu-i: 7; }
	#xo-mobile-menu .xo-mobile-menu__footer > :nth-child(1) { --xo-menu-i: 8; }
	#xo-mobile-menu .xo-mobile-menu__footer > :nth-child(2) { --xo-menu-i: 9; }
}

/* Desktop condenses to the navigation row at the main-content boundary. */
@media (min-width: 783px) {
	body.xo-condensed-sticky-header.xo-coolbeans-header-compact .xo-site-header .xo-site-header__top-row--responsive {
		display: none;
	}
}
/* ==========================================================================
   Booking Form
   Styles for the `[xo_booking_form]` shortcode markup rendered by
   includes/xo-booking-form.php. See _docs/booking-form.md for the
   available hooks (.xo-booking-form, field IDs, .xo-form__status,
   .xo-forms-turnstile) and build/import conventions.

   Mobile-first: every rule below targets the narrow/phone layout by
   default, widened only inside the min-width media query at the
   bottom. Don't add a desktop-first override above it.
   ========================================================================== */

   .xo-booking-header h1{ font-size: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.3), 1.5rem); font-weight: 500; margin-block: 0.25rem 0; }
   .xo-booking-header .wp-block-xo-dna-site-logo{ --xo-site-logo-width: 160px !important; }

/* Let the form fill the (wider) booking template container; step 2's
   fields keep the original readable width. */
.xo-booking-form {
	--xo-form-max-width: 100%;
}

.xo-booking-form__step--2 {
	max-width: 48rem;
	margin-inline: auto;
}

/* Two-step wizard: only one `.xo-booking-form__step` shows at a time,
   driven by `data-step` on the form (assets/js/booking.js sets it; the
   server renders the matching initial value for ?package=<slug>). */
.xo-booking-form__step {
	display: block;
}

.xo-booking-form[data-step="1"] .xo-booking-form__step--2,
.xo-booking-form[data-step="2"] .xo-booking-form__step--1 {
	display: none;
}

/* `.xo-form__group` (xo-forms.css) sets `display: flex` at equal
   specificity to the UA's own `[hidden] { display: none }`, and an
   author rule always wins over the UA stylesheet regardless of
   specificity ties — so the plain `hidden` attribute/property alone
   (assets/js/booking.js) does nothing visually without this override. */
.xo-booking-form__boat-preference[hidden] {
	display: none;
}

/* Step 1: package picker */
.xo-package-picker {
	border: 0;
	margin: 0;
	padding: 0;
}

.xo-package-picker__legend {
	font-size: 1rem;
	font-weight: 400;
	margin-block-end: 1rem;
	padding: 0;
}

.xo-package-picker__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.xo-package-picker__card {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--xo-form-field-bg, #fff);
	border: var(--xo-form-field-border-width, 1px) solid var(--xo-form-field-border-color, #767676);
	border-radius: var(--xo-form-field-radius, 0);
	padding: 0.625rem;
}

.xo-package-picker__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.xo-package-picker__btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.4rem 0.75rem;
	font: inherit;
	font-size: var(--xo-form-help-size, 0.875rem);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	font-weight: 700;
	border: 1px solid var(--xo-coolbeans-blue);
	border-radius: 1rem;
}

.xo-package-picker__btn--select {
	background: var(--xo-coolbeans-blue);
	color: var(--color-white, #fff);
}

.xo-package-picker__btn--select:hover {
	background: var(--color-turquoise-over);
	border-color: var(--color-turquoise-over);
	color: var(--color-black, #000);
}

.xo-package-picker__details {
	font-size: var(--xo-form-help-size, 0.875rem);
	color: var(--xo-coolbeans-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.xo-package-picker__details:hover {
	text-decoration: none;
}

.xo-package-picker__details:focus-visible {
	outline: 2px solid var(--xo-form-focus-color, #005fcc);
	outline-offset: 1px;
}

.xo-package-picker__btn:focus-visible {
	outline: 2px solid var(--xo-form-focus-color, #005fcc);
	outline-offset: 1px;
}

.xo-package-picker__thumb,
.xo-booking-form__selected-link {
	display: block;
	height: 100%;
}

.xo-package-picker__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--xo-form-field-radius, 0);
}

.xo-package-picker__image {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.xo-package-picker__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.xo-package-picker__label {
	font-size: 1rem;
	font-weight: 700;
}

.xo-package-picker__note {
	font-size: var(--xo-form-help-size, 0.875rem);
	color: var(--xo-form-label-color, inherit);
}

/* Step 2: selected-cruise recap + back button */
.xo-booking-form__selected {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block: 1.5rem 2rem;
	padding: 0.625rem;
	background: #e0fcfc;
	border-radius: 1.25rem;
}

.xo-booking-form__selected-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--xo-form-field-radius, 0);
}

.xo-booking-form__selected-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.xo-booking-form__selected-label {
	margin: 0;
	font-weight: 600;
	flex: 1 1 auto;
}

.xo-booking-form__change-cruise {
	background: var(--xo-coolbeans-blue);
	color: var(--color-white, #fff);
	border: 0;
	border-radius: 1rem;
	padding: 0.4rem 0.75rem;
	font: inherit;
	font-size: var(--xo-form-help-size, 0.875rem);
	font-weight: 700;
	cursor: pointer;
}

.xo-booking-form__change-cruise:hover {
	background: var(--color-deep-blue, #0044a1);
}

@media (min-width: 640px) {
	.xo-package-picker__list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.xo-package-picker__item {
		flex: 1 1 calc(50% - 0.75rem);
	}
}

@media( min-width: 48rem ){
	.xo-package-picker__actions {
		gap: 2rem 1rem;
		padding: 1rem 0 0 0;
	}
	.xo-package-picker__label{
		font-size: 1.125rem;
	}
}
/* Send Request: same blue as the other booking-form buttons. */
.xo-booking-form .xo-form__submit {
	background: var(--xo-coolbeans-blue);
	color: var(--color-white, #fff);
	border-radius: 1rem;
	font-weight: 700;
}

.xo-booking-form .xo-form__submit:hover:not(:disabled) {
	background: var(--color-deep-blue, #0044a1);
}

/* Breathing room below the form at the bottom of the page. */
.xo-booking-form {
	padding-block-end: 4rem;
}

/* Step 1: "or call us" with the primary phone from theme options. */
.xo-booking-form__call-us {
	margin: 2rem 0 0;
	text-align: center;
}

.xo-booking-form__call-us-text,
.xo-booking-form__call-us-phone {
	display: block;
}

.xo-booking-form__call-us-text {
	font-weight: 700;
}

.xo-booking-form__call-us-phone {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--xo-coolbeans-blue);
	text-decoration: none;
}

.xo-booking-form__call-us-phone:hover {
	color: var(--color-deep-blue, #0044a1);
	text-decoration: underline;
}

/* Compact cruise schedule: period titles match the times' size. */
.xo-booking-form .xo-cruise-schedule-compact__title {
	font-size: 0.85rem;
}

/* Short fields: party size and the two dates need only ~25% of the form width. */
.xo-booking-form #booking-total-in-party,
.xo-booking-form #booking-preferred-date,
.xo-booking-form #booking-alternate-date {
	width: 25%;
	min-width: 11rem; /* keep the native date picker legible on narrow screens */
}

/* Preferred and Alternate Date sit side by side on desktop. */
@media ( min-width: 48rem ) {
	.xo-booking-form__dates {
		display: flex;
		gap: 1.5rem;
	}

	.xo-booking-form__dates .xo-form__group {
		flex: 0 0 25%;
		min-width: 11rem;
	}

	.xo-booking-form__dates .xo-form__control {
		width: 100%;
	}
}
/* ==========================================================================
   Utility overrides
   Add rules here only when Cool Beans needs to diverge from xo-dna's utility
   styles.
   ========================================================================== */
/* ==========================================================================
   Compatibility overrides
   Add rules here only when Cool Beans needs to diverge from xo-dna's
   compatibility styles.
   ========================================================================== */

h2{ font-weight: var( --font-weight-normal ); }

/*# sourceMappingURL=main.css.map */