/* ==========================================================================
   WPrio — single product landing page.
   Layers on bundle-product.css: same shell, dark hero, license picker.
   ========================================================================== */

.wpr-product { --ink-900: #0d1526; --ink-800: #121c31; --ink-700: #1b2742; }

/* --------------------------------------------------------------------------
   Dark hero bento
   -------------------------------------------------------------------------- */

.wpr-product .stage--dark { background: var(--ink-900); border-color: var(--ink-900); }

.wpr-product .bento--dark {
	background: transparent; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
	gap: 10px; padding: 0;
}
.wpr-product .bento--dark .tile {
	background: linear-gradient(145deg, var(--ink-700), var(--ink-800));
	border-color: rgba(255, 255, 255, .07); color: #fff;
	display: flex; align-items: center; gap: 10px; justify-content: flex-start;
}
.wpr-product .bento--dark .tile .n {
	font-family: "Inter Tight", sans-serif; font-weight: 600; letter-spacing: -.03em;
	font-size: clamp(20px, 2.4vw, 34px); line-height: 1; color: #fff;
}
.wpr-product .bento--dark .tile small { color: rgba(255, 255, 255, .62); font-size: 11.5px; line-height: 1.3; }
.wpr-product .bento--dark .tile--wide { grid-column: span 2; }
.wpr-product .bento--dark .tile--tall { grid-row: span 2; flex-direction: column; align-items: flex-start; justify-content: center; }
.wpr-product .bento--dark .tile--hero {
	grid-column: span 2; grid-row: span 2; background: var(--blue); border-color: var(--blue);
	align-items: flex-end;
}
.wpr-product .bento--dark .tile--hero b {
	font-family: "Inter Tight", sans-serif; font-weight: 600; letter-spacing: -.03em; color: #fff;
	font-size: clamp(20px, 2.8vw, 34px); line-height: 1.1;
}

.wpr-product .thumb--dark > span { background: var(--ink-900); }
.wpr-product .thumb--dark .mini i { background: rgba(255, 255, 255, .25); }
.wpr-product .thumb--dark .mini i:first-child { background: var(--blue); }
.wpr-product .mini--light i { background: #dbe4fc; }
.wpr-product .mini--light i:first-child { background: #9fb6f5; }

.wpr-product .shot--ui { height: 100%; display: grid; place-items: center; background: var(--blue-50); }
.wpr-product .shot--ui .body h4 { font-size: 15px; margin-bottom: 14px; }
.wpr-product .shot--ui .rows { display: grid; gap: 8px; }
.wpr-product .shot--ui .rows span { display: block; height: 10px; border-radius: 4px; background: #e3e9f8; }
.wpr-product .shot--ui .rows span:nth-child(2n) { width: 80%; }

/* --------------------------------------------------------------------------
   Sticky gallery
   The bundle page sticks its buy box; here it is the other way round, so a
   long licence column scrolls past the image instead of leaving it behind.
   96px clears the site's sticky header.
   -------------------------------------------------------------------------- */

/* The hero clips its own decorative blob with overflow:hidden, which also
   clips a sticky child to the hero's box. The blob is suppressed here, so the
   clipping can go and the gallery can stick to the viewport instead. */
.wpr-product .hero {
	overflow: visible;
}

.wpr-product .hero::before {
	display: none;
}

.wpr-product .gallery {
	position: sticky;
	top: 96px;
	align-self: start;
}

.wpr-product .buy {
	position: static;
}

@media ( max-width: 1080px ) {
	.wpr-product .gallery {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   Buy box: license picker
   -------------------------------------------------------------------------- */

.wpr-product .buy h1 { font-size: 30px; }
.wpr-product .licenses { display: grid; gap: 8px; margin: 16px 0 18px; }
.wpr-product .lic {
	display: block; width: 100%; text-align: start;
	padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
	background: #fff; font-weight: 500; font-size: 14.5px; color: var(--ink);
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.wpr-product .lic:hover { border-color: var(--ring, var(--blue-200)); }
.wpr-product .lic[aria-checked="true"] { border-color: var(--c, var(--blue)); box-shadow: 0 0 0 3px var(--ring, var(--blue-100)); }
.wpr-product .lic[hidden] { display: none; }

.wpr-product .price { padding: 0; border-top: 0; margin-bottom: 16px; }
.wpr-product .checks li { align-items: flex-start; }
.wpr-product .checks .ico { color: var(--green); margin-top: 3px; }
.wpr-product .checks b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Dark stats bar
   -------------------------------------------------------------------------- */

.wpr-product .stats--plain > div {
	display: block; text-align: center; padding: 26px 20px;
	border-inline-start: 1px solid #f0f0f0;
}
.wpr-product .stats--plain > div:first-child { border-inline-start: 0; }
.wpr-product .stats--plain > div + div { border-left: 0; }
.wpr-product .stats--plain b {
	display: block; font-family: "Inter Tight", sans-serif; font-weight: 600;
	font-size: 26px; letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px;
}
.wpr-product .stats--plain small { display: block; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Feature tabs and cards
   -------------------------------------------------------------------------- */

.wpr-product .ftabs {
	display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 28px;
	background: #fff; border: 1px solid var(--line); border-radius: 999px;
}
.wpr-product .ftabs { display: flex; width: max-content; }
.wpr-product .sec .wrap > .ftabs { margin-inline: auto; }
.wpr-product .ftab {
	display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px;
	border: 0; border-radius: 999px; background: none;
	font-weight: 500; font-size: 14.5px; color: var(--body);
	transition: background .15s, color .15s;
}
.wpr-product .ftab small { font-size: 12px; opacity: .75; }
.wpr-product .ftab:hover { color: var(--ink); }
.wpr-product .ftab[aria-selected="true"] { background: var(--c, var(--blue)); color: #fff; }

.wpr-product .fpanel[hidden] { display: none; }
.wpr-product .fgrid { display: grid; grid-template-columns: repeat( var(--cols, 3), 1fr ); gap: 16px; }
.wpr-product .fcard {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 22px; box-shadow: var(--shadow);
}
.wpr-product .fcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wpr-product .fcard .fi {
	width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
	background: var(--tint, var(--blue-100)); color: var(--c, var(--blue));
}
.wpr-product .ftag {
	font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.wpr-product .fcard h3 { font-size: 16px; margin-bottom: 8px; }
.wpr-product .fcard p { font-size: 14px; color: var(--body); }

.wpr-product .fmore {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin-top: 16px; padding: 18px 22px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
}
.wpr-product .fmore p { font-size: 14px; color: var(--body); margin: 0; flex: 1 1 320px; }
.wpr-product .fmore b { color: var(--ink); }
.wpr-product .fmore:not(:has(p)) { justify-content: center; }
.wpr-product .fnote { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Bundle promo card
   -------------------------------------------------------------------------- */

.wpr-product .plug.is-current {
	background: var(--tint, var(--blue-50));
	border-color: var(--ring, #dbe4fc);
	border-inline-start-color: var(--c, var(--blue));
}
.wpr-product .this-plugin {
	display: inline-flex; align-items: center; margin-inline-start: 8px; padding: 2px 8px;
	border-radius: 999px; background: var(--c, var(--blue)); color: #fff;
	font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.wpr-product .fgrid { grid-template-columns: repeat( 2, 1fr ); }
}

@media (max-width: 860px) {
	.wpr-product .stats--plain { grid-template-columns: repeat(2, 1fr); }
	.wpr-product .stats--plain > div:nth-child(odd) { border-inline-start: 0; }
	.wpr-product .stats--plain > div:nth-child(n+3) { border-top: 1px solid #f0f0f0; }
}

@media (max-width: 760px) {
	.wpr-product .fgrid { grid-template-columns: 1fr; }
	.wpr-product .ftabs { width: 100%; overflow-x: auto; }
}

.wpr-product .bento--dark { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); }
.wpr-product .bento--dark .tile--stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }

/* --- feature card badge --- */
.wpr-product .fcard h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpr-product .fbadge {
	padding: 2px 8px; border-radius: 999px; background: var(--c, var(--blue)); color: #fff;
	font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* --- rating row --- */
.wpr-product .buy .rating { margin: -4px 0 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.wpr-product .buy .rating b { color: var(--ink); }

/* --- steps --- */
.wpr-product .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wpr-product .step {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 24px; box-shadow: var(--shadow);
}
.wpr-product .step .num {
	display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px;
	border-radius: 10px; background: var(--tint, var(--blue-100)); color: var(--c, var(--blue));
	font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 15px;
}
.wpr-product .step h3 { font-size: 16px; margin-bottom: 8px; }
.wpr-product .step p { font-size: 14px; }

/* --- plain comparison table --- */
.wpr-product .compare--plain th.us { color: var(--c, var(--blue)); }
.wpr-product .compare--plain td.us { color: var(--ink); font-weight: 500; }
.wpr-product .compare--plain td.them { color: var(--muted); }
.wpr-product .compare--plain table { width: 100%; border-collapse: collapse; }
.wpr-product .compare--plain th, .wpr-product .compare--plain td {
	text-align: start; padding: 18px 24px; font-size: 14.5px;
	border-top: 1px solid var(--line);
}
.wpr-product .compare--plain thead th { border-top: 0; font-size: 13.5px; color: var(--heading); }
.wpr-product .compare--plain tbody th { font-weight: 600; color: var(--ink); }

/* --- layout library --- */
.wpr-product .lib { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wpr-product .lib-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
	padding: 24px; box-shadow: var(--shadow);
}
.wpr-product .lib-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.wpr-product .lib-art {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
	padding: 20px; margin-bottom: 22px; border-radius: var(--r-lg); background: var(--blue-50);
}
.wpr-product .lib-card--wide .lib-art { margin: 0; order: 2; }
.wpr-product .lib-art i { display: block; height: 52px; border-radius: 8px; background: #fff; border: 1px solid #e3e9f8; }
.wpr-product .lib-art i:nth-child(1) { background: linear-gradient(135deg, #dbe4fc, #fff); }
.wpr-product .lib-art i:nth-child(4) { background: linear-gradient(135deg, #e8f7ee, #fff); }
.wpr-product .lib-art i:nth-child(5) { background: linear-gradient(135deg, #fff4e0, #fff); }

/* Library artwork. Three hand-built scenes in place of the tile grid; every
   accent reads from --c so each product keeps its own palette. */
.wpr-product .lib-art--packs,
.wpr-product .lib-art--kits,
.wpr-product .lib-art--sections { display: block; min-height: 258px; }

.wpr-product .lib-art--packs { position: relative; padding: 18px 18px 46px; }
.wpr-product .la-win { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .28); }
.wpr-product .la-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #f3f4f7; }
.wpr-product .la-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d3d6de; border: 0; display: block; }
.wpr-product .la-bar span { margin-left: 10px; font-size: 8px; color: #8b90a0; letter-spacing: .01em; }
.wpr-product .la-page { padding: 11px; }
.wpr-product .la-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.wpr-product .la-nav b { width: 26px; height: 7px; border-radius: 3px; background: var(--c, var(--blue)); }
.wpr-product .la-nav u { width: 16px; height: 4px; border-radius: 2px; background: #e2e5ec; }
.wpr-product .la-nav u:first-of-type { margin-left: auto; }
.wpr-product .la-nav em { width: 30px; height: 9px; border-radius: 4px; background: var(--c, var(--blue)); }
.wpr-product .la-hero { display: grid; grid-template-columns: 1fr .82fr; gap: 10px; align-items: start; margin-bottom: 10px; }
.wpr-product .la-copy { display: grid; gap: 5px; }
.wpr-product .la-copy s { display: block; height: 6px; border-radius: 3px; background: #343a46; text-decoration: none; }
.wpr-product .la-copy s.w90 { width: 90%; }
.wpr-product .la-copy s.w70 { width: 70%; background: #d9dce3; }
.wpr-product .la-copy s.w50 { width: 50%; background: #d9dce3; }
.wpr-product .la-copy s.w100 { width: 100%; background: #d9dce3; }
.wpr-product .la-copy s.w60 { width: 60%; background: #e3e6ec; }
.wpr-product .la-btns { display: flex; gap: 5px; margin-top: 4px; }
.wpr-product .la-btns em { width: 30px; height: 9px; border-radius: 4px; background: var(--c, var(--blue)); }
.wpr-product .la-btns em.is-ghost { background: #fff; border: 1px solid #dfe3ea; }
.wpr-product .la-shot { display: block; height: 52px; border-radius: 6px; background: linear-gradient(135deg, var(--ring, #dbe4fc), #fff); }
.wpr-product .la-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wpr-product .la-cols span { display: block; height: 30px; border-radius: 5px; background: #f1f3f7; }
.wpr-product .la-float {
	position: absolute; right: 12px; bottom: 12px; width: 134px;
	padding: 10px 12px; border-radius: 9px; background: #fff;
	box-shadow: 0 10px 26px -10px rgba(16, 24, 40, .3);
}
.wpr-product .la-float b { display: block; font-size: 9.5px; color: var(--heading); margin-bottom: 7px; }
.wpr-product .la-float ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wpr-product .la-float li { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--body); }
.wpr-product .la-float .ico { width: 9px; height: 9px; color: var(--c, var(--blue)); flex: none; }

.wpr-product .lib-art--kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: center; }
.wpr-product .la-kit { padding: 7px; border-radius: 8px; background: #fff; border: 1px solid #e6e9f0; }
.wpr-product .la-kit.is-on { border-color: var(--c, var(--blue)); box-shadow: 0 0 0 2px var(--ring, #dbe4fc); }
.wpr-product .la-thumb {
	display: grid; align-items: center; height: 42px; padding: 0 8px; margin-bottom: 6px;
	border-radius: 5px; background: linear-gradient(135deg, var(--g, #dbe4fc), #fff);
}
.wpr-product .la-thumb s { display: block; height: 4px; width: 70%; border-radius: 2px; background: rgba(32, 38, 51, .55); text-decoration: none; }
.wpr-product .la-kit small { display: block; font-size: 8.5px; color: var(--body); }
.wpr-product .la-kit:nth-child(1) .la-thumb { --g: var(--ring, #dbe4fc); }
.wpr-product .la-kit:nth-child(2) .la-thumb { --g: #d6efdd; }
.wpr-product .la-kit:nth-child(3) .la-thumb { --g: #d7ecfb; }
.wpr-product .la-kit:nth-child(4) .la-thumb { --g: #fbeec4; }
.wpr-product .la-kit:nth-child(5) .la-thumb { --g: #fbd9e1; }
.wpr-product .la-kit:nth-child(6) .la-thumb { --g: #dcdffa; }

.wpr-product .lib-art--sections { display: grid; grid-template-columns: 1fr; gap: 9px; align-content: center; }
.wpr-product .la-sec { padding: 11px 12px; border-radius: 9px; background: #fff; border: 1px solid #e6e9f0; }
.wpr-product .la-sec em {
	display: block; font-style: normal; font-size: 8px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--blue)); margin-bottom: 8px;
}
.wpr-product .la-row { display: grid; grid-template-columns: 1fr .5fr; gap: 10px; align-items: center; }
.wpr-product .la-row--tight { grid-template-columns: auto 1fr; gap: 9px; }
.wpr-product .la-pill { display: block; width: 32px; height: 9px; border-radius: 4px; background: var(--c, var(--blue)); margin-top: 3px; }
.wpr-product .la-block { display: block; height: 42px; border-radius: 6px; background: linear-gradient(135deg, var(--ring, #dbe4fc), #fff); }
.wpr-product .la-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.wpr-product .la-price span { display: grid; gap: 5px; justify-items: center; padding: 9px 6px; border-radius: 6px; border: 1px solid #eceef4; }
.wpr-product .la-price span.is-on { border-color: var(--c, var(--blue)); box-shadow: 0 0 0 2px var(--ring, #dbe4fc); }
.wpr-product .la-price s { display: block; width: 18px; height: 6px; border-radius: 3px; background: #343a46; text-decoration: none; }
.wpr-product .la-price u { display: block; width: 100%; height: 5px; border-radius: 3px; background: #e7eaf1; text-decoration: none; }
.wpr-product .la-price span.is-on u { background: var(--c, var(--blue)); }
.wpr-product .la-av { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--ring, #dbe4fc); }
.wpr-product .la-stars { font-style: normal; font-size: 9px; letter-spacing: 1px; color: #ffb43a; }
.wpr-product .lib-n {
	display: block; font-family: "Inter Tight", sans-serif; font-weight: 600;
	font-size: 34px; letter-spacing: -.03em; color: var(--c, var(--blue)); line-height: 1; margin-bottom: 10px;
}
.wpr-product .lib-body h3 { font-size: 19px; margin-bottom: 8px; }
.wpr-product .lib-body p { font-size: 14.5px; margin-bottom: 18px; }
.wpr-product .lib-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.wpr-product .lib-points li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wpr-product .lib-points .ico { color: var(--green); }

/* --- reviews --- */
.wpr-product .quotes {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--c, var(--blue));
	background: linear-gradient(108deg, var(--c, var(--blue)) 22%, color-mix(in srgb, var(--c, var(--blue)) 58%, #fff) 100%);
	border-radius: 24px; padding: 32px; color: #fff;
	box-shadow: 0 26px 50px -28px color-mix(in srgb, var(--c, var(--blue)) 60%, transparent);
}
.wpr-product .quotes::after {
	content: ""; position: absolute; z-index: -1; right: -110px; top: -70px;
	width: 440px; height: 440px; border-radius: 50%;
	background: rgba(255, 255, 255, .10); pointer-events: none;
}
.wpr-product .quotes-score { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.wpr-product .quotes-score b { font-family: "Inter Tight", sans-serif; font-size: 28px; font-weight: 600; color: #fff; }
.wpr-product .quotes-score .stars { color: #ffd166; letter-spacing: 2px; }
.wpr-product .quotes-score small { color: rgba(255, 255, 255, .72); font-size: 13px; }
.wpr-product .quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wpr-product .quote { margin: 0; padding: 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.wpr-product .quote blockquote { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #fff; }
.wpr-product .quote blockquote::before { content: "\201C"; }
.wpr-product .quote blockquote::after { content: "\201D"; }
.wpr-product .quote figcaption { display: flex; align-items: center; gap: 10px; }
.wpr-product .quote .av {
	display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600; font-size: 13px;
}
.wpr-product .quote figcaption b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.wpr-product .quote figcaption small { display: block; color: rgba(255, 255, 255, .7); font-size: 12.5px; }

/* --- featured in --- */
.wpr-product .sec--slim { padding: 36px 0; }
.wpr-product .logos-row {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 20px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
}
.wpr-product .logos-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wpr-product .logos-item { font-family: "Inter Tight", sans-serif; font-size: 18px; font-weight: 600; color: var(--heading); }

@media (max-width: 900px) {
	.wpr-product .steps, .wpr-product .quotes-grid { grid-template-columns: 1fr; }
	.wpr-product .lib, .wpr-product .lib-card--wide { grid-template-columns: 1fr; }
	.wpr-product .lib-art--kits { grid-template-columns: repeat(2, 1fr); }
	.wpr-product .lib-card--wide .lib-art { order: 0; margin-bottom: 22px; }
	.wpr-product .compare--plain th, .wpr-product .compare--plain td { padding: 14px; font-size: 13.5px; }
}

.wpr-product .compare--plain thead th.us,
.wpr-product .compare--plain td.us { background: var(--tint, var(--blue-50)); }
.wpr-product .compare--plain thead th.us { background: var(--tint, var(--blue-50)); color: var(--c, var(--blue)); }
.wpr-product .compare--plain thead th.us span,
.wpr-product .compare--plain thead th.us em { all: unset; }

/* The section eyebrow and feature-panel wrapper follow the product too. */
.wpr-product .eyebrow { background: var(--tint, var(--blue-100)); color: var(--c, var(--blue)); }
.wpr-product .fpanel .fcard:hover { border-color: var(--ring, var(--line)); }

/* --------------------------------------------------------------------------
   A product page uses its own palette throughout, never the WPrio blue.
   -------------------------------------------------------------------------- */

.wpr-product .stats .si { background: var(--tint, var(--blue-100)); color: var(--c, var(--blue)); }
.wpr-product .wcard .fi { background: var(--tint, var(--blue-100)); color: var(--c, var(--blue)); }

.wpr-product .faq details[open] {
	border-color: var(--c, var(--blue-200));
	box-shadow: 0 0 0 3px var(--ring, var(--blue-50));
}
.wpr-product .faq details[open] summary i { background: var(--c, var(--blue)); }
.wpr-product .faq-more a { color: var(--c, var(--blue)); }

.wpr-product .btn--primary {
	background: var(--c, var(--blue));
	border-color: var(--c, var(--blue));
	box-shadow: none;
}
.wpr-product .btn--primary:hover { background: var(--c, var(--blue)); filter: brightness(.92); }

.wpr-product .bento--dark .tile--hero { background: var(--c, var(--blue)); border-color: var(--c, var(--blue)); }
.wpr-product .thumb--dark .mini i:first-child { background: var(--c, var(--blue)); }
.wpr-product .shot--ui { background: var(--tint, var(--blue-50)); }
.wpr-product .lib-art { background: var(--tint, var(--blue-50)); }

.wpr-product .cta { background: var(--c, var(--blue)); }
.wpr-product .cta::after { display: none; }
.wpr-product .cta .btn--white { color: var(--c, var(--blue)); }

/* The panel copy inherits a pale blue from the bundle, which reads cold on any
   other panel colour. Keep it neutral so it follows whatever --c is. */
.wpr-product .cta .sub { color: #fff; }
.wpr-product .cta .from span,
.wpr-product .cta .mini-checks { color: rgba(255, 255, 255, .88); }

.wpr-product .cta .bundle .btn--primary {
	background: var(--c, var(--blue));
	border-color: var(--c, var(--blue));
}
.wpr-product .cta .bundle .btn--primary:hover { background: var(--c, var(--blue)); filter: brightness(.92); }
.wpr-product .cta .lbl { color: var(--blue); }

.wpr-product .thumb .mini--light i:first-child { background: var(--c, var(--blue)); }
.wpr-product .actions .fluent-cart-direct-checkout-button {
	background: var(--c, var(--blue));
	box-shadow: none;
}
.wpr-product .actions .fluent-cart-direct-checkout-button:hover {
	background: var(--c, var(--blue));
	filter: brightness(.92);
}
.wpr-product .actions .fluent-cart-add-to-cart-button:hover {
	border-color: var(--c, var(--blue-200));
	color: var(--c, var(--blue));
}

/* A ready-made hero image in place of the generated bento. */
.wpr-product .stage--image {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: var(--ratio, 16 / 10.4);
}
.wpr-product .stage--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}