/**
 * Highlighted editor's-pick product sections (gallery listicles).
 * Heading (h4.sa-product-pick-heading) + body (p.sa-product-pick) render as one card.
 */

.sa-product-pick-heading {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.75rem;
	margin: 2rem 0 0;
	padding: 0.85rem 1.15rem 0.75rem 1.35rem;
	font-size: 1.08em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: #7c2d12;
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 55%, #fed7aa 100%);
	border: 1px solid #f0b46b;
	border-bottom: 1px dashed #e8c9a0;
	border-radius: 12px 12px 0 0;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.65) inset,
		0 4px 18px rgba(180, 83, 9, 0.14);
}

.sa-product-pick-heading::before {
	content: "PICK";
	position: static;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 0.15em;
	font-size: 0.62em;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1;
	color: #fff;
	background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
	padding: 0.4em 0.55em;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(194, 65, 12, 0.35);
}

.sa-product-pick-heading::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	border-radius: 12px 0 0 0;
	background: linear-gradient(180deg, #ea580c 0%, #f59e0b 100%);
	pointer-events: none;
}

.sa-product-pick {
	position: relative;
	margin: 0 0 2rem;
	padding: 1.15rem 1.2rem 1.2rem 1.25rem;
	font-size: 1.03em;
	line-height: 1.7;
	color: #292524;
	background: linear-gradient(180deg, #fffbf7 0%, #fff7ed 100%);
	border: 1px solid #f0b46b;
	border-top: none;
	border-radius: 0 0 12px 12px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.8) inset,
		0 8px 24px rgba(180, 83, 9, 0.12);
}

.sa-product-pick::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	border-radius: 0 0 0 12px;
	background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
	pointer-events: none;
}

.sa-product-pick-heading + .sa-product-pick {
	margin-top: 0;
}

/* Standalone pick paragraph (legacy) still gets full card treatment */
.sa-product-pick:not(.sa-product-pick-heading + .sa-product-pick) {
	margin-top: 2rem;
	border-top: 1px solid #f0b46b;
	border-radius: 12px;
}

.sa-product-pick .sa-product,
.sa-product-pick a {
	font-weight: 600;
}

.sa-product-pick .sa-product {
	color: #c2410c;
	background: rgba(234, 88, 12, 0.1);
	padding: 0.12em 0.4em;
	border-radius: 4px;
}

.sa-product-pick a {
	color: #c2410c;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.sa-product-pick a:hover,
.sa-product-pick a:focus {
	color: #9a3412;
}

/* Block editor canvas */
.editor-styles-wrapper .sa-product-pick-heading,
.block-editor-block-list__layout .sa-product-pick-heading {
	margin-top: 2rem;
}

.editor-styles-wrapper .sa-product-pick,
.block-editor-block-list__layout .sa-product-pick {
	margin-bottom: 2rem;
}

@media (max-width: 600px) {
	.sa-product-pick-heading {
		font-size: 1em;
		gap: 0.5rem 0.6rem;
	}

	.sa-product-pick-heading::before {
		font-size: 0.58em;
	}

	.sa-product-pick {
		padding: 1rem;
		font-size: 1em;
	}
}

/**
 * Shop the Look — consolidated product list section.
 * Heading (h2.sa-shop-the-look-heading) + intro + list render as one card.
 * Neutral body + high-contrast affiliate links (matches product-pick link color).
 */
.sa-shop-the-look-heading {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem 0.85rem;
	margin: 2.75rem 0 0;
	padding: 1rem 1.25rem 0.9rem 1.4rem;
	font-size: 1.42em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #1c1917;
	background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 55%, #fbcfe8 100%);
	border: 2px solid #f9a8d4;
	border-bottom: 1px dashed #f0abfc;
	border-radius: 14px 14px 0 0;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.75) inset,
		0 6px 28px rgba(190, 24, 93, 0.12);
}

.sa-shop-the-look-heading::before {
	content: "SHOP";
	position: static;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 0.12em;
	font-size: 0.58em;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1;
	color: #fff;
	background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
	padding: 0.45em 0.6em;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(157, 23, 77, 0.35);
}

.sa-shop-the-look-heading::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	border-radius: 14px 0 0 0;
	background: linear-gradient(180deg, #db2777 0%, #be185d 100%);
	pointer-events: none;
}

.sa-shop-the-look-intro {
	position: relative;
	margin: 0;
	padding: 1rem 1.25rem 0.65rem 1.4rem;
	font-size: 1.05em;
	line-height: 1.7;
	color: #44403c;
	background: #fff;
	border-left: 2px solid #f9a8d4;
	border-right: 2px solid #f9a8d4;
}

.sa-shop-the-look-intro::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: linear-gradient(180deg, #f9a8d4 0%, #f472b6 100%);
	pointer-events: none;
}

.sa-shop-the-look-heading + .sa-shop-the-look-intro {
	margin-top: 0;
}

.sa-shop-the-look-list {
	position: relative;
	margin: 0 0 2.5rem;
	padding: 0.85rem 1.25rem 1.35rem 1.15rem;
	font-size: 1.04em;
	line-height: 1.8;
	color: #292524;
	list-style: none;
	background: #fff;
	border: 2px solid #f9a8d4;
	border-top: none;
	border-radius: 0 0 14px 14px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 10px 32px rgba(190, 24, 93, 0.1);
}

.sa-shop-the-look-list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	border-radius: 0 0 0 14px;
	background: linear-gradient(180deg, #f472b6 0%, #be185d 100%);
	pointer-events: none;
}

.sa-shop-the-look-intro + .sa-shop-the-look-list {
	margin-top: 0;
}

.sa-shop-the-look-list li {
	position: relative;
	margin: 0 0 0.65rem;
	padding: 0.6rem 0.75rem 0.6rem 1.75rem;
	background: #fafaf9;
	border: 1px solid #e7e5e4;
	border-radius: 8px;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sa-shop-the-look-list li:last-child {
	margin-bottom: 0;
}

.sa-shop-the-look-list li::before {
	content: "→";
	position: absolute;
	left: 0.65rem;
	top: 0.65rem;
	font-size: 0.95em;
	font-weight: 700;
	color: #a8a29e;
	line-height: 1;
}

.sa-shop-the-look-list li:hover {
	background: #fff;
	border-color: #d6d3d1;
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.06);
}

.sa-shop-the-look-list li strong {
	color: #1c1917;
	font-weight: 700;
}

.sa-shop-the-look-list .sa-product,
.sa-shop-the-look-list a {
	font-weight: 700;
	color: #c2410c;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.sa-shop-the-look-list .sa-product {
	background: #fff7ed;
	padding: 0.14em 0.5em;
	border-radius: 4px;
	border-bottom: none;
	text-decoration: underline;
	text-decoration-color: #ea580c;
}

.sa-shop-the-look-list a:hover,
.sa-shop-the-look-list a:focus {
	color: #9a3412;
	text-decoration-thickness: 2px;
}

.sa-shop-the-look-list .sa-product:hover,
.sa-shop-the-look-list .sa-product:focus {
	background: #ffedd5;
	color: #9a3412;
}

/* Standalone blocks (legacy) still get full card treatment */
.sa-shop-the-look-list:not(.sa-shop-the-look-intro + .sa-shop-the-look-list) {
	margin-top: 2.75rem;
	border-top: 2px solid #818cf8;
	border-radius: 14px;
}

.editor-styles-wrapper .sa-shop-the-look-heading,
.block-editor-block-list__layout .sa-shop-the-look-heading {
	margin-top: 2.75rem;
}

.editor-styles-wrapper .sa-shop-the-look-list,
.block-editor-block-list__layout .sa-shop-the-look-list {
	margin-bottom: 2.5rem;
}

@media (max-width: 600px) {
	.sa-shop-the-look-heading {
		font-size: 1.2em;
		gap: 0.55rem 0.65rem;
		padding: 0.9rem 1rem 0.8rem 1.15rem;
	}

	.sa-shop-the-look-heading::before {
		font-size: 0.54em;
	}

	.sa-shop-the-look-intro,
	.sa-shop-the-look-list {
		padding-left: 1.1rem;
		padding-right: 1rem;
		font-size: 1em;
	}

	.sa-shop-the-look-list li {
		padding-left: 1.55rem;
	}
}