/* SPS UX — products overview (one full-width row per group) */
.sps-products{ --pr-red:#BF0101; --pr-red-dark:#8f0000; --pr-ink:#12161d; --pr-slate:#3f4a5a; --pr-line:#e6e8ee; --pr-body:#525a68;
	display:flex; flex-direction:column; gap:clamp(24px,3.5vw,40px);
	font-family:inherit; color:#1b2028;
	/* The theme's page templates leave shortcode content unconstrained on a
	   fullwidth/unboxed layout (no row wrapper supplies a reading width), so
	   this caps and centers itself instead of relying on one being present. */
	max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,3vw,32px); }
.sps-products *{ box-sizing:border-box; }

/* Each product group is a large full-width panel — photo on one side, name
   + full description + optional CTA on the other — instead of a small tile
   in a grid. With only a handful of groups this reads as a short set of
   confident feature panels rather than a wall of little boxes. */
.sps-pr-card{
	display:flex; align-items:stretch; gap:clamp(20px,4vw,48px);
	background:#fff; border:1px solid var(--pr-line); border-radius:22px; overflow:hidden;
	box-shadow:0 1px 2px rgba(16,20,28,.05);
	opacity:0; transform:translateY(24px);
	transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.sps-pr-card.is-in{ opacity:1; transform:translateY(0); transition-delay:calc(var(--i,0) * 90ms); }
.sps-pr-card:hover{ box-shadow:0 20px 44px rgba(16,20,28,.15); border-color:transparent; }
/* Alternate media side every other row for rhythm down a short list. */
.sps-pr-card.is-reverse{ flex-direction:row-reverse; }

.sps-pr-card-media{ position:relative; flex:0 0 clamp(240px,42%,460px); min-height:300px; overflow:hidden;
	background:linear-gradient(135deg,var(--pr-slate) 0%,var(--pr-ink) 100%); }
.sps-pr-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.sps-pr-card:hover .sps-pr-card-media img{ transform:scale(1.05); }
.sps-pr-card-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; }
.sps-pr-card-noimg span{ color:#fff; font-weight:700; font-size:1.5em; letter-spacing:.01em; opacity:.75; }

/* Small numbered chip on the photo — a quiet decorative cue that this is
   item N of a short, deliberate list, not a placeholder. */
.sps-pr-index{ position:absolute; top:18px; left:18px; font-size:.78em; font-weight:800; letter-spacing:.08em;
	color:#fff; background:rgba(18,22,29,.55); padding:5px 12px; border-radius:999px; }
.sps-pr-card.is-reverse .sps-pr-index{ left:auto; right:18px; }

.sps-pr-card-body{ flex:1; min-width:0; padding:clamp(26px,4vw,48px) clamp(24px,3.5vw,44px) clamp(26px,4vw,40px) 0;
	display:flex; flex-direction:column; justify-content:center; gap:12px; }
.sps-pr-card.is-reverse .sps-pr-card-body{ padding-left:clamp(24px,3.5vw,44px); padding-right:0; }
.sps-pr-card-body h3{ margin:0; font-size:clamp(1.55em,2.6vw,2.05em); line-height:1.15; color:var(--pr-ink); }
.sps-pr-desc{ position:relative; margin:0; color:var(--pr-body); font-size:1.05em; line-height:1.65;
	max-height:calc(1.65em * 5); overflow:hidden;
	transition:max-height .45s cubic-bezier(.2,.8,.2,1); }

/* Only a description that's actually cut off (rare at this width — checked
   client-side once we know it overflows) gets the bottom fade and grows on
   hover/focus. A short description that already fits has nothing added. */
.sps-pr-card.has-more .sps-pr-desc::after{
	content:''; position:absolute; left:0; right:0; bottom:0; height:1.8em;
	background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 80%);
	transition:opacity .3s ease; }
.sps-pr-card.has-more:hover .sps-pr-desc,
.sps-pr-card.has-more:focus-within .sps-pr-desc{ max-height:600px; }
.sps-pr-card.has-more:hover .sps-pr-desc::after,
.sps-pr-card.has-more:focus-within .sps-pr-desc::after{ opacity:0; }

/* CTA is now a solid pill button rather than a small text link, to carry
   its own visual weight inside a much larger panel. */
.sps-pr-cta{ margin-top:8px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
	font-weight:700; font-size:.92em; color:#fff; background:var(--pr-red); text-decoration:none;
	padding:13px 24px; border-radius:999px; transition:background .2s ease, transform .2s ease; }
.sps-pr-cta:hover{ background:var(--pr-red-dark); transform:translateX(2px); }
.sps-pr-cta .arrow{ display:inline-block; transition:transform .25s ease; }
.sps-pr-cta:hover .arrow{ transform:translateX(4px); }

.sps-pr-samplenote{ font-size:.85em; color:#8a6d3b; background:#fcf7e8;
	border:1px solid #f0e2bd; border-radius:8px; padding:10px 14px; margin:0; }
.sps-pr-empty{ color:#8b90a0; }

@media (max-width:820px){
	.sps-pr-card, .sps-pr-card.is-reverse{ flex-direction:column; }
	.sps-pr-card-media{ flex-basis:auto; min-height:0; aspect-ratio:16/10; }
	.sps-pr-card-body, .sps-pr-card.is-reverse .sps-pr-card-body{ padding:24px 22px 28px; }
}

@media (prefers-reduced-motion:reduce){
	.sps-pr-card{ opacity:1; transform:none; transition:box-shadow .3s ease; }
	.sps-pr-card-media img{ transition:none; }
	.sps-pr-desc{ transition:none; }
}