/* Shared outer geometry for the complete public site shell. */
:root {
	--krabi-site-width: 1280px;
	--krabi-text-width: 860px;
	--krabi-site-gutter: clamp(12px, 2vw, 24px);
}

.krabi-site-header,
.krabi-site-footer {
	box-sizing: border-box;
	width: calc(
		100% - var(--krabi-site-gutter) - var(--krabi-site-gutter)
	);
	max-width: var(--krabi-site-width);
	margin-right: auto;
	margin-left: auto;
}

/* Keep the responsive logo inside the Header without overriding its block width. */
.krabi-site-header .wp-block-site-logo,
.krabi-site-header .wp-block-site-logo > a,
.krabi-site-header .krabi-responsive-site-logo {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
}

.krabi-site-header .krabi-responsive-site-logo-image {
	display: block;
	max-width: 100% !important;
	height: auto !important;
}

/* Server-assigned classes isolate the responsive Header from the menu row. */
.krabi-site-header.krabi-header-main,
.krabi-site-header .krabi-header-main {
	display: grid !important;
	grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
	align-items: center;
	column-gap: 0;
	width: 100%;
	max-width: none !important;
}

.krabi-site-header.krabi-header-main > *,
.krabi-site-header .krabi-header-main > * {
	min-width: 0;
	margin: 0 !important;
}

.krabi-site-header
	.krabi-header-main
	> .wp-block-site-logo,
.krabi-site-header.krabi-header-main
	> .wp-block-site-logo,
.krabi-site-header
	.krabi-header-main
	> .krabi-header-contacts,
.krabi-site-header.krabi-header-main
	> .krabi-header-contacts {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
}

.krabi-site-header .krabi-header-contacts {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0;
}

.krabi-site-header
	.krabi-header-contacts
	> .wp-block-social-links {
	display: flex !important;
	flex: 0 0 auto;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	width: max-content;
	max-width: 100%;
	margin: 0 !important;
}

.krabi-site-header
	.krabi-header-contacts
	> .wp-block-social-links
	> .wp-social-link {
	flex: 0 0 auto;
	margin: 0 !important;
}

.krabi-site-header .krabi-header-contacts > .wp-block-image {
	display: block !important;
	float: none !important;
	flex: 0 0 auto;
	margin: 0 auto !important;
}

.krabi-site-header
	.krabi-header-contacts
	> .wp-block-image
	> a {
	display: block;
}

.krabi-site-header
	.krabi-header-contacts
	> .wp-block-image
	img {
	display: block;
	max-width: 100% !important;
	height: auto !important;
}

@media (min-width: 600px) {
	/*
	 * Explicit desktop Header row: logo stays at the left edge while the
	 * Social Icons block and Google-rating image form one right-hand row.
	 * No child width or image height is imposed here.
	 */
	.krabi-site-header .krabi-header-top-row {
		display: flex !important;
		box-sizing: border-box;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		column-gap: clamp(12px, 1.25vw, 20px) !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.krabi-site-header .krabi-header-top-row > * {
		min-width: 0;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-site-logo {
		flex: 0 1 auto;
		width: auto !important;
		max-width: 100% !important;
		margin-right: auto !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-social-links,
	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image {
		float: none !important;
		flex: 0 0 auto;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	/*
	 * The linked Google-rating image must not inherit the inline-link baseline
	 * line box. Removing that extra box lets the row's align-items:center rule
	 * centre the actual image naturally, without offsets or fixed dimensions.
	 */
	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image {
		line-height: 0;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image
		> a {
		display: block !important;
		line-height: 0;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-social-links {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image
		img {
		display: block;
		max-width: 100% !important;
		height: auto !important;
	}

	.krabi-site-header .krabi-header-contacts > .wp-block-image,
	.krabi-site-header .krabi-header-contacts > .wp-block-image > a,
	.krabi-site-header .krabi-header-contacts > .wp-block-image img {
		height: auto !important;
	}
}

/* Keep the Max Mega Menu background inside the same outer edges. */
#mega-menu-wrap-max_mega_menu_1 {
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--krabi-site-width);
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Match the verified front-page distance from Max Mega Menu to the H1. */
body.krabi-product-tag-archive h1.wp-block-query-title {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/*
 * Frame only Payments, Privacy Policy, Refund Policy, and About Us. Their
 * titles are part of Post Content and therefore remain inside this frame.
 */
body.krabi-framed-page main.site-content {
	box-sizing: border-box;
	width: calc(
		100% - var(--krabi-site-gutter) - var(--krabi-site-gutter)
	);
	max-width: var(--krabi-site-width);
	margin: 20px auto 40px !important;
	padding: 22px clamp(22px, 4vw, 44px)
		clamp(22px, 4vw, 44px) !important;
	color: #252525;
	background: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	font-family: inherit;
	font-size: clamp(16px, 1.2vw, 17px);
	line-height: 1.6;
	text-align: left;
	overflow-wrap: break-word;
}

body.krabi-framed-page main.site-content > .wp-block-post-content {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--krabi-text-width) !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/*
 * Use the approved site geometry on individual product pages. The existing
 * theme padding remains the mobile-safe gutter and is not replaced here.
 */
body.single-product main.wp-block-group {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--krabi-site-width);
	margin-right: auto !important;
	margin-left: auto !important;
}

body.single-product
	.wp-block-woocommerce-product-details.alignwide {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--krabi-site-width) !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/*
 * The verified gallery and variation columns share one desktop frame. The
 * compact 12px inset preserves the existing gallery and booking-form widths.
 */
@media (min-width: 600px) {
	body.single-product .krabi-product-summary-frame {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--krabi-site-width) !important;
		margin-right: auto !important;
		margin-left: auto !important;
		padding: 12px !important;
		background: #ffffff;
		border: 1px solid #e4e4e4;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	}

	body.single-product
		.krabi-product-summary-frame
		> .wp-block-column {
		min-width: 0;
	}

	body.single-product
		.krabi-product-summary-frame
		.variation_wrapper {
		margin-top: 0 !important;
	}

	body.single-product
		.krabi-product-summary-frame
		.variation_title
		> h1 {
		margin-top: 0 !important;
	}

	body.single-product
		.krabi-product-summary-frame
		.variationswatcher_container {
		margin-right: auto !important;
		margin-left: auto !important;
	}
}

/*
 * Keep WooCommerce's real tab controls so additional product-detail tabs can
 * be added later. Only their presentation changes; tab behavior is untouched.
 */
body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs {
	display: flex;
	box-sizing: border-box;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs::before,
body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs
	> li::before,
body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs
	> li::after {
	display: none !important;
	content: none !important;
}

body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs
	> li {
	display: block;
	float: none;
	width: auto;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent;
	border: 0;
	border-radius: 0;
}

body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs
	> li
	> a {
	display: block;
	box-sizing: border-box;
	width: auto;
	padding: 10px 16px;
	color: #252525;
	background: #f5f5f5;
	border: 1px solid #e4e4e4;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> ul.tabs.wc-tabs
	> li.active
	> a {
	color: #ffffff;
	background: var(--wp--preset--color--primary, #0c4169);
	border-color: var(--wp--preset--color--primary, #0c4169);
}

/*
 * Each actual WooCommerce tab panel receives the same frame used on the
 * approved information pages. Horizontal padding also keeps its direct text
 * content at no more than the approved 860px measure on wide screens.
 */
body.single-product
	.wp-block-woocommerce-product-details
	.woocommerce-tabs
	> .woocommerce-Tabs-panel {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding-top: clamp(22px, 4vw, 44px) !important;
	padding-right: max(
		clamp(22px, 4vw, 44px),
		calc((100% - var(--krabi-text-width)) / 2)
	) !important;
	padding-bottom: clamp(22px, 4vw, 44px) !important;
	padding-left: max(
		clamp(22px, 4vw, 44px),
		calc((100% - var(--krabi-text-width)) / 2)
	) !important;
	color: #252525;
	background: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 0 8px 8px 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	font-family: inherit;
	font-size: clamp(16px, 1.2vw, 17px);
	line-height: 1.6;
	text-align: left;
	overflow-wrap: break-word;
}

/* One outer geometry and one grid for every Product Collection everywhere. */
.wp-block-woocommerce-product-collection.wp-block-woocommerce-product-collection {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--krabi-site-width) !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.wp-block-woocommerce-product-collection
	.wc-block-product-template.wc-block-product-template {
	display: grid;
	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.25em;
	row-gap: 1.25em;
	align-items: stretch;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-product-collection
	.wc-block-product-template.wc-block-product-template
	> li {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none;
	min-width: 0;
	margin: 0;
}

@media (min-width: 600px) {
	.wp-block-woocommerce-product-collection
		.wc-block-product-template.wc-block-product-template
		> li
		> .wp-block-group {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 599px) {
	body h1 {
		font-size: var(--wp--preset--font-size--large) !important;
	}

	/* Keep the Columns block's 24px gap without a second 24px title offset. */
	body.single-product
		.krabi-product-summary-frame
		.variation_wrapper,
	body.single-product
		.krabi-product-summary-frame
		.variation_title
		> h1 {
		margin-top: 0 !important;
	}

	.krabi-tour-links {
		font-size: var(--wp--preset--font-size--x-small) !important;
	}

	.krabi-site-header.krabi-header-main,
	.krabi-site-header .krabi-header-main {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Explicit mobile Header: the current Site Logo occupies its own full row.
	 * Social Icons and Google rating share the centered row underneath it.
	 */
	.krabi-site-header .krabi-header-top-row {
		display: grid !important;
		box-sizing: border-box;
		/*
		 * The flexible outer tracks keep the wide logo from contributing its
		 * intrinsic width to the compact contacts row. The two middle tracks
		 * remain exactly as wide as Social Icons and Google rating need.
		 */
		grid-template-columns:
			minmax(0, 1fr)
			max-content
			max-content
			minmax(0, 1fr);
		grid-template-areas:
			"logo logo logo logo"
			". social rating .";
		align-items: center !important;
		column-gap: clamp(4px, 1vw, 8px) !important;
		row-gap: 4px !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 4px !important;
	}

	.krabi-site-header .krabi-header-top-row > * {
		min-width: 0;
		margin: 0 !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-site-logo {
		grid-area: logo;
		box-sizing: border-box;
		justify-self: stretch;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 3.52px !important;
		padding-bottom: 3.52px !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-site-logo
		> a {
		display: block !important;
		box-sizing: border-box;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-site-logo
		.krabi-responsive-site-logo-image {
		display: block !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-social-links {
		grid-area: social;
		justify-self: end;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		width: max-content;
		max-width: 100%;
		gap: clamp(4px, 1vw, 8px) !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-social-links
		> .wp-social-link {
		flex: 0 0 auto;
		margin: 0 !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image {
		grid-area: rating;
		justify-self: start;
		display: block !important;
		float: none !important;
		width: var(--krabi-mobile-rating-width, auto) !important;
		max-width: var(--krabi-mobile-rating-width, 100%) !important;
		height: var(--krabi-mobile-rating-height, auto) !important;
	}

	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image
		> a,
	.krabi-site-header
		.krabi-header-top-row
		> .wp-block-image
		img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
	}

	/* One mobile contact row: WhatsApp, Email, then Google rating. */
	.krabi-site-header .krabi-header-contacts {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: clamp(4px, 1vw, 8px) !important;
		margin-bottom: 4px !important;
	}

	.krabi-site-header
		.krabi-header-contacts
		> .wp-block-social-links {
		display: flex !important;
		flex: 0 0 auto;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 0;
		gap: clamp(4px, 1vw, 8px) !important;
	}

	.krabi-site-header
		.krabi-header-contacts
		> .wp-block-social-links
		> .wp-social-link {
		flex: 0 0 auto;
		margin: 0 !important;
	}

	.krabi-site-header .krabi-header-contacts > .wp-block-image {
		flex: 0 0 auto;
		width: min(143px, 28vw) !important;
		max-width: 28vw !important;
		height: auto !important;
		margin: 0 !important;
	}

	.krabi-site-header
		.krabi-header-contacts
		> .wp-block-image
		> a {
		display: block;
		width: 100%;
		height: auto;
	}

	.krabi-site-header
		.krabi-header-contacts
		> .wp-block-image
		img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.wp-block-woocommerce-product-collection
		.wc-block-product-template.wc-block-product-template {
		grid-template-columns: 1fr;
	}

	.wp-block-woocommerce-product-collection
		.wc-block-product-template.wc-block-product-template
		> li
		> .wp-block-group {
		width: 100%;
	}
}