/*
 * PDP-COBUY-007B-R2: "Bought Together" DEV shell (modules/pdp-cobuy.php),
 * pixel-parity pass against the canonical Finals
 * (zigzag-design@e4f1a3e7a1aa94fb0142209297dd241de47ef542):
 *   Desktop >=1280 / Tablet landscape 1024-1279.98: pdp-complements-v1.43.jsx
 *     ::ComplementBlock43/ComplementRow43/CommerceStack43.
 *   Tablet portrait 550-1023.98: pdp-tab-responsive-v1.19.6.jsx::TabComplements
 *     (compact ComplementRow, 2 columns, gap 10).
 *   Mobile <=549.98: pdp-complements-v2.2.8.jsx::ComplementBlock/ComplementRow
 *     (1 column, gap 8).
 * Values are the computed values of the rendered Finals
 * (docs/development/tasks/PDP-COBUY-007B-R2-PIXEL-PARITY/evidence).
 * Colours use the site's own tokens (zigzag-custom-css global.css) with the
 * identical canonical values as fallbacks. Every selector is scoped to
 * .zz-pdp-cobuy.
 *
 * Section separation: the block mounts inside the CMS lower row, after an empty
 * CMS [col] whose Flatsome default padding-bottom (30px) already separates it
 * from the Alternatives CTA, and inside its own CMS [col] whose padding-bottom
 * (30px) separates it from Packaging. Only the remainder up to the canonical
 * page-level gap is added here (top 40/30/32, bottom 48/36/26 in the Finals).
 */

.zz-pdp-cobuy {
	padding: 10px 0 18px;
	color: var(--pdp001a-text-heading, #2f2f2f);
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.zz-pdp-cobuy__heading {
	margin: 0 0 14px;
	padding: 0;
	color: var(--pdp001a-text-heading, #2f2f2f);
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
}

.zz-pdp-cobuy__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Beats Flatsome's `.col-inner ul li { margin-left: 1.3em }`, which shifted every card right. */
.zz-pdp-cobuy__grid > .zz-pdp-cobuy__item {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Up to 3 rows of 2 columns = 6 cards max; the provider already caps at 6. */
.zz-pdp-cobuy__card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	min-width: 0;
	padding: 14px;
	border: 1px solid #edf0f4;
	border-radius: 14px;
	background: #fff;
}

.zz-pdp-cobuy__media {
	flex: 0 0 auto;
	display: block;
	width: 84px;
	height: 84px;
}

.zz-pdp-cobuy__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.zz-pdp-cobuy__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.zz-pdp-cobuy__title {
	color: var(--pdp001a-text-heading, #2f2f2f);
	font-size: 15.5px;
	line-height: 1.3;
	font-weight: 500;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.zz-pdp-cobuy__title a {
	color: inherit;
	text-decoration: none;
}

/* Stars + "(count)", rendered only for real reviews. */
.zz-pdp-cobuy__rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

.zz-pdp-cobuy__stars {
	display: inline-flex;
	align-items: center;
	gap: 2.5px;
}

.zz-pdp-cobuy__star {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
}

.zz-pdp-cobuy__star svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.zz-pdp-cobuy__star-empty {
	fill: #d1d5db;
	stroke: #d1d5db;
	stroke-width: 0.8;
	stroke-linejoin: round;
}

.zz-pdp-cobuy__star-fill {
	fill: #ffd700;
	stroke: #ffd700;
	stroke-width: 0.8;
	stroke-linejoin: round;
}

.zz-pdp-cobuy__count {
	color: var(--pdp001a-text-muted, #6b7280);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1;
}

/* Fixed-width commerce rail, sibling of .__body (never nested under it):
   stacked price above a pill CTA, vertically centered against the row. */
.zz-pdp-cobuy__rail {
	flex: 0 0 auto;
	width: 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	gap: 10px;
}

.zz-pdp-cobuy__price {
	color: var(--pdp001a-text-heading, #2f2f2f);
	font-size: 17px;
	line-height: 1;
	font-weight: 700;
	text-align: center;
	overflow-wrap: anywhere;
}

/* Native price HTML, any shape (PDP-COBUY-007C): each amount stays on one line; a sale shows the
   struck original above the current price, a range wraps at its separator inside the fixed rail. */
.zz-pdp-cobuy__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.zz-pdp-cobuy__price del {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.6;
}

.zz-pdp-cobuy__price ins {
	display: block;
	background: none;
	text-decoration: none;
}

/* Commerce action (PDP-COBUY-007C): a real link, styled as the accepted R2 outlined pill.
   Two-class selectors beat the theme's `a` / `a:hover` colours without touching them. */
.zz-pdp-cobuy .zz-pdp-cobuy__buy {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 7px 12px;
	border: 1px solid var(--pdp001a-border-default, #e5e7eb);
	border-radius: 999px;
	white-space: nowrap;
	background: transparent;
	color: var(--pdp001a-text-heading, #2f2f2f);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.05;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.zz-pdp-cobuy .zz-pdp-cobuy__buy:hover {
	border-color: var(--pdp002b-accent-brand, #ed0678);
	color: var(--pdp001a-text-heading, #2f2f2f);
}

.zz-pdp-cobuy .zz-pdp-cobuy__buy:focus-visible {
	outline: 2px solid var(--pdp002b-accent-brand, #ed0678);
	outline-offset: 2px;
	border-color: var(--pdp002b-accent-brand, #ed0678);
}

/* Woo's handler sets .loading while the request is in flight and .added on success. */
.zz-pdp-cobuy .zz-pdp-cobuy__buy.loading {
	opacity: 0.55;
	cursor: progress;
	pointer-events: none;
}

/* Flatsome (flatsome-shop.css) hides `.add_to_cart_button.added` in favour of Woo's "View cart" link;
   here the pill must stay in place (the rail geometry must not jump), and the side cart is the cart link. */
.zz-pdp-cobuy .zz-pdp-cobuy__buy.added {
	display: flex;
	border-color: var(--pdp002b-accent-brand, #ed0678);
}

.zz-pdp-cobuy .zz-pdp-cobuy__buy.zz-pdp-cobuy__buy--failed {
	border-color: #c0392b;
}

/* Woo appends a "View cart" link after an added button; the side cart already opens, and
   the extra node would add a row to the fixed-width rail. */
.zz-pdp-cobuy__rail > .added_to_cart {
	display: none;
}

.zz-pdp-cobuy__buy-label {
	display: flex;
	align-items: center;
	gap: 5px;
	transform: translateY(-1px);
}

.zz-pdp-cobuy__buy-plus {
	color: var(--pdp002b-accent-brand, #ed0678);
	font-weight: 700;
}

/* Tablet portrait + Mobile: compact ComplementRow / CommerceStack scale. */
@media (max-width: 1023.98px) {
	.zz-pdp-cobuy__card {
		gap: 12px;
		padding: 10px;
		border-radius: 12px;
	}

	.zz-pdp-cobuy__media {
		width: 64px;
		height: 64px;
	}

	.zz-pdp-cobuy__body {
		gap: 3px;
	}

	.zz-pdp-cobuy__title {
		font-size: 13.5px;
		line-height: 1.28;
	}

	.zz-pdp-cobuy__rating {
		gap: 5px;
	}

	.zz-pdp-cobuy__star {
		width: 10px;
		height: 10px;
	}

	.zz-pdp-cobuy__count {
		font-size: 11px;
	}

	.zz-pdp-cobuy__rail {
		width: 72px;
		gap: 8px;
	}

	.zz-pdp-cobuy__price {
		font-size: 14px;
	}

	.zz-pdp-cobuy .zz-pdp-cobuy__buy {
		padding: 5px 10px;
		font-size: 11.5px;
	}

	.zz-pdp-cobuy__buy-label {
		gap: 4px;
	}
}

/* Tablet portrait: still 2 columns (TabComplements, gap 10). */
@media (min-width: 550px) and (max-width: 1023.98px) {
	.zz-pdp-cobuy {
		padding-top: 0;
		padding-bottom: 6px;
	}

	.zz-pdp-cobuy__grid {
		gap: 10px;
	}
}

/* Mobile: 1 column (gap 8) and the Final's 16px side inset (the CMS column
   gives 15px; Alternatives above already sits at 16px). */
@media (max-width: 549.98px) {
	.zz-pdp-cobuy {
		padding: 2px 1px 0;
	}

	.zz-pdp-cobuy__grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}