/*
 * Product page, phase 1 (includes/product-page.php). No build step: served as is.
 * Everything is scoped to body.swan-pp (single product pages).
 */

/* ---------- photo: no empty box around a landscape photo ---------- */
/* Flatsome's "Custom CSS Mobile" sets min-height: 400px on the gallery. The image carries its own
   width and height, so the browser already reserves the right space. */
.swan-pp .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
	min-height: 0;
}

/* ---------- breadcrumb ---------- */
.swan-pp-breadcrumb {
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}
.swan-pp-breadcrumb a {
	color: inherit;
}
.swan-pp-breadcrumb .divider {
	margin: 0 0.4em;
	opacity: 0.6;
}

/* ---------- maker and rating (1) ---------- */
.swan-pp-maker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -4px 0 14px;
	font-size: 15px;
	line-height: 1.35;
}
.swan-pp-maker__avatar {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: #e9dccb;
	color: #6b4f2a;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.swan-pp-maker__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.swan-pp-maker__text a {
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
}
.swan-pp-maker a.swan-pp-maker__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	color: #555;
}
.swan-pp-stars {
	position: relative;
	display: inline-block;
	color: #d6d6d6;
	letter-spacing: 1px;
	line-height: 1;
}
.swan-pp-stars > span {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #f2a900;
}

/* ---------- achteraf betalen (4) ---------- */
.swan-pp .product-info .price-wrapper {
	margin-bottom: 6px;
}
.swan-pp-pay-later {
	margin: -4px 0 0;
	font-size: 14px;
	color: #555;
}

/* ---------- delivery and shipping (2, 3) ---------- */
.swan-pp-delivery {
	flex: 0 0 100%;
	display: grid;
	gap: 6px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 10px 12px;
	margin: 4px 0 14px;
	font-size: 14px;
	line-height: 1.4;
}
.swan-pp-delivery__row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.swan-pp-delivery__row svg {
	flex: none;
	margin-top: 1px;
	color: #2e8540;
}
.swan-pp-delivery__note {
	display: block;
	color: #777;
	font-size: 12px;
}

/* ---------- buttons on one line ---------- */
.swan-pp .product-info form.cart:not(.variations_form),
.swan-pp .product-info .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.swan-pp .product-info form.cart:not(.variations_form) > *,
.swan-pp .product-info .woocommerce-variation-add-to-cart > * {
	flex: 0 0 100%;
	margin-left: 0;
	margin-right: 0;
}
.swan-pp .product-info form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}
.swan-pp .product-info form.cart .single_add_to_cart_button {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin: 0;
}
/* On a phone, quantity, "In winkelwagen" and "Nu kopen" don't fit on one line: the quantity gets
   its own row, the two buttons stay side by side. */
@media (max-width: 549px) {
	.swan-pp .product-info form.cart .quantity {
		flex-basis: 100%;
	}
}
/* Narrow phones (360px): the theme's 18.6px buttons with 22px padding don't fit side by side. */
@media (max-width: 389px) {
	.swan-pp .product-info form.cart .single_add_to_cart_button,
	.swan-pp .product-info form.cart .ux-buy-now-button {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 16px;
		letter-spacing: 0;
		white-space: nowrap;
	}
}
.swan-pp .product-info form.cart .ux-buy-now-button {
	flex: 0 0 auto;
	margin: 0;
	background: #fff;
	color: #111;
	border: 1.5px solid #111;
	box-shadow: none;
}
.swan-pp .product-info form.cart .ux-buy-now-button:hover {
	background: #111;
	color: #fff;
}
.swan-pp .product-info form.cart script {
	display: none;
}

/* Flatsome's sticky add-to-cart bar (theme option product_sticky_cart, off in production until it
   is tested, item 5): on a phone only the product and "In winkelwagen". */
@media (max-width: 549px) {
	.swan-pp .sticky-add-to-cart {
		background: #fff;
		box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
	}
	.swan-pp .sticky-add-to-cart .quantity,
	.swan-pp .sticky-add-to-cart .ux-buy-now-button {
		display: none;
	}
}

/* WooCommerce greys the button out until the options are chosen; it stays the main button here,
   and a tap shows which option is missing (product-page.js). */
.swan-pp .product-info .single_add_to_cart_button.disabled.wc-variation-selection-needed,
.swan-pp .product-info .variations_form .ux-buy-now-button.disabled {
	opacity: 1;
	cursor: pointer;
}

/* ---------- order-by advice (8) ---------- */
.swan-pp-order-by {
	background: #fdf1f4;
	color: #8a2448;
	border-radius: 10px;
	padding: 9px 12px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

/* ---------- message to the seller (7) ---------- */
.swan-seller-note {
	margin: 0;
}
.swan-seller-note summary {
	cursor: pointer;
	list-style: none;
	border: 1px dashed #bbb;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	color: #222;
}
.swan-seller-note summary::-webkit-details-marker {
	display: none;
}
.swan-seller-note summary::before {
	content: "+ ";
	font-weight: 700;
}
.swan-seller-note[open] summary::before {
	content: "− ";
}
.swan-seller-note__optional {
	color: #888;
	font-weight: 400;
}
.swan-seller-note input {
	margin: 8px 0 0;
}

/* ---------- reassurances (4) ---------- */
.swan-pp-checks {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	font-size: 14px;
	display: grid;
	gap: 4px;
}
.swan-pp-checks li {
	margin: 0;
	padding-left: 22px;
	position: relative;
}
.swan-pp-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #2e8540;
	font-weight: 700;
}

/* ---------- options as buttons (9) ---------- */
.swan-pp .variations {
	position: relative;
	margin-bottom: 6px;
}
.swan-pp .variations tr {
	display: block;
	margin-bottom: 12px;
}
.swan-pp .variations tr:last-child {
	margin-bottom: 0;
}
/* WooCommerce's "Wissen" link sits under the last option and keeps its line while hidden. */
.swan-pp .variations .reset_variations {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	font-size: 12px;
}
.swan-pp .variations th.label,
.swan-pp .variations td.value {
	display: block;
	padding: 0;
	border: 0;
}
.swan-pp .variations th.label label {
	display: inline;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.swan-pp .swan-pp-chosen {
	font-weight: 600;
}
.swan-pp-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}
.swan-pp-option {
	margin: 0;
	min-height: 0;
	padding: 7px 14px;
	line-height: 1.3;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: #222;
	background: #fff;
	border: 1.5px solid #ccc;
	border-radius: 8px;
	cursor: pointer;
}
.swan-pp-option[aria-pressed="true"] {
	border-color: #111;
	box-shadow: inset 0 0 0 1px #111;
	font-weight: 600;
}
.swan-pp-option:disabled {
	color: #aaa;
	text-decoration: line-through;
	cursor: not-allowed;
}
.swan-pp .swan-pp-missing .swan-pp-option {
	border-color: #c62828;
}
.swan-pp .swan-pp-missing th.label label {
	color: #c62828;
}
.swan-pp-options-message {
	color: #c62828;
	font-size: 14px;
	margin: 0 0 10px;
}
/* With JS running, the buttons replace the selects (which stay in the form for WooCommerce). */
.swan-pp-js .swan-pp .variations td.value select {
	display: none;
}
html:not(.swan-pp-js) .swan-pp-options {
	display: none;
}
/* The chosen variation's price moves to the main price (product-page.js). */
.swan-pp-js .swan-pp .product-info .woocommerce-variation-price {
	display: none;
}

/* ---------- mobile: compact header and first screen (6) ---------- */
@media (max-width: 849px) {
	/* The top bar's points (pay later, returns, rating) now sit next to the button. */
	.swan-pp #top-bar {
		display: none;
	}

	/* One header row, as on Etsy: menu, small logo, search, wishlist, cart. Flatsome draws the
	   logo row (80px) and the search row (66px) separately; the search row is laid over the
	   space between the logo and the icons. The offsets follow the logo at 40px high. */
	.swan-pp .header-wrapper {
		position: relative;
	}
	.swan-pp #masthead,
	.swan-pp #masthead .header-inner {
		height: 56px;
		min-height: 0;
	}
	/* Flatsome's logo settings add vertical padding to the image (14px on tst) and a larger
	   !important height when the header is stuck; both would shrink or overflow the 40px logo. */
	.swan-pp #logo img,
	.swan-pp .stuck #logo img {
		max-height: 40px !important;
		width: auto;
		padding: 0;
	}
	.swan-pp .stuck #masthead,
	.swan-pp .stuck #masthead .header-inner {
		height: 56px !important;
	}
	.swan-pp #masthead .header-inner .flex-left {
		flex: 0 0 auto;
	}
	.swan-pp #masthead .header-inner .logo {
		flex: 0 0 auto;
		width: auto;
		margin: 0 8px;
		order: 2;
	}
	.swan-pp #masthead .header-inner .flex-right {
		flex: 1 1 auto;
		order: 3;
		justify-content: flex-end;
	}
	.swan-pp #wide-nav {
		position: absolute;
		top: 0;
		left: 128px;
		right: 84px;
		height: 56px;
		min-height: 0;
		background: transparent;
		border-bottom: 0;
		z-index: 2;
	}
	.swan-pp #masthead {
		border-bottom: 1px solid rgba(37, 43, 50, 0.13);
	}
	.swan-pp #wide-nav .header-bg-container,
	.swan-pp #wide-nav .header-bg-color {
		display: none;
	}
	.swan-pp #wide-nav .flex-row {
		height: 56px;
		padding: 0;
	}
	.swan-pp #wide-nav .nav,
	.swan-pp #wide-nav .nav > li,
	.swan-pp #wide-nav .nav > li > div {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.swan-pp #wide-nav .speedsearch-search-container,
	.swan-pp #wide-nav .speedsearch-search-block,
	.swan-pp #wide-nav .speedsearch-search {
		width: 100%;
		max-width: none;
		margin: 0;
	}
	.swan-pp #wide-nav .speedsearch-search-input,
	.swan-pp #wide-nav input[type="search"] {
		height: 36px;
		min-height: 0;
		font-size: 14px;
		padding-right: 34px;
		text-overflow: ellipsis;
	}

	/* Breadcrumb: only "‹ Category". */
	.swan-pp-breadcrumb a,
	.swan-pp-breadcrumb .divider {
		display: none;
	}
	.swan-pp-breadcrumb a:last-of-type {
		display: inline;
		font-size: 14px;
	}
	.swan-pp-breadcrumb a:last-of-type::before {
		content: "‹ ";
	}
	.swan-pp .product-page-title .page-title-inner {
		min-height: 0;
		padding-top: 6px;
		padding-bottom: 2px;
		justify-content: flex-start;
		text-align: left;
	}
	.swan-pp .product-main {
		padding-top: 4px;
	}
	/* Flatsome centres the title column on mobile (medium-text-center, with !important). */
	.swan-pp .product-page-title .medium-text-center,
	.swan-pp .product-page-title .swan-pp-breadcrumb {
		text-align: left !important;
	}
}