/*!
 * Stunning Related for Posts, Products and Pages — front-end styles
 * All visual tokens come from inline custom properties set per Display.
 */

.srpp {
	--srpp-cols: var(--srpp-cols-d, 3);
	--srpp-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	margin: 2em 0;
	clear: both;
	font-size: var(--srpp-text-size, 14px);
	line-height: 1.55;
	color: var(--srpp-text, #5c6478);
	box-sizing: border-box;
}

.srpp *,
.srpp *::before,
.srpp *::after { box-sizing: border-box; }

.srpp-shadow-none { --srpp-shadow: none; }
.srpp-shadow-sm { --srpp-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); }
.srpp-shadow-md { --srpp-shadow: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); }
.srpp-shadow-lg { --srpp-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); }

/* ---------- Heading ---------- */

.srpp-heading {
	margin: 0 0 .9em;
	color: var(--srpp-title, #1b2138);
	font-size: calc(var(--srpp-title-size, 16px) + 4px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.srpp-align-center { text-align: center; }
.srpp-align-right { text-align: right; }

.srpp-heading::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin-top: .5em;
	border-radius: 3px;
	background: var(--srpp-accent, #f0a02e);
}

.srpp-align-center .srpp-heading::after,
.srpp-heading.srpp-align-center::after { margin-left: auto; margin-right: auto; }

/* ---------- Shared item chrome ---------- */

.srpp-items { margin: 0; padding: 0; list-style: none; }

.srpp-item { min-width: 0; }

.srpp a.srpp-link { text-decoration: none; color: inherit; }

.srpp-title {
	margin: 0 0 .35em;
	color: var(--srpp-title, #1b2138);
	font-size: var(--srpp-title-size, 16px);
	font-weight: 650;
	line-height: 1.35;
}

.srpp-title a { color: inherit; text-decoration: none; }
.srpp-title a:hover,
.srpp-title a:focus-visible { color: var(--srpp-accent, #f0a02e); }

.srpp-excerpt {
	margin: 0 0 .6em;
	color: var(--srpp-text, #5c6478);
	font-size: var(--srpp-text-size, 14px);
}

.srpp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em;
	color: var(--srpp-meta, #949cae);
	font-size: .85em;
}

.srpp-sep { opacity: .5; }

.srpp-term {
	display: inline-block;
	margin: 0 0 .5em;
	padding: .2em .6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--srpp-accent, #f0a02e) 12%, transparent);
	color: var(--srpp-accent, #f0a02e);
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.srpp-term { background: rgba(240, 160, 46, .14); }
}

.srpp-price {
	color: var(--srpp-title, #1b2138);
	font-size: 1.02em;
	font-weight: 700;
}

.srpp-price del { opacity: .5; font-weight: 400; margin-right: .35em; }
.srpp-price ins { text-decoration: none; }

.srpp-rating { margin: 0 0 .4em; font-size: .9em; }

.srpp-button {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin-top: .5em;
	color: var(--srpp-accent, #f0a02e);
	font-weight: 650;
	font-size: .9em;
}

.srpp-button:hover .srpp-arrow { transform: translateX(3px); }
.srpp-arrow { transition: transform .18s ease; }

.srpp-cart-wrap { margin-top: .6em; }

.srpp .srpp-cart {
	display: inline-block;
	padding: .55em 1.1em;
	border: 0;
	border-radius: calc(var(--srpp-radius, 12px) / 1.6);
	background: var(--srpp-accent, #f0a02e);
	color: #fff;
	font-size: .88em;
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.srpp .srpp-cart:hover { filter: brightness(.93); color: #fff; }

/* ---------- Thumbnails and ratios ---------- */

.srpp-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--srpp-img-radius, 10px);
	background: rgba(0, 0, 0, .04);
}

.srpp-thumb .srpp-img,
.srpp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .35s ease;
}

.srpp-item:hover .srpp-thumb img { transform: scale(1.04); }

.srpp-ratio-16-9 .srpp-thumb { aspect-ratio: 16 / 9; }
.srpp-ratio-4-3 .srpp-thumb { aspect-ratio: 4 / 3; }
.srpp-ratio-3-2 .srpp-thumb { aspect-ratio: 3 / 2; }
.srpp-ratio-1-1 .srpp-thumb { aspect-ratio: 1 / 1; }
.srpp-ratio-3-4 .srpp-thumb { aspect-ratio: 3 / 4; }
.srpp-ratio-2-3 .srpp-thumb { aspect-ratio: 2 / 3; }
.srpp-ratio-original .srpp-thumb { aspect-ratio: auto; }

.srpp-badge {
	position: absolute;
	top: .6em;
	left: .6em;
	padding: .2em .55em;
	border-radius: 999px;
	background: var(--srpp-accent, #f0a02e);
	color: #fff;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- Layouts ---------- */

.srpp-layout-grid .srpp-items,
.srpp-layout-masonry .srpp-items {
	display: grid;
	grid-template-columns: repeat(var(--srpp-cols), minmax(0, 1fr));
	gap: var(--srpp-gap, 24px);
}

.srpp-layout-masonry .srpp-items {
	display: block;
	column-count: var(--srpp-cols);
	column-gap: var(--srpp-gap, 24px);
}

.srpp-layout-masonry .srpp-item {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--srpp-gap, 24px);
	break-inside: avoid;
}

.srpp-layout-list .srpp-items {
	display: flex;
	flex-direction: column;
	gap: calc(var(--srpp-gap, 24px) * .55);
}

.srpp-layout-horizontal .srpp-items {
	display: grid;
	grid-template-columns: repeat(var(--srpp-cols), minmax(0, 1fr));
	gap: var(--srpp-gap, 24px);
}

.srpp-layout-inline .srpp-items,
.srpp-layout-single .srpp-items { display: block; }

.srpp-layout-compact .srpp-items {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--srpp-gap, 24px) * .4);
}

@media (max-width: 1024px) {
	.srpp { --srpp-cols: var(--srpp-cols-t, 2); }
}

@media (max-width: 600px) {
	.srpp { --srpp-cols: var(--srpp-cols-m, 1); }
}

/* ---------- Template 01 — Minimal ---------- */

.srpp-tpl-01 .srpp-item { border-bottom: 1px solid var(--srpp-border, #f0e7dc); }
.srpp-tpl-01 .srpp-item:last-child { border-bottom: 0; }

.srpp-tpl-01 .srpp-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: .7em 0;
	color: var(--srpp-title, #1b2138);
	font-size: var(--srpp-title-size, 16px);
	font-weight: 600;
}

.srpp-tpl-01 .srpp-row:hover { color: var(--srpp-accent, #f0a02e); }
.srpp-tpl-01 .srpp-row:hover .srpp-arrow { transform: translateX(3px); }
.srpp-tpl-01 .srpp-meta { padding-bottom: .7em; margin-top: -.4em; }

/* ---------- Template 02 — Editorial ---------- */

.srpp-tpl-02 .srpp-editorial {
	display: flex;
	gap: 1em;
	padding: var(--srpp-pad, 16px);
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-left: 4px solid var(--srpp-accent, #f0a02e);
	border-radius: var(--srpp-radius, 12px);
	background: var(--srpp-card-bg, #fff);
	box-shadow: var(--srpp-shadow);
}

.srpp-tpl-02 .srpp-thumb-link { flex: 0 0 34%; max-width: 200px; }
.srpp-tpl-02 .srpp-body { flex: 1 1 auto; }
.srpp-tpl-02 .srpp-title { font-size: calc(var(--srpp-title-size, 16px) + 1px); }

@media (max-width: 600px) {
	.srpp-tpl-02 .srpp-editorial { flex-direction: column; }
	.srpp-tpl-02 .srpp-thumb-link { max-width: none; }
}

/* ---------- Template 03 — Image Card ---------- */

.srpp-tpl-03 .srpp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: var(--srpp-radius, 12px);
	background: var(--srpp-card-bg, #fff);
	box-shadow: var(--srpp-shadow);
	transition: transform .22s ease, box-shadow .22s ease;
}

.srpp-tpl-03 .srpp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 20px -8px rgba(16, 24, 40, .18);
}

.srpp-tpl-03 .srpp-thumb { border-radius: 0; }
.srpp-tpl-03 .srpp-body { padding: var(--srpp-pad, 16px); }

/* ---------- Template 04 — Horizontal ---------- */

.srpp-tpl-04 .srpp-h-card {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	padding: calc(var(--srpp-pad, 16px) * .75);
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: var(--srpp-radius, 12px);
	background: var(--srpp-card-bg, #fff);
	box-shadow: var(--srpp-shadow);
}

.srpp-tpl-04 .srpp-thumb-link { flex: 0 0 38%; max-width: 190px; }

@media (max-width: 480px) {
	.srpp-tpl-04 .srpp-h-card { flex-direction: column; }
	.srpp-tpl-04 .srpp-thumb-link { max-width: none; width: 100%; }
}

/* ---------- Template 05 — Magazine ---------- */

.srpp-tpl-05 .srpp-magazine {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--srpp-gap, 24px);
}

.srpp-tpl-05 .srpp-hero .srpp-title { font-size: calc(var(--srpp-title-size, 16px) + 6px); }
.srpp-tpl-05 .srpp-hero .srpp-thumb { margin-bottom: .8em; }

.srpp-tpl-05 .srpp-stack {
	display: flex;
	flex-direction: column;
	gap: calc(var(--srpp-gap, 24px) * .6);
}

.srpp-tpl-05 .srpp-stack-item {
	display: flex;
	gap: .8em;
	padding-bottom: calc(var(--srpp-gap, 24px) * .6);
	border-bottom: 1px solid var(--srpp-border, #f0e7dc);
}

.srpp-tpl-05 .srpp-stack-item:last-child { border-bottom: 0; padding-bottom: 0; }
.srpp-tpl-05 .srpp-stack-item .srpp-thumb-link { flex: 0 0 92px; }
.srpp-tpl-05 .srpp-stack-item .srpp-title { font-size: calc(var(--srpp-title-size, 16px) - 1px); }

@media (max-width: 768px) {
	.srpp-tpl-05 .srpp-magazine { grid-template-columns: 1fr; }
}

/* ---------- Template 06 — Numbered ---------- */

.srpp-tpl-06 .srpp-numbered { counter-reset: srpp; }

.srpp-tpl-06 .srpp-item {
	display: flex;
	gap: .9em;
	align-items: baseline;
	padding: .65em 0;
	border-bottom: 1px dashed var(--srpp-border, #f0e7dc);
}

.srpp-tpl-06 .srpp-item:last-child { border-bottom: 0; }

.srpp-tpl-06 .srpp-num {
	flex: 0 0 auto;
	min-width: 1.9em;
	color: var(--srpp-accent, #f0a02e);
	font-size: calc(var(--srpp-title-size, 16px) + 2px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	opacity: .85;
}

.srpp-tpl-06 .srpp-title { display: block; }

/* ---------- Template 07 — Glass ---------- */

.srpp-tpl-07 .srpp-glass {
	overflow: hidden;
	padding-bottom: var(--srpp-pad, 16px);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: calc(var(--srpp-radius, 12px) + 4px);
	background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 26px -12px rgba(16, 24, 40, .35);
	position: relative;
}

.srpp-tpl-07 .srpp-glass::before {
	content: "";
	position: absolute;
	inset: -40% 55% 55% -30%;
	background: radial-gradient(circle, color-mix(in srgb, var(--srpp-accent, #f0a02e) 40%, transparent), transparent 70%);
	opacity: .35;
	pointer-events: none;
}

.srpp-tpl-07 .srpp-thumb { border-radius: 0; }
.srpp-tpl-07 .srpp-body { position: relative; padding: var(--srpp-pad, 16px) var(--srpp-pad, 16px) 0; }

/* ---------- Template 08 — Featured ---------- */

.srpp-tpl-08 .srpp-featured {
	display: grid;
	grid-template-columns: minmax(0, 42%) 1fr;
	gap: 1.25em;
	align-items: center;
	padding: var(--srpp-pad, 16px);
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: calc(var(--srpp-radius, 12px) + 2px);
	background: var(--srpp-card-bg, #fff);
	box-shadow: var(--srpp-shadow);
}

.srpp-tpl-08 .srpp-title { font-size: calc(var(--srpp-title-size, 16px) + 5px); }

.srpp-tpl-08 .srpp-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9em;
	margin-top: .6em;
}

@media (max-width: 640px) {
	.srpp-tpl-08 .srpp-featured { grid-template-columns: 1fr; }
}

/* ---------- Template 09 — Pills ---------- */

.srpp-tpl-09 .srpp-pill {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	max-width: 100%;
	padding: .35em .9em .35em .35em;
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: 999px;
	background: var(--srpp-card-bg, #fff);
	color: var(--srpp-title, #1b2138);
	font-size: .92em;
	font-weight: 600;
	line-height: 1.3;
}

.srpp-tpl-09 .srpp-pill:hover {
	border-color: var(--srpp-accent, #f0a02e);
	color: var(--srpp-accent, #f0a02e);
}

.srpp-tpl-09 .srpp-pill-thumb {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background-size: cover;
	background-position: center;
}

.srpp-tpl-09 .srpp-pill:not(:has(.srpp-pill-thumb)) { padding-left: .9em; }
.srpp-tpl-09 .srpp-pill-price { margin-left: .45em; opacity: .7; font-weight: 500; }

/* ---------- Template 10 — Product Cards ---------- */

.srpp-tpl-10 .srpp-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: var(--srpp-radius, 12px);
	background: var(--srpp-card-bg, #fff);
	box-shadow: var(--srpp-shadow);
	text-align: center;
	transition: box-shadow .22s ease;
}

.srpp-tpl-10 .srpp-product:hover { box-shadow: 0 14px 22px -10px rgba(16, 24, 40, .2); }
.srpp-tpl-10 .srpp-thumb { border-radius: 0; }
.srpp-tpl-10 .srpp-body { display: flex; flex-direction: column; gap: .35em; padding: var(--srpp-pad, 16px); }
.srpp-tpl-10 .srpp-meta,
.srpp-tpl-10 .srpp-rating { justify-content: center; }
.srpp-tpl-10 .srpp-term { align-self: center; }

/* ---------- Template 11 — Product Minimal ---------- */

.srpp-tpl-11 .srpp-min-row {
	display: flex;
	align-items: center;
	gap: .85em;
	padding: .6em 0;
	border-bottom: 1px solid var(--srpp-border, #f0e7dc);
}

.srpp-tpl-11 .srpp-min-row:last-child { border-bottom: 0; }
.srpp-tpl-11 .srpp-thumb-link { flex: 0 0 56px; }
.srpp-tpl-11 .srpp-thumb { aspect-ratio: 1 / 1; }
.srpp-tpl-11 .srpp-body { flex: 1 1 auto; min-width: 0; }
.srpp-tpl-11 .srpp-title { margin: 0; }
.srpp-tpl-11 .srpp-end { display: flex; align-items: center; gap: .7em; flex: 0 0 auto; }

/* ---------- Template 12 — Carousel ---------- */

.srpp-carousel { position: relative; }

.srpp-viewport { overflow: hidden; }

.srpp-track {
	display: flex;
	gap: var(--srpp-gap, 24px);
	transition: transform .38s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.srpp-slide {
	flex: 0 0 calc((100% - (var(--srpp-cols) - 1) * var(--srpp-gap, 24px)) / var(--srpp-cols));
	overflow: hidden;
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: var(--srpp-radius, 12px);
	background: var(--srpp-card-bg, #fff);
	box-shadow: var(--srpp-shadow);
}

.srpp-slide .srpp-thumb { border-radius: 0; }
.srpp-slide .srpp-body { padding: var(--srpp-pad, 16px); }

.srpp-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--srpp-border, #f0e7dc);
	border-radius: 999px;
	background: var(--srpp-card-bg, #fff);
	color: var(--srpp-title, #1b2138);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}

.srpp-prev { left: -14px; }
.srpp-next { right: -14px; }
.srpp-nav:hover { background: var(--srpp-accent, #f0a02e); border-color: var(--srpp-accent, #f0a02e); color: #fff; }
.srpp-nav[disabled] { opacity: .35; cursor: default; }
.srpp-nav[disabled]:hover { background: var(--srpp-card-bg, #fff); color: var(--srpp-title, #1b2138); border-color: var(--srpp-border, #f0e7dc); }

.srpp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 1em; }

.srpp-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--srpp-border, #f0e7dc);
	cursor: pointer;
}

.srpp-dot.is-active { background: var(--srpp-accent, #f0a02e); width: 18px; }

/* ---------- Preview shell ---------- */

.srpp-is-preview { margin: 0; }