/* ======================================================
PRODUCT TEMPLATE — dark "Nocturne" pass (2026-08-22). Was a light-mode
file with every color a literal hex/rgba (no tokens existed here at all,
unlike style.css) — converted to the same --primary/--accent/--text/
--surface/--border/--success/--danger tokens style.css already defines,
so a future palette change is one :root edit instead of a re-audit of
this file. Non-color rules (spacing, layout, responsive breakpoints)
are untouched.
====================================================== */

/* ======================================================
ABOUT SECTION
====================================================== */

.poka-product-about-section {
	margin-bottom: 0;
}

.poka-product-about-title {
	font-size: 32px;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 16px 0;
	padding: 0;
}

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

/* ======================================================
PRODUCT HERO
====================================================== */

.single-product-page .poka-product-row--reverse {
	flex-direction: row-reverse;
}

/* HERO WRAPPER */

.single-product-wrapper .container:first-child {
	margin-top: 50px;
}

/* HERO ROW */

.single-product-wrapper .container:first-child .row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

/* HERO COLUMNS */

.poka-product-hero__media,
.poka-product-hero__summary {
	height: 100%;
	display: flex;
}

/* ======================================================
LEFT COLUMN (IMAGE)
====================================================== */

.poka-product-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.poka-product-hero__image-wrap {
	background: var(--surface);
	border-radius: 28px;
	padding: 28px;
	width: 100%;
	max-width: 540px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;
}

.poka-product-featured-image {
	display: block;
	width: auto;
	height: auto;

	max-width: 100%;
	max-height: 420px;

	object-fit: contain;
	border-radius: 18px;
}

/* ======================================================
RIGHT COLUMN
====================================================== */

.poka-product-hero__summary {
	align-items: flex-start;
	justify-content: center;
}

.poka-product-hero__summary-inner {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding-top: 6px;
}

/* ======================================================
TITLE
====================================================== */

.poka-product-title {
	font-size: 46px;
	line-height: 1.1;
	margin-bottom: 0px;
	text-align: center;
}




/* ======================================================
HERO CARD
====================================================== */

.poka-product-hero-card {
	background: var(--surface);
	border-radius: 24px;
	padding: 32px;
	border: 1px solid var(--border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	width: 100%;
	position: relative;
}

.poka-product-hero-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* ======================================================
INTRO
====================================================== */

.poka-product-hero__intro {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 14px;
  border-radius: 999px;
  margin-top: 10px;
}

.poka-product-hero__glance {
	margin-top: 24px;
	margin-bottom: 24px;
}

/* ======================================================
FEATURES SPACING
====================================================== */

.poka-product-hero__features {
	margin-top: 22px;
}

/* =========================================================
   Product Features - Base
   ========================================================= */

.product-features {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-start;
}

.product-feature {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	line-height: 1.2;
	box-sizing: border-box;
	color: var(--text);
}

.product-feature__emoji {
	flex: 0 0 auto;
	line-height: 1;
}

.product-feature__text {
	display: inline-block;
}

/* Primary category badge */
.product-feature--primary {
	font-weight: 600;
}


/* =========================================================
   Style: LONG
   Best for style_1
   ========================================================= */

.product-features--long {
	gap: 12px;
}

.product-features--long .product-feature {
	padding: 12px 16px;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 14px;
	min-height: 48px;
}

.product-features--long .product-feature__emoji {
	font-size: 18px;
}

.product-features--long .product-feature__text {
	font-size: 14px;
	font-weight: 500;
}

.product-features--long .product-feature--primary {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--border);
}

/* Optional: make long features breathe more in hero cards */
.poka-product-hero__features .product-features--long {
	margin-top: 10px;
}


/* =========================================================
   Style: COMPACT
   Best for style_2
   ========================================================= */

.product-features--compact {
	gap: 8px;
}

.product-features--compact .product-feature {
	padding: 8px 12px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	border-radius: 999px;
	min-height: 36px;
}

.product-features--compact .product-feature__emoji {
	font-size: 14px;
}

.product-features--compact .product-feature__text {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.product-features--compact .product-feature--primary {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--border);
}

/* tighter spacing inside style 2 / 3 hero cards */
.poka-product-hero__features--compact .product-features--compact {
	margin-top: 4px;
}


/* =========================================================
   Style: SHORT
   Best for style_3
   ========================================================= */

/* ======================================================
HEADER STYLE 3 LAYOUT FIX
====================================================== */

.poka-product-header__title-row {
	margin-bottom: 26px;
}

.poka-product-header__hero-row {
	display: flex;
	align-items: center; /* vertical center */
}

/* IMAGE */

.poka-product-featured-image {
	max-height: 420px;
	object-fit: contain;
	width: auto;
}

.product-features--short {
	gap: 8px;
}

.product-features--short .product-feature {
	padding: 6px 10px;
	border: 0;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	min-height: 30px;
}

.product-features--short .product-feature__emoji {
	font-size: 13px;
}

.product-features--short .product-feature__text {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.product-features--short .product-feature--primary {
	background: rgba(255, 255, 255, 0.08);
	font-weight: 600;
}


/* =========================================================
   Shared hero spacing helpers
   ========================================================= */

.poka-product-hero__features {
	margin-top: 18px;
}

.poka-product-hero__features + .poka-product-hero__features {
	margin-top: 12px;
}

.poka-product-tagline {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-muted);
	opacity: 1;
}

.poka-product-hero-summary {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
	opacity: 0.9;
}

.poka-product-hero__highlights,
.poka-product-hero__use-cases,
.poka-product-hero__glance,
.poka-product-hero__intro {
	margin-top: 16px;
}


/* =========================================================
   Hero card defaults
   ========================================================= */

.poka-product-hero-card {
	padding: 24px;
	border-radius: 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	box-sizing: border-box;
}

.poka-product-header--style-1 .poka-product-hero-card {
	max-width: 680px;
}

.poka-product-header--style-2 .poka-product-hero-card {
	max-width: 100%;
}

.poka-product-header--style-3 .poka-product-hero-card {
	max-width: 100%;
}


/* =========================================================
   Optional: style-specific tuning
   ========================================================= */

.poka-product-header--style-1 .poka-product-title {
	margin-bottom: 8px;
}

.poka-product-header--style-2 .poka-product-header-style-2__top {
	margin-bottom: 24px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991px) {
	.product-features--long .product-feature {
		padding: 10px 14px;
		min-height: 44px;
	}

	.poka-product-hero-card {
		padding: 20px;
	}
}

@media (max-width: 767px) {
	.product-features {
		gap: 8px;
	}

	.product-features--long .product-feature,
	.product-features--compact .product-feature,
	.product-features--short .product-feature {
		max-width: 100%;
	}

	.product-features--long .product-feature__text,
	.product-features--compact .product-feature__text,
	.product-features--short .product-feature__text {
		white-space: normal;
	}

	.poka-product-hero-card {
		padding: 18px;
		border-radius: 16px;
	}

	.poka-product-header-style-2__top {
		margin-bottom: 18px;
	}
}

/* PRIMARY FEATURE: PARENT CATEGORY */

.product-feature--primary {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--on-accent);
	font-weight: 600;
	font-size: 16px;
	padding: 16px 20px;
}

.product-feature--primary:hover {
	background: var(--primary-dark);
}

/* DIVIDER AFTER HERO */

.poka-product-divider-wrap {
	margin-top: 70px;
	margin-bottom: 55px;
}

.poka-product-divider {
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--border),
		transparent
	);
}

/* MAIN CONTENT */

.poka-product-content-wrap {
	max-width: 960px;
	margin: 0 auto;
}

.poka-product-content {
	margin-top: 0;
	color: var(--text);
}

.poka-product-content p {
	font-size: 17px;
	line-height: 1.85;
}

.poka-product-content h2 {
	margin-top: 48px;
	margin-bottom: 18px;
}

.poka-product-content h3 {
	margin-top: 34px;
	margin-bottom: 14px;
}

/* ======================================================
STEPLISTS
====================================================== */


/* STEP TIMELINE */

.contento-section .stepList {
	position: relative;
}

.contento-section .stepList::before {

	content: "";
	position: absolute;

	left: 8px;
	top: 8px;
	bottom: 8px;

	width: 2px;
	background: var(--border);

}

/* badge flotante */
.contento-section .stepList li::before {
	box-shadow:
	0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
	0 3px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* micro elevación de card */
.contento-section .stepList li:hover {
	transform: translateY(-2px);
}

.contento-section .stepList {
	list-style: none;
	counter-reset: step;

	padding: 0;
	margin: 30px auto;

	max-width: 720px;
	width: 100%;
}

.contento-section .stepList li {
	counter-increment: step;

	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;

	padding: 18px 22px;
	margin-bottom: 14px;

	position: relative;

	text-align: center;
}

.contento-section .stepList li::before {
	content: counter(step);
	position: absolute;

	left: -10px;
	top: 16px;

	background: var(--primary);
	color: var(--on-accent);

	font-size: 13px;
	font-weight: 600;

	width: 26px;
	height: 26px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
}


.contento-section .stepList li {

	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		border-color 0.15s ease;
}

.contento-section .stepList li:hover {

	transform: translateY(-2px);

	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.4);

	border-color: var(--primary);
}

/* ======================================================
STEP LIST LABEL
====================================================== */

.contento-section .stepList li strong {

	display: block;
	font-size: 16px;
	font-weight: 600;

	color: var(--text);

	margin-bottom: 6px;
	line-height: 1.35;
}

.contento-section .stepList li {

	padding: 22px 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
}

/* ======================================================
STEP LIST – NO NUMBERS
====================================================== */

.contento-section .stepList {
	counter-reset: none;
}

.contento-section .stepList li::before {
	display: none;
}

.contento-section .stepList::before {
	display: none;
}

@media (max-width: 768px) {

	.contento-section .stepList {
		max-width: 100%;
		padding-left: 0;
		padding-right: 16px;
	}

	.contento-section .stepList li {
		padding: 20px;
		margin-bottom: 14px;
	}

	.contento-section .stepList li::before {
		left: 22px;
		top: 18px;
	}

}

/* ======================================================
RESPONSIVE
====================================================== */

@media (max-width: 991px) {

	.single-product-page .poka-product-row--reverse {
		flex-direction: column;
	}

	.single-product-wrapper .container:first-child {
		margin-top: 30px;
	}

	.poka-product-hero__summary {
		margin-top: 24px;
	}

	.poka-product-hero-card {
		padding: 26px;
		max-width: 100%;
	}

	.poka-product-title {
		font-size: 34px;
	}

	.poka-product-hero__intro p {
		font-size: 16px;
		line-height: 1.7;
	}

	.poka-product-hero__image-wrap {
		padding: 18px;
		border-radius: 22px;
	}

	.poka-product-featured-image {
		border-radius: 14px;
	}

	.product-feature {
		font-size: 14px;
		padding: 12px 15px;
	}

	.product-feature--primary {
		font-size: 15px;
		padding: 13px 16px;
	}

	.poka-product-divider-wrap {
		margin-top: 45px;
		margin-bottom: 40px;
	}

	.poka-product-content-wrap {
		max-width: 100%;
	}

	.poka-product-content p {
		font-size: 16px;
		line-height: 1.8;
	}
}

@media (max-width: 991px) {

	/* title row */
	.poka-product-header__title-row {
		display: block;
		margin-bottom: 18px;
	}

	.poka-product-header__title-row > div {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}

	.poka-product-header__title-row > div:first-child {
		display: none;
	}

	.poka-product-title {
		text-align: center;
		margin-bottom: 0;
	}

	/* hero row */
	.poka-product-header__hero-row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		row-gap: 18px;
	}

	.poka-product-header__hero-row > div {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}

	/* image first, card second */
	.poka-product-header__hero-row > div:first-child {
		order: 1;
	}

	.poka-product-header__hero-row > div:last-child {
		order: 2;
	}

	/* make both blocks almost full width */
	.poka-product-hero__media,
	.poka-product-hero-card {
		width: 100%;
		max-width: 100%;
	}

	.poka-product-hero__image-wrap {
		max-width: 100%;
		min-height: auto;
		padding: 20px;
		border-radius: 22px;
	}

	.poka-product-featured-image {
		max-width: 100%;
		max-height: 280px;
		height: auto;
		width: auto;
	}

	/* spacing */
	.poka-product-hero__media {
		margin-bottom: 0;
	}

	.poka-product-hero-card {
		padding: 24px 20px;
		border-radius: 20px;
	}
}


/**
   Related Products for Affiliate
**/

.related-products-for-affiliate {
	margin-top: 24px;
}

.related-products-for-affiliate__group + .related-products-for-affiliate__group {
	margin-top: 32px;
}

.related-products-for-affiliate__parent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

.related-products-for-affiliate__parent-emoji {
	font-size: 1.2em;
	line-height: 1;
}

.related-products-for-affiliate__parent-text {
	display: inline-block;
}

/* GRID */
.related-products-for-affiliate__grid {
	display: grid;
	gap: 16px;
}

.related-products-for-affiliate__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related-products-for-affiliate__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.related-products-for-affiliate__grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ITEM */
.related-products-for-affiliate__item {
	min-width: 0;
}

.related-products-for-affiliate__link {
	display: block;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-products-for-affiliate__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	border-color: var(--primary);
}

.related-products-for-affiliate__thumb {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
}

.related-products-for-affiliate__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-products-for-affiliate__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
	text-align: center;
}

/* CAROUSEL */
.related-products-for-affiliate__group--carousel .poka-carousel--products .related-products-for-affiliate__item {
	padding: 2px;
}

.related-products-for-affiliate__group--carousel .related-products-for-affiliate__link {
	margin: 0 4px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
	.related-products-for-affiliate__grid--cols-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.related-products-for-affiliate__parent {
		margin-bottom: 14px;
		font-size: 1rem;
	}

	.related-products-for-affiliate__grid--cols-2,
	.related-products-for-affiliate__grid--cols-3,
	.related-products-for-affiliate__grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.related-products-for-affiliate__link {
		padding: 12px;
		border-radius: 12px;
	}

	.related-products-for-affiliate__title {
		font-size: 0.95rem;
	}
}

@media (max-width: 479px) {
	.related-products-for-affiliate__grid--cols-2,
	.related-products-for-affiliate__grid--cols-3,
	.related-products-for-affiliate__grid--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.related-products-for-affiliate__thumb {
		aspect-ratio: 4 / 3;
	}
}

.related-products-for-affiliate__group + .related-products-for-affiliate__group {
	margin-top: 36px;
}

/* PARENT CATEGORY (activate background */
/* background: var(--category-bg); */
.related-products-for-affiliate__parent {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 1.35rem;
	font-weight: 700;
}



.related-products-for-affiliate__parent-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--surface);
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

.related-products-for-affiliate__parent-text {
	display: inline-block;
	letter-spacing: 0.01em;
}

.related-products-for-affiliate__thumb {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	padding: 14px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
}

.related-products-for-affiliate__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 479px) {
	.related-products-for-affiliate__thumb {
		aspect-ratio: 4 / 3;
		padding: 16px;
	}

	.related-products-for-affiliate__thumb img {
		max-width: 88%;
		max-height: 88%;
	}
}

/*
	PROS & CONS
*/

/* Reset list styles */
.contento-section .review-pros,
.contento-section .review-cons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contento-section .review-pros li,
.contento-section .review-cons li {
  list-style: none;
}

/* Force-remove any theme bullets or injected icons */
.contento-section .review-pros li::before,
.contento-section .review-pros li::marker,
.contento-section .review-cons li::before,
.contento-section .review-cons li::marker {
  content: none !important;
  display: none !important;
}

/* Main layout */
.contento-section .review-pros-cons {
  display: flex;
  flex-direction: column;
  align-items: center; /* center entire block */
}

/* Groups (pros & cons) */
.contento-section .review-pros,
.contento-section .review-cons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center badges */
  gap: 10px;
  max-width: 720px; /* keeps layout tight and readable */
  width: 100%;
}

/* Equal spacing around separator */
.contento-section .review-pros {
  padding: 16px 0 24px; /* top / bottom (above separator) */
}

.contento-section .review-cons {
  border-top: 1px solid var(--border);
  padding: 24px 0 16px; /* below separator */
}

/* Badge base */
.contento-section .review-pro-item,
.contento-section .review-con-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap; /* prevents awkward wrapping */
}

/* Pros */
.contento-section .review-pro-item {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  color: var(--success);
}

/* Cons */
.contento-section .review-con-item {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  color: var(--danger);
}

/* Highlight (most relevant) */
.contento-section .most-relevant {
  border-color: currentColor;
  font-weight: 500;
}

/*
	REVIEW BODY TYPOGRAPHY

	Overrides pokatheme's own .wysiwyg-part h2/p rules (bundle.css), which
	read too tight and too visually "loud" for a long, section-heavy
	AI-generated review: h2's margin is symmetric top/bottom (--h1-margin,
	25px each), and since adjacent vertical margins collapse to whichever
	is larger rather than summing, h2's bottom margin (25px) and the
	following <p>'s top margin (20px) collapse down to just 25px — not
	much clearer than the gap between two ordinary paragraphs. h2's own
	bottom margin is bumped past the paragraph's 20px top margin here so
	the collapsed gap actually grows instead of staying flat, and given
	more room above too, so each new section reads as a real break, not
	just a bold line dropped into the same paragraph flow (2026-08-23:
	both margins dialed back a step from a first pass that read as too
	much whitespace). Body text color is a 25/75 blend of full-bright
	--color-text and the more muted --color-neutral-300 — plain
	--color-neutral-300 read as too dull, and a 50/50 blend still read as
	slightly too bright, so this sits at the midpoint between those two
	attempts.
*/
.review-style-3 .wysiwyg-part h2 {
  margin: 40px 0 24px;
}
.review-style-3 .wysiwyg-part h2:first-of-type {
  margin-top: 0;
}
.review-style-3 .wysiwyg-part p {
  color: color-mix(in srgb, var(--color-text) 25%, var(--color-neutral-300) 75%);
}