/*
Theme Name: CursosHot Editorial
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cursoshot-editorial
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* SEO editorial: breadcrumbs and useful introductions on genre pages. */
.hm-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1rem;
	color: #888;
	font-size: 0.82rem;
}

.hm-breadcrumbs a {
	color: #b7b7b7;
	text-decoration: none;
}

.hm-breadcrumbs a:hover,
.hm-breadcrumbs a:focus-visible {
	color: #ff5a2f;
	text-decoration: underline;
}

.hm-taxonomy-intro {
	max-width: 860px;
	margin: 0.55rem 0 1.4rem;
	color: #c7c7c7;
	font-size: 0.98rem;
	line-height: 1.7;
}

.hm-taxonomy-intro p {
	margin: 0;
}

:root {
	--paper: var( --wp--preset--color--paper );
	--paper-deep: var( --wp--preset--color--paper-deep );
	--ink: var( --wp--preset--color--ink );
	--ink-soft: var( --wp--preset--color--ink-soft );
	--cinnabar: var( --wp--preset--color--cinnabar );
	--plum: var( --wp--preset--color--plum );
	--blush: var( --wp--preset--color--blush );
	--rule: 1px solid color-mix( in srgb, var( --ink ) 18%, transparent );
	--section-y: clamp( 4rem, 9vw, 8.5rem );
	/* Brighter than the cinnabar palette entry; kept because it is the colour the
	   age ribbon actually renders with today. */
	--agebar-red: #ff4b2b;
}

/* === base === */
/* Core's constrained-layout rules center children with `margin-left/right:
   auto !important`, so any narrower max-width element would drift to the middle.
   These sections are deliberately left-aligned, which means matching that
   !important is the only way to opt out of the centering. */
.hero .eyebrow,
.hero .hero__title,
.hero .hero__lede,
.section .eyebrow,
.section .lede,
.section .section__head,
.section .section__title,
.section .faq,
.section--plum .eyebrow,
.section--plum .section__title {
	margin-inline: 0 !important;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	text-wrap: balance;
}

.wp-element-button {
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.wp-element-button:hover {
	transform: translateY( -2px );
}

.eyebrow {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cinnabar );
	margin-bottom: 0.5rem;
	margin-inline: 0;
}

.lede {
	font-size: clamp( 1.0625rem, 1.4vw, 1.3rem );
	line-height: 1.6;
	color: var( --ink-soft );
	max-width: 46ch;
	margin-inline: 0;
}
/* === header === */
.site-head {
	position: relative;
	z-index: 20;
}

/* Age ribbon. Consolidated from three mu-plugins: cursoshot-agebar (base pill +
   decorative dot), agebar-texto-rojo-FINAL (recoloured it red and forced 14px at
   a higher specificity, which silently killed the base file's 9px/10px mobile
   rules) and agebar-quitar-punto-FINAL (deleted the dot the base file added).
   Only the state that actually renders is kept, on the theme's own class rather
   than the fragile `header p:first-of-type` those files targeted. */
.site-head__ribbon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto;
	padding: 8px 18px 10px;
	color: var( --agebar-red );
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	white-space: nowrap;
}

.site-head__ribbon::before {
	content: "+18";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	background: linear-gradient( 135deg, #ff4b26, #df2d19 );
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.05em;
	box-shadow: 0 5px 14px rgba( 239, 67, 31, 0.18 );
	flex-shrink: 0;
}

@media ( max-width: 650px ) {
	.site-head__ribbon {
		white-space: normal;
		padding: 7px 14px 9px;
		text-align: center;
	}

	.site-head__ribbon::before {
		min-width: 32px;
		height: 21px;
		padding: 0 7px;
		font-size: 10px;
	}
}

.site-head__bar {
	padding-block: 1.1rem;
	gap: 1.5rem;
}

.site-head__logo a,
.site-head__logo {
	color: var( --paper );
	text-decoration: none;
}

.site-head__actions {
	gap: 1.75rem;
	align-items: center;
}

.site-head__nav a {
	color: color-mix( in srgb, var( --paper ) 82%, transparent );
	text-decoration: none;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}

.site-head__nav a:hover {
	color: var( --cinnabar );
}

.site-head__cart .wc-block-mini-cart__button {
	color: var( --paper );
	padding: 0;
}

.site-head__cta .wp-element-button {
	padding: 0.8rem 1.5rem;
	font-size: 0.72rem;
}

.site-head__cta .wp-element-button:hover {
	background-color: var( --paper );
	color: var( --ink );
}
/* === hero === */
.hero {
	position: relative;
	background-color: var( --ink );
	color: var( --paper );
	padding-block: clamp( 3.5rem, 7vw, 7rem ) clamp( 3rem, 6vw, 6rem );
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 46vw;
	height: 46vw;
	border-radius: 50%;
	background: radial-gradient( circle, color-mix( in srgb, var( --cinnabar ) 55%, transparent ) 0%, transparent 68% );
	pointer-events: none;
}

.hero > * {
	position: relative;
	z-index: 2;
}

.hero__title {
	font-size: clamp( 2.75rem, 8.5vw, 7.5rem );
	line-height: 0.93;
	letter-spacing: -0.04em;
	margin: 0 0 1.5rem;
	margin-inline: 0;
	max-width: 16ch;
}

.hero__title em {
	font-style: italic;
	color: var( --blush );
}

.hero__lede {
	color: color-mix( in srgb, var( --paper ) 78%, transparent );
	font-size: clamp( 1.0625rem, 1.5vw, 1.35rem );
	line-height: 1.6;
	max-width: 48ch;
	margin-bottom: 2.25rem;
	margin-inline: 0;
}

.hero__meta {
	gap: 2.5rem;
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid color-mix( in srgb, var( --paper ) 16%, transparent );
}

.hero__stat .wp-block-heading {
	font-size: clamp( 2rem, 3.4vw, 3.1rem );
	color: var( --cinnabar );
	margin: 0 0 0.25rem;
	line-height: 1;
}

.hero__stat p {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --paper ) 62%, transparent );
}
/* === marquee === */
/* Consolidated from three mu-plugins that fought each other with !important:
   marquee-premium (34s + pause on hover), marquee-always-running (undid the
   pause) and marquee-speed (forced 22s). The surviving behaviour is encoded
   directly here: 22s, never pauses, emoji items built by the footer script. */
.marquee {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0;
	background: linear-gradient( 90deg, #210c13 0%, #4a1025 50%, #210c13 100% );
	border-block: 1px solid rgba( 239, 67, 31, 0.75 );
	-webkit-mask-image: linear-gradient( to right, transparent 0%, #000 7%, #000 93%, transparent 100% );
	mask-image: linear-gradient( to right, transparent 0%, #000 7%, #000 93%, transparent 100% );
}

.marquee p {
	margin: 0;
	padding: 0;
	width: max-content;
	max-width: none;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: #f7eee8;
	font-family: var( --wp--preset--font-family--display );
	font-size: 16px;
	line-height: 56px;
	font-weight: 600;
	letter-spacing: 0.015em;
	pointer-events: none;
	animation: marquee-slide 22s linear infinite;
	will-change: transform;
}

.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-right: 1.8rem;
}

.marquee__emoji {
	font-size: 18px;
	line-height: 1;
	display: inline-block;
	transform: translateY( 1px );
}

.marquee__sep {
	color: rgba( 255, 255, 255, 0.45 );
	margin-left: 1.8rem;
	margin-right: 0.2rem;
}

@keyframes marquee-slide {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

@media ( max-width: 700px ) {
	.marquee {
		min-height: 48px;
	}

	.marquee p {
		font-size: 13px;
		line-height: 48px;
	}

	.marquee__item {
		margin-right: 1.1rem;
	}

	.marquee__emoji {
		font-size: 15px;
	}

	.marquee__sep {
		margin-left: 1.1rem;
	}
}
/* === sections === */
.section {
	padding-block: var( --section-y );
}

.section--paper-deep {
	background-color: var( --paper-deep );
}

.section--plum {
	background-color: var( --plum );
	color: var( --paper );
}

.section--plum .lede,
.section--plum p {
	color: color-mix( in srgb, var( --paper ) 76%, transparent );
}

.section__head {
	max-width: 60ch;
	margin-inline: 0;
	margin-bottom: clamp( 2.5rem, 4vw, 4rem );
}

.section__title {
	margin: 0 0 1rem;
}

.pillars {
	gap: clamp( 1.5rem, 3vw, 3rem );
}

.pillar {
	padding-top: 1.5rem;
	border-top: 3px solid var( --ink );
}

.pillar__num {
	font-family: var( --wp--preset--font-family--display );
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var( --cinnabar );
	margin: 0 0 0.75rem;
}

.pillar .wp-block-heading {
	font-size: 1.3rem;
	margin: 0 0 0.6rem;
}

.pillar p:last-child {
	margin: 0;
	color: var( --ink-soft );
	font-size: 0.97rem;
}

.quote-block {
	border-left: 4px solid var( --cinnabar );
	padding-left: clamp( 1.25rem, 3vw, 2.5rem );
}

.quote-block p {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.4rem, 3vw, 2.35rem );
	font-style: italic;
	line-height: 1.22;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.quote-block cite {
	font-style: normal;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-soft );
}
/* === courses === */
.courses .wc-block-product-template,
.courses .wp-block-post-template {
	gap: clamp( 1.5rem, 2.5vw, 2.5rem ) !important;
}

.courses li.wc-block-product {
	background-color: var( --paper );
	border: 2px solid var( --ink );
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.courses li.wc-block-product:hover {
	transform: translateY( -6px );
	box-shadow: 10px 10px 0 var( --cinnabar );
}

.courses li.wc-block-product .wp-block-post-title {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.28rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0.35rem 0 0.6rem;
}

.courses li.wc-block-product .wp-block-post-title a {
	text-decoration: none;
	color: var( --ink );
}

.courses li.wc-block-product .wp-block-post-excerpt__excerpt {
	font-size: 0.93rem;
	line-height: 1.55;
	color: var( --ink-soft );
}

.courses li.wc-block-product .wc-block-components-product-price {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.5rem;
	font-weight: 700;
	color: var( --ink );
	margin-top: auto;
	padding-top: 0.75rem;
}

.courses li.wc-block-product .wc-block-components-product-price del {
	font-size: 0.95rem;
	color: var( --ink-soft );
	opacity: 0.7;
}

.courses li.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
	color: var( --cinnabar );
}

.courses li.wc-block-product .wp-block-button__link,
.courses li.wc-block-product .wc-block-components-product-button a {
	width: 100%;
	text-align: center;
	margin-top: 1rem;
}

.courses li.wc-block-product img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
/* === pricing === */
.plans {
	gap: clamp( 1.5rem, 2.5vw, 2.25rem );
	align-items: stretch;
}

.plan {
	background-color: var( --paper );
	color: var( --ink );
	border: 2px solid var( --ink );
	padding: clamp( 1.75rem, 3vw, 2.5rem );
	display: flex;
	flex-direction: column;
}

.plan--featured {
	background-color: var( --ink );
	color: var( --paper );
	border-color: var( --cinnabar );
	box-shadow: 12px 12px 0 var( --cinnabar );
}

.plan__tag {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --cinnabar );
	margin: 0 0 0.75rem;
}

.plan__name {
	font-size: 1.6rem;
	margin: 0 0 0.5rem;
}

.plan__price {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.6rem, 5vw, 3.9rem );
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0.75rem 0 0.35rem;
}

.plan__period {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ink-soft );
	margin: 0 0 1.5rem;
}

.plan--featured .plan__period {
	color: color-mix( in srgb, var( --paper ) 60%, transparent );
}

.plan__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.plan__list li {
	padding: 0.6rem 0 0.6rem 1.6rem;
	position: relative;
	border-top: var( --rule );
}

.plan--featured .plan__list li {
	border-top-color: color-mix( in srgb, var( --paper ) 20%, transparent );
}

.plan__list li::before {
	content: "\2192";
	position: absolute;
	left: 0;
	color: var( --cinnabar );
	font-weight: 700;
}

.plan .wp-block-buttons {
	margin-top: auto;
}

.plan .wp-element-button {
	width: 100%;
	text-align: center;
}

.plan--featured .wp-element-button {
	background-color: var( --cinnabar );
	color: var( --paper );
}
/* === faq === */
.faq {
	max-width: 820px;
	margin-inline: 0;
}

.faq .wp-block-details {
	border-top: 2px solid var( --ink );
	padding: 1.35rem 0;
}

.faq .wp-block-details:last-of-type {
	border-bottom: 2px solid var( --ink );
}

.faq .wp-block-details summary {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.05rem, 1.9vw, 1.35rem );
	font-weight: 700;
	letter-spacing: -0.015em;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	align-items: baseline;
}

.faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.faq .wp-block-details summary::after {
	content: "+";
	color: var( --cinnabar );
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.faq .wp-block-details[open] summary::after {
	transform: rotate( 45deg );
}

.faq .wp-block-details p {
	color: var( --ink-soft );
	margin: 1rem 0 0;
	max-width: 62ch;
	font-size: 0.98rem;
}
/* === cta === */
.cta {
	background-color: var( --ink );
	color: var( --paper );
	padding-block: clamp( 4rem, 8vw, 7.5rem );
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta::after {
	content: "";
	position: absolute;
	bottom: -45%;
	left: 50%;
	transform: translateX( -50% );
	width: 70vw;
	height: 55vw;
	border-radius: 50%;
	background: radial-gradient( circle, color-mix( in srgb, var( --plum ) 85%, transparent ) 0%, transparent 65% );
	pointer-events: none;
}

.cta > * {
	position: relative;
	z-index: 2;
}

.cta__title {
	font-size: clamp( 2.2rem, 6vw, 4.6rem );
	line-height: 0.98;
	margin: 0 auto 1.25rem;
	max-width: 22ch;
}

.cta__title em {
	font-style: italic;
	color: var( --blush );
}

.cta p {
	color: color-mix( in srgb, var( --paper ) 74%, transparent );
	max-width: 50ch;
	margin: 0 auto 2.25rem;
}

.cta .wp-block-buttons {
	justify-content: center;
}

.cta .wp-element-button {
	background-color: var( --cinnabar );
	color: var( --paper );
}

.cta .wp-element-button:hover {
	background-color: var( --paper );
	color: var( --ink );
}
/* === footer === */
.site-foot {
	padding-block: clamp( 3.5rem, 6vw, 5.5rem ) 2rem;
}

.site-foot__top {
	gap: clamp( 2rem, 5vw, 4rem );
}

.site-foot__wordmark {
	margin: 0 0 1rem;
	font-style: italic;
	max-width: 24ch;
}

.site-foot__note {
	color: color-mix( in srgb, var( --paper ) 66%, transparent );
	max-width: 42ch;
	margin: 0;
}

.site-foot__label {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --blush );
	margin: 0 0 1.1rem;
}

.site-foot__list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.93rem;
	line-height: 2.1;
}

.site-foot__list a {
	color: color-mix( in srgb, var( --paper ) 80%, transparent );
	text-decoration: none;
}

.site-foot__list a:hover {
	color: var( --paper );
	text-decoration: underline;
}

.site-foot__legal {
	margin-top: clamp( 2.5rem, 5vw, 4rem );
	padding-top: 1.5rem;
	border-top: 1px solid color-mix( in srgb, var( --paper ) 18%, transparent );
	gap: 1rem;
}

.site-foot__legal p {
	margin: 0;
	color: color-mix( in srgb, var( --paper ) 55%, transparent );
	font-size: 0.8rem;
}

.site-foot__legal-nav {
	display: grid;
	gap: 0.65rem;
}

.site-foot__legal-title {
	color: var( --blush ) !important;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.72rem !important;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.site-foot__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.site-foot__legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.35rem;
	padding: 0.5rem 0.72rem;
	border: 1px solid color-mix( in srgb, var( --paper ) 50%, transparent );
	border-radius: 999px;
	background: color-mix( in srgb, var( --ink ) 25%, transparent );
	color: var( --paper ) !important;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.site-foot__legal-links a:hover,
.site-foot__legal-links a:focus-visible {
	border-color: var( --paper );
	background: var( --paper );
	color: var( --ink ) !important;
	outline: none;
}
/* === woocommerce === */
/* The block-based Shop/archive renders .wc-block-product list items, not the
   classic ul.products markup, so the card treatment is defined here and reused
   by the .courses sections on the front page. */
.wc-block-product-template {
	grid-auto-rows: 1fr;
}

.woocommerce ul.wc-block-product-template li.wc-block-product,
li.wc-block-product {
	display: flex;
	flex-direction: column;
	background-color: var( --paper );
	border: 2px solid var( --ink );
	padding: 1.35rem;
	text-align: left;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

li.wc-block-product:hover {
	transform: translateY( -6px );
	box-shadow: 10px 10px 0 var( --cinnabar );
}

li.wc-block-product .wc-block-components-product-image {
	margin-bottom: 1rem;
}

/* The related-products collection ships as `.is-flex-container.columns-5`, whose
   own `width: calc(...)` rule on each item collapses the card to ~45px once the
   list is laid out as a grid. Reset the item width so the grid controls sizing. */
.single-product .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 1.75rem;
}

.single-product .wc-block-product-template.is-flex-container > li.wc-block-product {
	width: auto;
	max-width: none;
	flex: initial;
	margin: 0;
}

li.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

li.wc-block-product .wp-block-post-title {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.24rem;
	line-height: 1.16;
	letter-spacing: -0.02em;
	margin: 0 0 0.55rem;
	text-align: left;
}

li.wc-block-product .wp-block-post-title a {
	text-decoration: none;
	color: var( --ink );
}

li.wc-block-product .wp-block-post-title a:hover {
	color: var( --cinnabar );
}

li.wc-block-product .wp-block-post-excerpt {
	margin: 0 0 0.85rem;
}

li.wc-block-product .wp-block-post-excerpt__excerpt {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var( --ink-soft );
}

li.wc-block-product .wc-block-components-product-price {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.45rem;
	font-weight: 700;
	color: var( --ink );
	margin-top: auto;
	padding-top: 0.5rem;
	display: block;
}

li.wc-block-product .wc-block-components-product-price del {
	font-size: 0.92rem;
	font-weight: 400;
	color: var( --ink-soft );
	opacity: 0.75;
	margin-right: 0.35rem;
}

li.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
	color: var( --cinnabar );
}

li.wc-block-product .wp-block-button {
	margin-top: 0.9rem;
	width: 100%;
}

li.wc-block-product .wp-block-button .wp-element-button {
	width: 100%;
	text-align: center;
	font-size: 0.7rem;
	padding: 0.85rem 1.2rem;
}

.wc-block-components-product-sale-badge {
	background-color: var( --cinnabar );
	color: var( --paper );
	border: none;
	border-radius: 999px;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.4rem 0.85rem;
}

.woocommerce-account .woocommerce h2,
.woocommerce-account .wp-block-post-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	font-family: var( --wp--preset--font-family--display );
	letter-spacing: -0.03em;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
	border: 2px solid var( --ink );
	border-radius: 0;
	background-color: var( --paper );
	padding: clamp( 1.5rem, 3vw, 2.25rem );
}

.woocommerce form .form-row label,
.woocommerce-cart .wc-block-components-totals-item__label {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink );
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .wc-block-components-text-input input {
	border: 2px solid var( --ink );
	border-radius: 0;
	background-color: var( --paper );
	padding: 0.85rem 1rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	color: var( --ink );
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var( --cinnabar );
	box-shadow: 4px 4px 0 var( --cinnabar );
}

.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.woocommerce-account nav.woocommerce-MyAccount-navigation li {
	border-top: var( --rule );
}

.woocommerce-account nav.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.85rem 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --ink-soft );
}

.woocommerce-account nav.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account nav.woocommerce-MyAccount-navigation li a:hover {
	color: var( --cinnabar );
}

.woocommerce-breadcrumb {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ink-soft );
}

.woocommerce-result-count,
.woocommerce-ordering select {
	font-size: 0.85rem;
	color: var( --ink-soft );
}

.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	border: 2px solid var( --ink );
	border-radius: 0;
	background-color: var( --paper );
	padding: 0.5rem 0.75rem;
	font-family: var( --wp--preset--font-family--body );
}

.woocommerce div.product .product_title {
	font-size: clamp( 2.1rem, 4.5vw, 3.4rem );
	line-height: 1;
	margin-bottom: 0.75rem;
}

.woocommerce div.product p.price {
	font-size: clamp( 1.6rem, 3vw, 2.1rem );
	margin-bottom: 1.25rem;
}

.woocommerce div.product p.price del {
	font-weight: 400;
	color: var( --ink-soft );
	opacity: 0.7;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var( --ink-soft );
	max-width: 46ch;
}

.woocommerce div.product .product_meta,
.wc-block-components-product-metadata,
.taxonomy-product_cat.wp-block-post-terms {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ink-soft );
	border-top: var( --rule );
	padding-top: 1.1rem;
	margin-top: 1.75rem;
}

.taxonomy-product_cat.wp-block-post-terms a {
	color: var( --ink );
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.taxonomy-product_cat.wp-block-post-terms a:hover {
	color: var( --cinnabar );
}

.wc-block-components-product-details__name {
	font-weight: 600;
	color: var( --ink );
}

.woocommerce div.product form.cart div.quantity input.qty {
	border: 2px solid var( --ink );
	background-color: var( --paper );
	padding: 0.85rem 0.5rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 2rem;
	border-bottom: 2px solid var( --ink );
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0 1.5rem 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ink-soft );
	text-decoration: none;
	padding: 0.6rem 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --ink );
	box-shadow: inset 0 -3px 0 var( --cinnabar );
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	font-size: clamp( 1.4rem, 2.6vw, 1.9rem );
	margin-bottom: 1rem;
}

/* Related products render as a bare product-collection whose heading lives in
   the single-product template, so it is targeted via the body class rather than
   a wrapper of its own. */
.single-product h2.wp-block-heading,
.woocommerce .related > h2:first-child,
.woocommerce .upsells > h2:first-child {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.5rem, 3vw, 2.1rem );
	letter-spacing: -0.02em;
	margin-bottom: 1.75rem;
	padding-top: 2.5rem;
	border-top: var( --rule );
}

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1.75rem;
	margin: 0;
}

.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.woocommerce .related ul.products li.product a img,
.woocommerce .upsells ul.products li.product a img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 0.9rem;
}

.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.1rem;
	line-height: 1.2;
	padding: 0;
}

.woocommerce .related ul.products li.product .price,
.woocommerce .upsells ul.products li.product .price {
	margin-top: auto;
}
.woocommerce-page .wp-block-post-title,
.woocommerce ul.products li.product h2,
.woocommerce div.product .product_title {
	font-family: var( --wp--preset--font-family--display );
	letter-spacing: -0.025em;
}

.woocommerce ul.products li.product {
	border: 2px solid var( --ink );
	padding: 1.25rem;
	background-color: var( --paper );
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY( -6px );
	box-shadow: 10px 10px 0 var( --cinnabar );
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	color: var( --ink );
}

.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var( --cinnabar );
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var( --ink );
	color: var( --paper );
	border-radius: 999px;
	padding: 0.9rem 1.9rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var( --cinnabar );
	color: var( --paper );
}

.woocommerce span.onsale {
	background-color: var( --cinnabar );
	color: var( --paper );
	font-family: var( --wp--preset--font-family--body );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.7rem;
	min-height: 0;
	min-width: 0;
	padding: 0.45rem 0.9rem;
	line-height: 1;
	border-radius: 999px;
}
/* === forms === */
.wp-block-jetpack-contact-form .grunion-field-wrap {
	margin-bottom: 1.35rem;
}

.wp-block-jetpack-contact-form label,
.wp-block-jetpack-contact-form .grunion-field-label {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink );
	margin-bottom: 0.5rem;
}

.wp-block-jetpack-contact-form .grunion-field-label span {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var( --cinnabar );
	font-weight: 500;
}

.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea {
	width: 100%;
	background-color: var( --paper );
	border: 2px solid var( --ink );
	border-radius: 0;
	padding: 0.9rem 1rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: 1rem;
	color: var( --ink );
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-jetpack-contact-form input[type="text"]:focus,
.wp-block-jetpack-contact-form input[type="email"]:focus,
.wp-block-jetpack-contact-form select:focus,
.wp-block-jetpack-contact-form textarea:focus {
	outline: none;
	border-color: var( --cinnabar );
	box-shadow: 4px 4px 0 var( --cinnabar );
}

.wp-block-jetpack-contact-form textarea {
	min-height: 11rem;
	resize: vertical;
}

.wp-block-jetpack-contact-form .grunion-field-consent-wrap label {
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var( --ink-soft );
	line-height: 1.5;
}

.wp-block-jetpack-contact-form .wp-block-button {
	margin-top: 0.5rem;
}

/* === catalogo pagina cursos === */
/* Consolidated from two mu-plugins that both drew this grid: cursos-4-columnas
   (registered at wp_head priority 1000000, and carrying a `1fq` typo that killed
   its own mobile rule) and cursos-4-fix-final (priority 100000000, which won and
   supplied the correct `1fr`). Only the winning ruleset survives here, scoped to
   the two catalogue views that use it: the Cursos page and the Shop archive
   (templates/archive-product.html), which mirrors the same design. The
   !important flags are kept because they override WooCommerce's own
   `.columns-N` grid. */
:is( .page-id-26, .woocommerce-shop ) .wp-block-woocommerce-product-collection {
	width: min( 1360px, calc( 100% - 48px ) );
	max-width: 1360px;
	margin: 34px auto 0;
	padding-inline: 0;
	box-sizing: border-box;
	overflow: visible;
}

:is( .page-id-26, .woocommerce-shop ) .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
	gap: 22px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transform: none;
	animation: none;
}

:is( .page-id-26, .woocommerce-shop ) .wc-block-product-template > * {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	flex: none;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 18px;
}

:is( .page-id-26, .woocommerce-shop ) .wc-block-components-product-image {
	width: 100%;
	margin: 0;
	overflow: hidden;
}

:is( .page-id-26, .woocommerce-shop ) .wc-block-product-template img:not( .emoji ) {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
}

@media ( max-width: 1050px ) {
	:is( .page-id-26, .woocommerce-shop ) .wc-block-product-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 620px ) {
	:is( .page-id-26, .woocommerce-shop ) .wp-block-woocommerce-product-collection {
		width: calc( 100% - 28px );
	}

	:is( .page-id-26, .woocommerce-shop ) .wc-block-product-template {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}

	:is( .page-id-26, .woocommerce-shop ) .wc-block-product-template img:not( .emoji ) {
		height: 235px;
	}
}

/* === responsive === */
@media ( max-width: 781px ) {
	.site-head__bar {
		gap: 0.75rem;
	}

	.site-head__actions {
		gap: 0.9rem;
	}

	.hero__meta {
		gap: 1.5rem 2rem;
	}

	.hero::before {
		width: 90vw;
		height: 90vw;
		top: -18%;
	}

	.plan--featured {
		box-shadow: 7px 7px 0 var( --cinnabar );
	}

	.courses li.wc-block-product:hover,
	.woocommerce ul.products li.product:hover {
		transform: none;
		box-shadow: 6px 6px 0 var( --cinnabar );
	}

	.site-foot__legal {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-foot__legal-links a {
		min-height: 2.55rem;
		padding-inline: 0.82rem;
	}
}

@media ( max-width: 599px ) {
	.hero__title {
		letter-spacing: -0.03em;
	}

	.site-head__ribbon {
		font-size: 0.62rem;
		letter-spacing: 0.12em;
	}
}
/* === motion === */
.reveal-ready .reveal {
	opacity: 0;
	transform: translateY( 22px );
}

.reveal-ready .reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.marquee p {
		animation: none;
		white-space: normal;
		text-align: center;
		max-width: 68ch;
		margin-inline: auto;
	}

	.reveal-ready .reveal,
	.reveal-ready .reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.wp-element-button,
	.courses li.wc-block-product,
	.woocommerce ul.products li.product {
		transition: none;
	}

	.wp-element-button:hover,
	.courses li.wc-block-product:hover,
	.woocommerce ul.products li.product:hover {
		transform: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   HM TOP CAROUSEL — infinite horizontal scroll (most-viewed videos)
   ========================================================================== */
.hm-top-carousel {
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 0.5rem 0 1.5rem;
}

.hm-carousel-track {
	display: flex;
	gap: 14px;
	will-change: transform;
	width: max-content;
}

.hm-carousel-slide {
	flex: 0 0 380px;
	min-width: 380px;
}

.hm-carousel-slide-link {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: color-mix( in srgb, var( --ink ) 80%, transparent );
	border-radius: 4px;
}

.hm-carousel-slide-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.hm-carousel-slide:hover .hm-carousel-slide-link img {
	transform: scale(1.05);
}

.hm-carousel-slide-title {
	display: block;
	font-size: 0.95rem;
	line-height: 1.35;
	margin-top: 0.5rem;
	color: var( --ink );
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-weight: 600;
}

.hm-carousel-slide-title:hover {
	color: var( --cinnabar );
}

/* Comic carousel overrides */
.hm-comic-carousel .hm-carousel-slide {
	flex: 0 0 200px;
	min-width: 200px;
}

.hm-carousel-slide-link--comic {
	aspect-ratio: 3 / 4 !important;
	border-radius: 8px;
	position: relative;
}

.hm-carousel-badge {
	position: absolute;
	bottom: 6px;
	right: 6px;
	background: rgba(0,0,0,0.75);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	line-height: 1.4;
}

@media (max-width: 768px) {
	.hm-comic-carousel .hm-carousel-slide {
		flex: 0 0 150px;
		min-width: 150px;
	}
}

/* ==========================================================================
   HM VIDEO — Single video page
   Exact structure replica — adapted with site's own color palette
   ========================================================================== */
body.single-hm_video {
	background: var( --ink ) !important;
}

.hm-single-video-page {
	background: var( --ink ) !important;
}

.hm-single-video {
	background: var( --ink );
	color: var( --paper );
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ── Video + sidebar 2-column layout ────────────────────────────────── */
.hm-video-columns {
	gap: 0 !important;
	margin-bottom: 0;
}

.hm-video-columns .wp-block-column {
	margin: 0 !important;
}

.hm-video-player-col {
	min-width: 0;
}

.hm-video-player-col .wp-block-post-content {
	margin: 0;
}

.hm-video-player-col .wp-block-post-content > *:not(.video-container):not(.hm-video-embed) {
	display: none !important;
}

.hm-video-player-col .wp-block-post-content iframe {
	border: none;
}

/* ── Sidebar ads (right of video) ───────────────────────────────────── */
.hm-sidebar-col {
	padding-left: 6px !important;
}

.hm-sidebar-ads {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
}

.hm-ad-sidebar {
	flex: 1;
	background: color-mix( in srgb, var( --paper ) 6%, transparent );
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}

/* ── Title row ──────────────────────────────────────────────────────── */
.hm-video-meta {
	padding: 4px 7px 0;
}

.hm-video-title {
	color: var( --paper ) !important;
	word-break: break-word;
}

.hm-video-channel-meta {
	gap: 0.5rem !important;
	margin-bottom: 0;
	align-items: center !important;
}

.hm-video-channel .wp-block-post-terms__separator {
	display: none;
}

.hm-video-channel a {
	display: inline-block;
	padding: 2px 6px;
	background: var( --cinnabar );
	color: #fff !important;
	border-radius: 0;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
}

.hm-video-channel a:hover {
	opacity: 0.85;
}

.hm-video-duration {
	color: color-mix( in srgb, var( --paper ) 60%, transparent ) !important;
	font-size: 15px !important;
}

/* ── Action bar (includes inline tags) ─────────────────────────────── */
.hm-action-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: transparent;
	margin: 0 0 7px;
}

.hm-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	height: 31px;
	border: none;
	border-radius: 0;
	background: var( --cinnabar );
	cursor: pointer;
	margin: 0 7px 7px 0;
	box-sizing: border-box;
	transition: opacity 0.15s;
}

.hm-action-btn:hover {
	opacity: 0.85;
}

.hm-action-btn .hm-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.hm-action-pct {
	cursor: default;
	background: transparent;
	padding: 7px 3.5px;
}

.hm-action-pct .hm-icon {
	color: #ffd700;
}

.hm-vote-btn {
	font-family: inherit;
}

.hm-vote-active {
	background: color-mix( in srgb, var( --cinnabar ) 70%, #fff );
	box-shadow: inset 0 0 0 2px #fff;
}

/* ── Inline tags (inside action bar) ──────────────────────────────── */
.hm-tags-inline {
	display: inline;
	font-size: 12px;
	color: var( --paper );
	line-height: 31px;
	vertical-align: middle;
}

.hm-tags-inline em {
	font-style: italic;
}

.hm-tags-inline u {
	text-decoration: underline;
}

.hm-tag-pill {
	display: inline-block;
	padding: 2px 4px;
	margin: 2px 4px 2px 0;
	background: var( --cinnabar );
	color: #fff !important;
	border-radius: 0;
	text-decoration: none;
	font-size: 12px;
	font-weight: 400;
	transition: opacity 0.15s;
}

.hm-tag-pill:hover {
	opacity: 0.8;
}

/* ── Comments section ───────────────────────────────────────────────── */
.hm-comments {
	display: none;
	border-top: 1px solid color-mix( in srgb, var( --paper ) 10%, transparent );
	padding: 7px 0 10px;
	margin-top: 4px;
}

.hm-comments-heading {
	color: var( --paper );
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 7px;
}

.hm-comment-form-wrap textarea {
	width: 100%;
	background: color-mix( in srgb, var( --paper ) 8%, transparent );
	border: 1px solid color-mix( in srgb, var( --paper ) 18%, transparent );
	border-radius: 0;
	color: var( --paper );
	padding: 7px;
	font-size: 12px;
	resize: vertical;
	font-family: inherit;
}

.hm-comment-form-wrap input[type="text"],
.hm-comment-form-wrap input[type="email"] {
	width: calc( 50% - 4px );
	background: color-mix( in srgb, var( --paper ) 8%, transparent );
	border: 1px solid color-mix( in srgb, var( --paper ) 18%, transparent );
	border-radius: 0;
	color: var( --paper );
	padding: 5px 7px;
	font-size: 12px;
	margin-top: 4px;
	font-family: inherit;
}

.hm-comment-form-wrap .form-submit input[type="submit"] {
	background: var( --cinnabar );
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 7px;
	font-family: inherit;
}

.hm-comment-form-wrap .form-submit input[type="submit"]:hover {
	opacity: 0.85;
}

.hm-comment-list {
	margin-top: 7px;
}

.hm-comment {
	padding: 7px 0;
	border-bottom: 1px solid color-mix( in srgb, var( --paper ) 8%, transparent );
}

.hm-comment-author {
	font-weight: 700;
	font-size: 12px;
	color: var( --cinnabar );
	margin-right: 7px;
}

.hm-comment-date {
	font-size: 11px;
	color: color-mix( in srgb, var( --paper ) 45%, transparent );
}

.hm-comment-text {
	font-size: 12px;
	color: color-mix( in srgb, var( --paper ) 85%, transparent );
	margin-top: 2px;
	line-height: 1.45;
}

.hm-comment-text p {
	margin: 0;
}

/* ── Ad slots ───────────────────────────────────────────────────────── */
.hm-ad-slot {
	min-height: 90px;
	margin: 7px 0;
	background: color-mix( in srgb, var( --paper ) 4%, transparent );
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hm-ad-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: color-mix( in srgb, var( --paper ) 18%, transparent );
}

/* ── Related videos section ─────────────────────────────────────────── */
.hm-related-section {
	background: var( --ink );
}

.hm-related-heading {
	color: var( --paper ) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

.hm-related-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 7px;
}

.hm-related-card {
	overflow: hidden;
}

.hm-related-card .hm-related-thumb {
	display: block;
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.hm-related-card .hm-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.2s;
}

.hm-related-card:hover .hm-related-thumb img {
	opacity: 0.85;
}

.hm-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: color-mix( in srgb, var( --paper ) 8%, transparent );
}

.hm-related-channel {
	display: none;
}

.hm-related-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	color: var( --paper );
	text-decoration: none;
	margin-top: 4px;
	font-weight: 700;
}

.hm-related-title:hover {
	color: var( --cinnabar );
}

.hm-related-date {
	display: block;
	font-size: 13px;
	color: var( --cinnabar );
	margin-top: 0;
}

/* ── "Show more" button ─────────────────────────────────────────────── */
.hm-show-more-wrap {
	text-align: center;
	margin: 10px 0 5px;
}

.hm-show-more-btn {
	display: block;
	width: 100%;
	padding: 5px 12px;
	border: none;
	border-radius: 0;
	color: var( --paper );
	background: transparent;
	text-decoration: none;
	font-size: 12px;
	font-weight: 400;
	cursor: pointer;
	font-family: inherit;
	transition: color 0.15s;
}

.hm-show-more-btn:hover {
	color: var( --cinnabar );
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.hm-video-columns {
		flex-direction: column !important;
	}
	.hm-video-player-col,
	.hm-sidebar-col {
		flex-basis: 100% !important;
	}
	.hm-sidebar-col {
		padding-left: 0 !important;
	}
	.hm-sidebar-ads {
		flex-direction: row;
		height: auto;
	}
	.hm-ad-sidebar {
		min-height: 100px;
	}
	.hm-related-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.hm-action-btn {
		padding: 5px;
		font-size: 14px;
	}
	.hm-action-btn .hm-icon {
		width: 14px;
		height: 14px;
	}
}

@media ( max-width: 480px ) {
	.hm-related-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   HM VIDEO — Carousel (archive page)
   ========================================================================== */
.hm-carousel .wp-block-post-template {
	display: flex !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 1rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.75rem;
	scrollbar-width: thin;
	scrollbar-color: color-mix( in srgb, var( --ink ) 25%, transparent ) transparent;
}

.hm-carousel .wp-block-post-template::-webkit-scrollbar {
	height: 6px;
}

.hm-carousel .wp-block-post-template::-webkit-scrollbar-track {
	background: transparent;
}

.hm-carousel .wp-block-post-template::-webkit-scrollbar-thumb {
	background: color-mix( in srgb, var( --ink ) 22%, transparent );
	border-radius: 3px;
}

.hm-carousel .wp-block-post {
	flex: 0 0 calc( 25% - 0.75rem );
	min-width: 220px;
	scroll-snap-align: start;
}

.hm-carousel-card {
	overflow: hidden;
}

.hm-carousel-card .wp-block-post-featured-image {
	border-radius: 8px;
	overflow: hidden;
}

.hm-carousel-card .wp-block-post-featured-image img {
	transition: transform 0.3s ease;
}

.hm-carousel-card:hover .wp-block-post-featured-image img {
	transform: scale( 1.05 );
}

.hm-carousel-card .wp-block-post-title a {
	color: var( --ink );
	text-decoration: none;
}

.hm-carousel-card .wp-block-post-title a:hover {
	color: var( --cinnabar );
}

@media ( max-width: 768px ) {
	.hm-carousel .wp-block-post {
		flex: 0 0 calc( 60% - 0.5rem );
		min-width: 180px;
	}
}

@media ( max-width: 480px ) {
	.hm-carousel .wp-block-post {
		flex: 0 0 calc( 80% - 0.5rem );
	}
}

/* === Video grid cards === */
.courses .wp-block-post-featured-image {
	border-radius: 8px;
	overflow: hidden;
}

.courses .wp-block-post-featured-image img {
	transition: transform 0.3s ease;
}

.courses .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale( 1.04 );
}

.courses .wp-block-post-title a {
	color: var( --ink );
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.courses .wp-block-post-title a:hover {
	color: var( --cinnabar );
}

/* ── Video Archive Page ────────────────────────────────────────── */
.hm-video-archive {
	background: var(--wp--preset--color--paper, #f5f1e8);
	min-height: 80vh;
}
.hm-archive-wrap {
	max-width: 1380px;
	margin: 0 auto;
	padding: 28px 16px 60px;
}
.hm-archive-title {
	font-size: 1.6rem;
	font-weight: 800;
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink, #1e1e1e);
}

/* ── Category Grid ────────────────────────────────────────────── */
.hm-cat-grid {
	display: grid;
	grid-template-columns: repeat(var(--hm-cat-cols, 5), 1fr);
	gap: 6px;
	width: 100%;
}
@media (max-width: 1024px) { .hm-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .hm-cat-grid { grid-template-columns: repeat(2, 1fr); } }

.hm-cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 16/10;
	background: #111;
	text-decoration: none;
}
.hm-cat-card img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s, filter 0.3s;
	filter: brightness(0.75);
}
.hm-cat-card:hover img {
	transform: scale(1.06);
	filter: brightness(0.55);
}
.hm-cat-card__placeholder {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.hm-cat-card__info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px 10px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	background: linear-gradient(transparent, rgba(0,0,0,0.75));
	z-index: 2;
}
.hm-cat-card__name {
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	line-height: 1.2;
}
.hm-cat-card__count {
	color: rgba(255,255,255,0.85);
	font-size: 0.72rem;
	font-weight: 600;
	background: rgba(0,0,0,0.5);
	padding: 2px 6px;
	border-radius: 3px;
	flex-shrink: 0;
	margin-left: 6px;
}

/* ── Tags Dropdown ────────────────────────────────────────────── */
.hm-tags-dropdown {
	margin-bottom: 20px;
}
.hm-tags-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--wp--preset--color--ink, #1e1e1e);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.hm-tags-toggle:hover {
	background: var(--wp--preset--color--cinnabar, #e04040);
}
.hm-tags-chevron {
	transition: transform 0.25s;
}
.hm-tags-list {
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	padding: 16px;
	background: var(--wp--preset--color--ink, #1e1e1e);
	border-radius: 8px;
}
.hm-tag-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: rgba(255,255,255,0.08);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.82rem;
	font-weight: 500;
	transition: background 0.2s;
}
.hm-tag-link:hover {
	background: var(--wp--preset--color--cinnabar, #e04040);
	color: #fff;
}
.hm-tag-count {
	font-size: 0.7rem;
	opacity: 0.6;
}
.hm-tag-link--active {
	background: var(--wp--preset--color--cinnabar, #e04040);
}

/* ── Archive Count Badge ─────────────────────────────────────── */
.hm-archive-count {
	font-size: 0.9rem;
	font-weight: 400;
	color: rgba(30,30,30,0.55);
}

/* ── Video Grid (taxonomy pages) ─────────────────────────────── */
.hm-vid-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 6px;
	row-gap: 18px;
	width: 100%;
}
@media (max-width: 1024px) { .hm-vid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .hm-vid-grid { grid-template-columns: repeat(2, 1fr); } }

.hm-vid-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 4px;
	background: #111;
	text-decoration: none;
}
.hm-vid-card img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: transform 0.3s, filter 0.3s;
	filter: brightness(0.85);
}
.hm-vid-card:hover img {
	transform: scale(1.05);
	filter: brightness(0.65);
}
.hm-vid-card__placeholder {
	width: 100%;
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.hm-vid-card__info {
	padding: 8px;
	background: var(--wp--preset--color--paper, #f5f1e8);
	flex: 1;
}
.hm-vid-card__title {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1e1e1e);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}
.hm-vid-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 0.7rem;
	color: rgba(30,30,30,0.55);
	line-height: 1;
}
.hm-vid-meta__dur {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1e1e1e);
}
.hm-vid-meta__qual {
	background: rgba(0,0,0,0.08);
	padding: 2px 5px;
	border-radius: 3px;
	font-weight: 600;
}
.hm-vid-meta__views {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
.hm-vid-meta__views svg {
	opacity: 0.6;
}
.hm-vid-meta__rat {
	margin-left: auto;
}

/* ── Pagination ──────────────────────────────────────────────── */
.hm-pagination {
	margin-top: 28px;
	display: flex;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
}
.hm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1e1e1e);
	background: rgba(0,0,0,0.06);
	transition: background 0.2s, color 0.2s;
}
.hm-pagination .page-numbers:hover {
	background: var(--wp--preset--color--cinnabar, #e04040);
	color: #fff;
}
.hm-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink, #1e1e1e);
	color: #fff;
}
.hm-pagination .page-numbers.dots {
	background: transparent;
}
.hm-no-results {
	text-align: center;
	padding: 60px 20px;
	font-size: 1.1rem;
	color: rgba(30,30,30,0.5);
}