/* Fuentes del mockup auto-hospedadas (LiteSpeed descarta las de Google Fonts) */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/wp-content/themes/woodmart-child/assets/fonts/manrope.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/wp-content/themes/woodmart-child/assets/fonts/jetbrains.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/wp-content/themes/woodmart-child/assets/fonts/cormorant-600.woff2) format('woff2'); }

.prido-compare-template,
.prido-compare-page {
	width: 100%;
}

.prido-hs-tools__compare {
	display: inline-flex !important;
}

.prido-hs-offcanvas__secondary a[href*="comparar"] {
	display: inline-flex !important;
}

.prido-compare-page {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px 24px 72px;
	color: var(--prido-theme-ink, #1a2a3a);
}

.prido-compare-pdf-btn,
.prido-compare-shop-link,
.prido-compare-single-btn,
.prido-compare-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border: 0;
	border-radius: 8px;
	background: var(--prido-secondary, #2dc6c1);
	color: #fff !important;
	padding: 10px 18px;
	font-family: Outfit, Arial, sans-serif;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(45, 198, 193, .22);
	transition: background .2s ease, transform .2s ease;
}

.prido-compare-pdf-btn:hover,
.prido-compare-shop-link:hover,
.prido-compare-single-btn:hover,
.prido-compare-card-btn:hover {
	background: #1aa8a3;
	transform: translateY(-1px);
}

.prido-compare-pdf-btn:disabled,
.prido-compare-pdf-btn.is-loading,
.prido-compare-card-btn.is-loading,
.prido-compare-single-btn.is-loading {
	cursor: wait;
	opacity: .78;
	transform: none;
}

.prido-compare-card-btn.is-added,
.prido-compare-single-btn.is-added {
	background: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 82%, var(--prido-secondary, #2dc6c1) 18%);
	box-shadow: 0 4px 16px rgba(45, 198, 193, .2);
}

.prido-compare-variation-control {
	width: 100% !important;
	max-width: 280px;
}

.prido-compare-print-value {
	display: none;
}

.prido-compare-variation-control select {
	display: block !important;
	margin: 0 !important;
	background-color: var(--prido-theme-surface, rgba(255, 255, 255, 0.6)) !important;
	-webkit-backdrop-filter: blur(25px) saturate(200%) !important;
	backdrop-filter: blur(25px) saturate(200%) !important;
	border: 1px solid var(--prido-theme-border, rgba(0, 0, 0, 0.08)) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
	border-radius: 50px !important;
	color: var(--prido-theme-ink, #1a2a3a) !important;
	font-family: 'Noto Sans', sans-serif !important;
	font-weight: 700 !important;
	outline: none !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 40px !important;
	line-height: 40px !important;
	padding: 0 38px 0 17px !important;
	font-size: 13px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231a2a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 5 6 8 9 5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px !important;
}

.prido-compare-variation-control select:hover,
.prido-compare-variation-control select:focus {
	border-color: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 52%, var(--prido-theme-border-strong, #bcc9d4) 48%) !important;
	background-color: var(--prido-theme-surface-strong, #fff) !important;
	box-shadow: 0 4px 18px rgba(45, 198, 193, .12) !important;
}

body.page-template-compare-products .prido-fs,
body.page-id-comparar-productos .prido-fs,
body.page-slug-comparar-productos .prido-fs {
	margin-top: 0;
}

body.page-template-compare-products .prido-fs-prefooter,
body.page-template-compare-products .prido-fs-main,
body.page-id-comparar-productos .prido-fs-prefooter,
body.page-id-comparar-productos .prido-fs-main,
body.page-slug-comparar-productos .prido-fs-prefooter,
body.page-slug-comparar-productos .prido-fs-main {
	display: none !important;
}

/* ============================================================
   Estado VACÍO v2 — rediseño Claude Design "Comparador vacío".
   Scope: .prido-compare-empty .pce-*  ·  tokens del sitio, theme-aware.
   ============================================================ */
.prido-compare-empty {
	--pce-acc: var(--prido-secondary, #2dc6c1);
	--pce-acc-deep: #0e7e7a;
	--pce-acc-soft: color-mix(in srgb, var(--pce-acc) 10%, transparent);
	--pce-acc-line: color-mix(in srgb, var(--pce-acc) 26%, transparent);
	--pce-ink: #1a2a3a;
	--pce-teal-300: #7fd6d1;
	--pce-surface: var(--prido-theme-surface-strong, #fff);
	--pce-subtle: var(--prido-theme-canvas-soft, #f2f6f9);
	--pce-border: var(--prido-theme-border, #e2e8ed);
	--pce-fg: var(--prido-theme-ink, #1a2a3a);
	--pce-muted: var(--prido-theme-muted, #66788d);
	--pce-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
	--pce-display: var(--prido-font-heading, 'Outfit', sans-serif);
	--pce-body: 'Noto Sans', sans-serif;
	--pce-radius-md: 10px;
	--pce-radius-lg: 14px;
	--pce-radius-xl: 22px;
	--pce-shadow-md: 0 10px 24px -8px rgba(18, 29, 42, .14);
	--pce-shadow-lg: 0 24px 48px -16px rgba(18, 29, 42, .26);
	--pce-ease: 180ms cubic-bezier(.22, .61, .36, 1);

	/* el contenedor pasa de tarjeta centrada a stack full-width */
	position: static;
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 6vh, 72px);
	width: 100%;
	max-width: none;
	margin: clamp(20px, 3.5vw, 36px) 0 clamp(28px, 5vh, 56px);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: left;
	overflow: visible;
	font-family: var(--pce-body);
}
.prido-compare-empty::before { content: none; }

html[data-theme="dark"] .prido-compare-empty {
	--pce-acc-deep: #5bc9c4;
	--pce-ink: #0e1a24;
}

/* breadcrumb */
.prido-compare-empty .pce-crumb {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	font-size: 13px; color: var(--pce-muted); margin-bottom: clamp(20px, 3vh, 34px);
}
.prido-compare-empty .pce-crumb a { color: var(--pce-muted); font-weight: 600; text-decoration: none; }
.prido-compare-empty .pce-crumb a:hover { color: var(--pce-acc-deep); }
.prido-compare-empty .pce-crumb svg { color: color-mix(in srgb, var(--pce-muted) 55%, transparent); }
.prido-compare-empty .pce-crumb b { color: var(--pce-fg); font-weight: 700; }

/* hero */
.prido-compare-empty .pce-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.prido-compare-empty .pce-copy { max-width: 580px; }
.prido-compare-empty .pce-eyebrow {
	display: inline-block; margin-bottom: 16px;
	font-family: var(--pce-display); font-size: 11.5px; font-weight: 700;
	letter-spacing: .15em; text-transform: uppercase; color: var(--pce-acc-deep);
}
.prido-compare-empty .pce-h {
	font-family: var(--pce-display); font-size: clamp(34px, 4.6vw, 56px);
	font-weight: 800; line-height: 1.04; letter-spacing: -0.02em;
	color: var(--pce-fg); margin: 0 0 18px; text-wrap: balance;
}
.prido-compare-empty .pce-h .pce-q { color: var(--pce-acc-deep); white-space: nowrap; }
.prido-compare-empty .pce-lead { font-size: 18px; line-height: 1.62; color: var(--pce-muted); margin: 0 0 28px; max-width: 52ch; }

/* CTAs */
.prido-compare-empty .pce-cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prido-compare-empty .pce-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 26px; border-radius: var(--pce-radius-md);
	background: var(--pce-ink); color: #fff; border: 1px solid var(--pce-ink);
	font-family: var(--pce-display); font-size: 15px; font-weight: 700; text-decoration: none;
	transition: filter var(--pce-ease), transform var(--pce-ease);
}
.prido-compare-empty .pce-btn:hover { filter: brightness(1.08); }
.prido-compare-empty .pce-btn:active { transform: translateY(1px); }
html[data-theme="dark"] .prido-compare-empty .pce-btn { background: var(--pce-acc); border-color: var(--pce-acc); color: #06211f; }
.prido-compare-empty .pce-ghost {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 14px 24px; border-radius: var(--pce-radius-md);
	background: var(--pce-surface); border: 1px solid var(--pce-border);
	font-family: var(--pce-display); font-size: 15px; font-weight: 700; color: var(--pce-fg); text-decoration: none;
	transition: border-color var(--pce-ease), color var(--pce-ease);
}
.prido-compare-empty .pce-ghost svg { color: var(--pce-muted); transition: color var(--pce-ease); }
.prido-compare-empty .pce-ghost:hover { border-color: var(--pce-acc); color: var(--pce-acc-deep); }
.prido-compare-empty .pce-ghost:hover svg { color: var(--pce-acc); }

/* chips "empieza por" */
.prido-compare-empty .pce-dym { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.prido-compare-empty .pce-dym-lab { font-size: 13px; font-weight: 600; color: var(--pce-muted); margin-right: 2px; display: inline-flex; align-items: center; gap: 6px; }
.prido-compare-empty .pce-dym-lab svg { color: var(--pce-acc); }
.prido-compare-empty .pce-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border-radius: 999px;
	background: var(--pce-surface); border: 1px solid var(--pce-border);
	font-size: 13px; font-weight: 600; color: var(--pce-muted); white-space: nowrap; text-decoration: none;
	transition: border-color var(--pce-ease), color var(--pce-ease), background var(--pce-ease);
}
.prido-compare-empty .pce-chip:hover { border-color: var(--pce-acc); color: var(--pce-acc-deep); background: var(--pce-acc-soft); }
.prido-compare-empty .pce-chip svg { color: var(--pce-muted); }
.prido-compare-empty .pce-chip:hover svg { color: var(--pce-acc); }

/* visual: tabla fantasma */
.prido-compare-empty .pce-art { display: flex; }
.prido-compare-empty .pce-panel {
	position: relative; width: 100%; min-height: 472px;
	display: flex; flex-direction: column; gap: 22px;
	padding: clamp(26px, 2.6vw, 36px);
	background: var(--pce-ink); color: #fff;
	border-radius: var(--pce-radius-xl); overflow: hidden;
	box-shadow: var(--pce-shadow-lg);
}
html[data-theme="dark"] .prido-compare-empty .pce-panel { border: 1px solid var(--pce-border); }
.prido-compare-empty .pce-status {
	position: relative; z-index: 2;
	display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
	font-family: var(--pce-mono); font-size: 13px; letter-spacing: .06em; color: var(--pce-teal-300);
}
.prido-compare-empty .pce-status .pce-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--pce-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pce-acc) 18%, transparent); }
.prido-compare-empty .pce-status .pce-mut { color: rgba(255, 255, 255, .5); margin-left: auto; }
.prido-compare-empty .pce-slots { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prido-compare-empty .pce-slot {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	aspect-ratio: 3 / 4; border-radius: var(--pce-radius-md);
	border: 1.5px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .5); text-align: center; padding: 12px;
}
.prido-compare-empty .pce-slot .pce-plus {
	width: 38px; height: 38px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--pce-acc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pce-acc) 40%, transparent); color: var(--pce-teal-300);
}
.prido-compare-empty .pce-slot--first { border-color: color-mix(in srgb, var(--pce-acc) 50%, transparent); background: color-mix(in srgb, var(--pce-acc) 8%, transparent); }
.prido-compare-empty .pce-slot-lbl { font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
.prido-compare-empty .pce-rows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.prido-compare-empty .pce-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 2px; border-top: 1px solid rgba(255, 255, 255, .1); }
.prido-compare-empty .pce-row span { font-size: 13px; color: rgba(255, 255, 255, .62); }
.prido-compare-empty .pce-bars { display: flex; gap: 8px; }
.prido-compare-empty .pce-bars i { display: block; width: 30px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.prido-compare-empty .pce-scaleicon { position: absolute; right: clamp(18px, 3vw, 34px); top: clamp(48px, 8vh, 78px); z-index: 1; color: rgba(255, 255, 255, .06); }

/* tips */
.prido-compare-empty .pce-tips-sec { scroll-margin-top: calc(var(--prido-hs-offset, 88px) + 24px); }
.prido-compare-empty .pce-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prido-compare-empty .pce-tip {
	display: flex; flex-direction: column; gap: 10px;
	padding: 24px 24px 26px;
	background: var(--pce-surface); border: 1px solid var(--pce-border); border-radius: var(--pce-radius-lg);
}
.prido-compare-empty .pce-tip-ic {
	width: 40px; height: 40px; border-radius: var(--pce-radius-md);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pce-acc-soft); color: var(--pce-acc-deep); margin-bottom: 4px; position: relative;
}
.prido-compare-empty .pce-tip-step {
	position: absolute; top: -8px; right: -8px;
	width: 22px; height: 22px; border-radius: 999px;
	background: var(--pce-ink); color: #fff;
	font-family: var(--pce-mono); font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] .prido-compare-empty .pce-tip-step { background: var(--pce-acc); color: var(--pce-ink); }
.prido-compare-empty .pce-tip h3 { font-family: var(--pce-display); font-size: 16px; font-weight: 700; color: var(--pce-fg); margin: 0; letter-spacing: -0.01em; }
.prido-compare-empty .pce-tip p { font-size: 14px; line-height: 1.55; color: var(--pce-muted); margin: 0; }

/* encabezado de sección */
.prido-compare-empty .pce-sec-head { max-width: 640px; margin: 0 0 28px; }
.prido-compare-empty .pce-sec-head--inline { margin: 0; }
.prido-compare-empty .pce-sec-head h2 { font-family: var(--pce-display); font-size: clamp(27px, 3.2vw, 38px); font-weight: 800; line-height: 1.07; letter-spacing: -0.02em; color: var(--pce-fg); margin: 0 0 10px; }
.prido-compare-empty .pce-sec-head p { font-size: 16px; color: var(--pce-muted); margin: 0; }

/* categorías */
.prido-compare-empty .pce-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prido-compare-empty .pce-card {
	position: relative;
	display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
	min-height: 158px; padding: 22px;
	background: var(--pce-surface); border: 1px solid var(--pce-border); border-radius: var(--pce-radius-lg); text-decoration: none;
	transition: border-color var(--pce-ease), box-shadow var(--pce-ease), transform var(--pce-ease);
}
.prido-compare-empty .pce-card:hover { border-color: var(--pce-acc); box-shadow: var(--pce-shadow-md); transform: translateY(-3px); }
.prido-compare-empty .pce-card-ct { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pce-muted); font-variant-numeric: tabular-nums; }
.prido-compare-empty .pce-card-cn { font-size: 18px; font-weight: 700; color: var(--pce-fg); line-height: 1.25; letter-spacing: -0.01em; }
.prido-compare-empty .pce-card-go { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--pce-acc-deep); }
.prido-compare-empty .pce-card-go svg { transition: transform var(--pce-ease); }
.prido-compare-empty .pce-card:hover .pce-card-go svg { transform: translateX(4px); }

/* bestsellers */
.prido-compare-empty .pce-best-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.prido-compare-empty .pce-best-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--acc-deep, var(--pce-acc-deep)); white-space: nowrap; text-decoration: none; }
.prido-compare-empty .pce-best-link svg { transition: transform var(--pce-ease); }
.prido-compare-empty .pce-best-link:hover svg { transform: translateX(4px); }
/* Galería "Empieza a comparar" — fiel al mockup Claude Design "Comparador
   vacío PRIDO" (.nr-prod): tarjeta sin caja, tile de imagen con borde+radio,
   renglón "Comparar" con hairline y +/círculo que se llena teal al hover.
   Usa los tokens del estado lleno (.prido-compare-page), dark incluido. */
.prido-compare-empty .pce-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 28px); }
.prido-compare-empty .pce-prod { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.prido-compare-empty .pce-prod-media {
	position: relative; aspect-ratio: 1 / 1; overflow: hidden;
	background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
	transition: border-color var(--dur-base) var(--ease-standard);
}
.prido-compare-empty .pce-prod:hover .pce-prod-media { border-color: var(--border-strong); }
.prido-compare-empty .pce-prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow, 400ms) var(--ease-standard); }
.prido-compare-empty .pce-prod:hover .pce-prod-media img { transform: scale(1.05); }
.prido-compare-empty .pce-prod-tag {
	position: absolute; top: 12px; left: 12px; z-index: 1;
	font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
	padding: 5px 10px; border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.92); color: var(--prido-ink, #0B1E2E);
	border: 1px solid var(--border-default); backdrop-filter: blur(4px);
}
.prido-compare-empty .pce-prod-body { padding: 15px 2px 0; display: flex; flex-direction: column; gap: 5px; }
.prido-compare-empty .pce-prod-cat { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-muted); }
.prido-compare-empty .pce-prod-name {
	font-family: var(--font-sans); font-size: var(--fs-15, 15px); font-weight: 700; color: var(--fg-default);
	line-height: 1.3; letter-spacing: var(--ls-snug); margin: 0;
	transition: color var(--dur-quick);
}
.prido-compare-empty .pce-prod:hover .pce-prod-name { color: var(--acc-deep); }
.prido-compare-empty .pce-prod-add {
	margin-top: 13px; padding: 12px 2px 0;
	border-top: 1px solid var(--border-subtle);
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--fg-secondary); font-size: var(--fs-13, 13px); font-weight: 700;
	transition: color var(--dur-quick);
}
.prido-compare-empty .pce-prod-add svg {
	flex-shrink: 0; width: 22px; height: 22px; padding: 4px; box-sizing: border-box;
	border-radius: 50%; border: 1px solid var(--border-default);
	transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.prido-compare-empty .pce-prod:hover .pce-prod-add { color: var(--acc-deep); }
.prido-compare-empty .pce-prod:hover .pce-prod-add svg { background: var(--acc-deep); border-color: var(--acc-deep); color: #fff; transform: rotate(90deg); }

/* ayuda */
.prido-compare-empty .pce-help { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--pce-ink); border-radius: var(--pce-radius-xl); padding: 34px 40px; color: #fff; }
html[data-theme="dark"] .prido-compare-empty .pce-help { border: 1px solid var(--pce-border); }
.prido-compare-empty .pce-help-l { display: flex; align-items: center; gap: 20px; min-width: 0; }
.prido-compare-empty .pce-help-ic {
	width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--pce-radius-lg);
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
	display: inline-flex; align-items: center; justify-content: center; color: var(--pce-teal-300);
}
.prido-compare-empty .pce-help-ey { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pce-teal-300); margin: 0 0 5px; }
.prido-compare-empty .pce-help-h { font-family: var(--pce-display); font-size: 20px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.01em; }
.prido-compare-empty .pce-help-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prido-compare-empty .pce-help-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--pce-radius-md); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: transform var(--pce-ease), filter var(--pce-ease); }
.prido-compare-empty .pce-help-btn:active { transform: translateY(1px); }
.prido-compare-empty .pce-wsp { background: #1FB6B0; color: #04241F; }
.prido-compare-empty .pce-wsp:hover { filter: brightness(1.07); }
.prido-compare-empty .pce-tel { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.prido-compare-empty .pce-tel:hover { background: rgba(255, 255, 255, .16); }

/* responsive */
@media (max-width: 980px) {
	.prido-compare-empty .pce-hero { grid-template-columns: 1fr; gap: 40px; }
	.prido-compare-empty .pce-art { order: -1; max-width: 560px; margin: 0 auto; width: 100%; }
	.prido-compare-empty .pce-panel { min-height: 0; gap: 18px; }
	.prido-compare-empty .pce-grid, .prido-compare-empty .pce-prods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.prido-compare-empty .pce-tips { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
	.prido-compare-empty .pce-btn, .prido-compare-empty .pce-ghost { flex: 1; justify-content: center; }
	.prido-compare-empty .pce-help { padding: 26px 24px; }
	.prido-compare-empty .pce-help-r { width: 100%; }
	.prido-compare-empty .pce-help-btn { flex: 1; justify-content: center; }
}
@media (max-width: 460px) {
	.prido-compare-empty .pce-grid { grid-template-columns: 1fr; }
	.prido-compare-empty .pce-prods { grid-template-columns: 1fr 1fr; }
}

.prido-compare-card-btn {
	width: 100%;
	margin-top: 8px;
	min-height: 34px;
	padding: 8px 12px;
	font-size: 12px;
}

.prido-compare-single-btn {
	margin-top: 10px;
}

.prido-compare-floating {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 10px 8px 16px;
	border: 1px solid var(--prido-theme-border, rgba(201, 212, 221, .74));
	border-radius: 999px;
	background: var(--prido-theme-surface-strong, rgba(255, 255, 255, .94));
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 16px 38px rgba(18, 29, 42, .12);
	color: var(--prido-theme-ink, #1a2a3a) !important;
	font-family: Outfit, Arial, sans-serif;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none !important;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px) scale(.98);
	pointer-events: none;
	transition: opacity .24s ease, transform .24s ease, visibility .24s ease, border-color .2s ease;
}

.prido-compare-floating.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
	pointer-events: auto;
}

.prido-compare-floating:hover {
	border-color: var(--prido-secondary, #2dc6c1);
	transform: translate(-50%, -1px) scale(1);
}

.prido-compare-floating__icon {
	font-size: 0;
}

.prido-compare-floating__icon::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: currentColor;
	clip-path: polygon(10% 86%, 24% 86%, 24% 52%, 10% 52%, 10% 86%, 43% 86%, 57% 86%, 57% 22%, 43% 22%, 43% 86%, 76% 86%, 90% 86%, 90% 40%, 76% 40%, 76% 86%);
}

.prido-compare-floating__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--prido-secondary, #2dc6c1);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
}


/* ============================================================
   PRIDO · Comparador — ESTADO LLENO (matriz) · rediseño Claude Design
   Adaptado de design/comparador.css. Matriz clásica: atributos en
   filas agrupadas, productos en columnas. Header de producto sticky
   + primera columna congelada (freeze en 2 ejes), "mejor en su fila",
   resaltar diferencias, toasts.
   Tokens puenteados a los del sitio (theme-aware, espejo de .pce-*).
   Clases visuales .cmp-* conviven con los hooks .prido-compare-* /
   data-prido-compare-* que usan el runtime (variación + PDF).
   ============================================================ */

/* ---- Sistema de diseño del mockup (colors_and_type.css + home.css), scopeado ---- */
.prido-compare-page {
	/* brand core */
	--prido-teal: #1FB6B0; --prido-teal-600: #169B96; --prido-teal-700: #0E7E7A;
	--prido-teal-300: #6CD4D0; --prido-teal-100: #D6F2F1; --prido-teal-50: #EEF9F8;
	--prido-steel: #5C7A93; --prido-steel-700: #3F5872; --prido-steel-300: #94ABBE;
	--prido-steel-100: #DDE5EC; --prido-steel-50: #F1F4F7;
	--prido-ink: #0B1E2E; --prido-ink-soft: #1F2D3D;
	/* neutrals */
	--neutral-0: #FFFFFF; --neutral-25: #FBFCFD; --neutral-50: #F5F7F9; --neutral-100: #ECEFF3;
	--neutral-200: #DDE2E8; --neutral-300: #C2CAD3; --neutral-400: #97A2AE; --neutral-500: #6B7785;
	--neutral-600: #4D5866; --neutral-700: #2F3945; --neutral-800: #1B232C; --neutral-900: #0B1118;
	/* semantic */
	--success: #1F8A5B; --success-bg: #E5F3EC; --warning: #C77A00; --warning-bg: #FBF1DD;
	--danger: #C0392B; --danger-bg: #F9E5E2; --promo: #B7301A; --promo-bg: #FFF1ED;
	/* fg / bg / border */
	--bg-page: var(--neutral-25); --bg-surface: var(--neutral-0); --bg-subtle: var(--neutral-50); --bg-muted: var(--neutral-100);
	--fg-default: var(--neutral-800); --fg-secondary: var(--neutral-600); --fg-muted: var(--neutral-500); --fg-placeholder: var(--neutral-400);
	--fg-link: var(--prido-teal-700); --fg-link-hover: var(--prido-teal-600);
	--border-subtle: var(--neutral-100); --border-default: var(--neutral-200); --border-strong: var(--neutral-300);
	/* type */
	--font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	--fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
	--ls-tight: -0.02em; --ls-snug: -0.01em; --ls-wide: 0.04em; --ls-eyebrow: 0.14em;
	--radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px;
	--shadow-xs: 0 1px 2px rgba(15, 30, 45, 0.06);
	--shadow-sm: 0 1px 3px rgba(15, 30, 45, 0.08), 0 1px 2px rgba(15, 30, 45, 0.04);
	--shadow-lg: 0 12px 28px rgba(15, 30, 45, 0.10), 0 4px 8px rgba(15, 30, 45, 0.05);
	--shadow-xl: 0 24px 56px rgba(15, 30, 45, 0.14);
	--ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
	--dur-quick: 120ms; --dur-base: 200ms;
	/* theme-scoped (home.css) */
	--cot-bg: var(--prido-ink); --cot-fg: #FFFFFF; --cot-border: var(--prido-ink); --cot-bg-hover: #16314A;
	--h-serif: var(--prido-ink); --card-bg: var(--bg-surface); --img-bg: #F2F4F6; --band-bg: var(--neutral-50); --ink-panel: var(--prido-ink);
	--acc: var(--prido-teal); --acc-deep: var(--prido-teal-700); --acc-soft: var(--prido-teal-50); --acc-line: var(--prido-teal-100);
	/* comparador layout */
	--hd-h: var(--prido-wp-adminbar-offset, 0px); /* ignora el header del sitio en esta página */
	/* la toolbar (.cmp-bar) NO es sticky: el renglón de producto pega directo
	   en el tope del viewport (solo bajo la barra admin si existe) */
	--cmp-stick: var(--hd-h);
	--cmp-label-w: 200px; --cmp-col-w: 176px; --cmp-img-h: 128px; --cmp-cell-py: 15px; --cmp-cell-px: 18px;
	/* tope de columna de producto = ancho real con 5 columnas en el contenedor
	   de 1360px ((1280−200)/5); así el ancho NO varía según cuántos productos
	   haya y el slot "Agregar" absorbe el sobrante (216−30 padding = 186 =
	   --cmp-img-max: imagen y columna quedan consistentes) */
	--cmp-col-max: 216px;
	/* tope de la imagen del header = lo que mide con 5 columnas en el contenedor
	   de 1360px; con 1-2 productos la columna 1fr crece pero la imagen no,
	   para que el renglón sticky no tape la tabla de atributos */
	--cmp-img-max: 186px;
	font-family: var(--font-sans); color: var(--fg-default);
	max-width: 1360px; margin: 0 auto; padding: 24px 40px 72px;
}
html[data-theme="dark"] .prido-compare-page {
	--bg-page: #0C1219; --bg-surface: #111A24; --bg-subtle: #0F1720; --bg-muted: #18232F;
	--fg-default: #E7EDF2; --fg-secondary: #AEBCC8; --fg-muted: #7E8C99; --fg-placeholder: #5A6875;
	--border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18);
	--promo: #E58E81; --promo-bg: rgba(192, 57, 43, 0.16);
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
	--cot-bg: var(--prido-teal-700); --cot-fg: #FFFFFF; --cot-border: var(--prido-teal-700); --cot-bg-hover: #0A6864;
	--h-serif: #F3F7FA; --card-bg: #111A24; --img-bg: #16212C; --band-bg: #0F1720; --ink-panel: #060F18;
	--acc-deep: #5BC9C4; --acc-soft: rgba(31, 182, 176, 0.1); --acc-line: rgba(31, 182, 176, 0.25);
}

/* reset border-box del estado lleno (el mockup usa * {box-sizing:border-box} global);
   scopeado para NO afectar el estado vacío .pce-* */
.cmp-hero, .cmp-hero *, .cmp-bar, .cmp-bar *, .cmp-scroll,
.prido-compare-matrix, .prido-compare-matrix *, .prido-compare-matrix *::before, .prido-compare-matrix *::after,
.cmp-help, .cmp-help *, .cmp-toast-wrap, .cmp-toast-wrap * { box-sizing: border-box; }

/* ============================================================
   HERO
   ============================================================ */
.cmp-hero { padding: clamp(6px, 2vh, 20px) 0 clamp(18px, 2.6vh, 28px); }
.cmp-crumb {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	font-size: var(--fs-13); color: var(--fg-muted); margin-bottom: clamp(16px, 3vh, 26px);
}
.cmp-crumb a { color: var(--fg-muted); font-weight: 600; text-decoration: none; }
.cmp-crumb a:hover { color: var(--acc-deep); }
.cmp-crumb svg { color: var(--fg-placeholder); }
.cmp-crumb b { color: var(--fg-default); font-weight: 700; }

.cmp-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cmp-hero .cmp-eyebrow {
	display: inline-block; margin-bottom: 12px;
	font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
	letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--acc-deep);
}
.cmp-h {
	font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.05;
	font-weight: 600; letter-spacing: var(--ls-tight); color: var(--h-serif);
	margin: 0 0 12px; text-wrap: balance;
}
.cmp-lead { font-size: var(--fs-16); line-height: 1.6; color: var(--fg-secondary); margin: 0; max-width: 54ch; }
.cmp-hero-aside {
	display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
	font-size: var(--fs-13); color: var(--fg-muted); flex-shrink: 0;
}
.cmp-hero-aside .cnt { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: .04em; color: var(--fg-secondary); }
.cmp-hero-aside .cnt b { color: var(--acc-deep); }

/* ============================================================
   TOOLBAR
   ============================================================ */
.cmp-bar {
	position: static;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 12px 0; margin-bottom: 4px;
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-subtle);
}
.cmp-bar-l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.cmp-bar-title { display: flex; align-items: baseline; gap: 9px; }
.cmp-bar-title .t { font-family: var(--font-sans); font-size: var(--fs-15); font-weight: 800; color: var(--fg-default); letter-spacing: var(--ls-snug); }
.cmp-bar-title .n { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 500; color: var(--acc-deep); }
.cmp-legend { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--fg-muted); white-space: nowrap; }
.cmp-legend .swatch {
	width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
	background: var(--acc-soft); border: 1px solid var(--acc-line);
	display: inline-flex; align-items: center; justify-content: center; color: var(--acc-deep);
}
.cmp-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.cmp-switch {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 14px; border-radius: var(--radius-pill);
	background: var(--bg-surface); border: 1px solid var(--border-default);
	font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 700; color: var(--fg-secondary); cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cmp-switch:hover { border-color: var(--border-strong); color: var(--fg-default); }
.cmp-switch .track { position: relative; width: 34px; height: 19px; border-radius: 999px; background: var(--border-strong); transition: background var(--dur-base) var(--ease-standard); flex-shrink: 0; }
.cmp-switch .track i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-standard); }
.cmp-switch[aria-pressed="true"] { border-color: var(--acc); color: var(--acc-deep); }
.cmp-switch[aria-pressed="true"] .track { background: var(--acc); }
.cmp-switch[aria-pressed="true"] .track i { transform: translateX(15px); }

.cmp-btn {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 0; box-shadow: none;
	padding: 9px 15px; border-radius: var(--radius-md);
	background: var(--bg-surface); border: 1px solid var(--border-default);
	font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 700; color: var(--fg-secondary); cursor: pointer;
	text-decoration: none !important;
	transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.cmp-btn svg { color: var(--fg-muted); }
.cmp-btn:hover { background: var(--bg-surface); border-color: var(--acc); color: var(--acc-deep); transform: none; }
.cmp-btn:hover svg { color: var(--acc); }
.cmp-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.cmp-btn.danger:hover svg { color: var(--danger); }
/* el botón PDF vive ahora en la toolbar con estilo .cmp-btn */
.cmp-bar .prido-compare-pdf-btn { background: var(--bg-surface); color: var(--fg-secondary) !important; box-shadow: none; }
.cmp-bar .prido-compare-pdf-btn:hover { background: var(--bg-surface); border-color: var(--acc); color: var(--acc-deep) !important; transform: none; }
.cmp-bar .prido-compare-pdf-btn.is-loading { opacity: .7; }

/* ============================================================
   MATRIZ (grid) — freeze 2 ejes
   ============================================================ */
.cmp-scroll {
	overflow: visible;
	margin-bottom: clamp(28px, 5vh, 48px);
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
.prido-compare-matrix {
	display: grid;
	grid-template-columns: var(--cmp-label-w) repeat(var(--cmp-n, 3), minmax(var(--cmp-col-w), var(--cmp-col-max, 216px)));
	align-items: stretch;
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xl);
	overflow: clip;
	box-shadow: 0 18px 48px rgba(18, 29, 42, .07);
}
/* con slot "Agregar" (count<5) ese último track flexa para llenar el ancho;
   --cmp-np = solo productos (lo emite la plantilla junto a --cmp-n) */
.prido-compare-matrix.cmp-has-add {
	grid-template-columns: var(--cmp-label-w) repeat(var(--cmp-np, 1), minmax(var(--cmp-col-w), var(--cmp-col-max, 216px))) minmax(var(--cmp-col-w), 1fr);
}
/* las filas envuelven label+celdas para el PDF/JS, pero se aplanan en el grid */
.prido-compare-data-row { display: contents; }

.cmp-cell, .cmp-lbl {
	padding: var(--cmp-cell-py) var(--cmp-cell-px);
	border-top: 1px solid var(--border-subtle);
	font-family: var(--font-sans); font-size: var(--fs-14); color: var(--fg-default);
	display: flex; align-items: center;
	background: var(--bg-surface);
	min-width: 0;
}
.cmp-cell { border-left: 1px solid var(--border-subtle); line-height: 1.45; }
.cmp-cell.val-na { color: var(--fg-placeholder); }
.cmp-cell [data-prido-compare-value] { font-weight: 600; color: var(--fg-default); }
.cmp-cell [data-prido-compare-value]:empty::before { content: "No aplica"; color: var(--fg-placeholder); font-weight: 500; }

/* columna de etiqueta congelada */
.cmp-lbl {
	position: sticky; left: 0; z-index: 20;
	font-family: var(--font-sans); font-weight: 700; color: var(--fg-secondary);
	font-size: var(--fs-13); letter-spacing: var(--ls-snug);
	flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
}
.cmp-lbl .hint { font-weight: 500; color: var(--fg-placeholder); font-size: var(--fs-12); }

/* fila de grupo (abarca todas las columnas) */
.cmp-group {
	grid-column: 1 / -1;
	position: sticky; left: 0;
	padding: 13px var(--cmp-cell-px) 11px;
	background: var(--bg-subtle);
	border-top: 1px solid var(--border-default);
	display: flex; align-items: center; gap: 9px;
}
.cmp-group.cmp-group--first { border-top: none; }
.cmp-group .gtxt {
	position: sticky; left: var(--cmp-cell-px);
	font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 800;
	letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--acc-deep);
	display: inline-flex; align-items: center; gap: 8px;
}
.cmp-group .gtxt svg { color: var(--acc); }

/* ---- esquina + header de producto sticky ---- */
.cmp-corner {
	position: sticky; top: var(--cmp-stick, 132px); left: 0; z-index: 1008;
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border-default);
	padding: 16px var(--cmp-cell-px);
	display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.cmp-corner .sub { font-size: var(--fs-12); color: var(--fg-muted); }
.cmp-corner .ttl { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 600; color: var(--h-serif); letter-spacing: var(--ls-tight); }

.cmp-phead {
	position: sticky; top: var(--cmp-stick, 132px); z-index: 1006;
	background: var(--bg-surface);
	border-left: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-default);
	padding: 16px 15px 15px;
	display: flex; flex-direction: column; gap: 7px;
	min-height: 0;
}
.cmp-phead.is-best { background: linear-gradient(180deg, var(--acc-soft), transparent 92px), var(--bg-surface); }

.cmp-ph-media {
	position: relative; aspect-ratio: 1; width: 100%; border-radius: var(--radius-md);
	max-width: var(--cmp-img-max, 186px); margin-inline: auto;
	background: var(--img-bg); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.cmp-ph-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-ph-media > .prido-compare-product-image-link { display: block; width: 100%; height: 100%; }
.cmp-ph-remove {
	position: absolute; top: 7px; right: 7px; z-index: 2;
	width: 26px; height: 26px; border-radius: 999px;
	background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--fg-muted);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	padding: 0; line-height: 0; font-size: 0; text-decoration: none;
	transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.cmp-ph-remove svg { width: 15px; height: 15px; display: block; }
.cmp-ph-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.cmp-ph-ribbon {
	position: absolute; top: 8px; left: 8px;
	font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 9px; border-radius: var(--radius-pill);
	background: var(--acc-deep); color: #fff;
	display: inline-flex; align-items: center; gap: 5px;
}
.cmp-ph-ribbon[hidden] { display: none; }

.cmp-ph-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.cmp-ph-name { font-family: var(--font-sans); font-size: var(--fs-15); font-weight: 700; line-height: 1.28; color: var(--fg-default); letter-spacing: var(--ls-snug); margin: 0; min-height: 2.56em; }
.cmp-ph-name a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp-ph-name a:hover { color: var(--acc-deep); }
.cmp-ph-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--fg-muted); }
.cmp-ph-rating .stars { display: inline-flex; gap: 1px; color: var(--acc); }
.cmp-ph-rating .rc { font-variant-numeric: tabular-nums; }

.cmp-ph-priceline { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; margin-top: 0; }
.cmp-ph-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 0; min-height: 26px; }
.cmp-ph-price del { color: var(--fg-muted); font-size: var(--fs-12); text-decoration: line-through; opacity: .85; }
.cmp-ph-price ins, .cmp-ph-price .woocommerce-Price-amount { text-decoration: none; }
.cmp-ph-price ins .woocommerce-Price-amount, .cmp-ph-price > .woocommerce-Price-amount {
	font-size: var(--fs-20); font-weight: 800; letter-spacing: -.01em; color: var(--fg-default); font-variant-numeric: tabular-nums;
}
.cmp-ph-off { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--promo); background: var(--promo-bg); padding: 3px 7px; border-radius: 4px; align-self: center; flex-shrink: 0; white-space: nowrap; }
.cmp-ph-off[hidden] { display: none; }

.cmp-ph-cuotas { font-size: var(--fs-12); color: var(--fg-muted); line-height: 1.4; }
.cmp-ph-cuotas b { color: var(--fg-secondary); font-weight: 700; }
.cmp-ph-cuotas:empty { display: none; }

.cmp-ph-actions { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 4px; }
/* "Agregar al carro" = botón custom .cmp-add-cart (ajax WC en simples, enlace en variables) */
.cmp-add-cart, .cmp-quote {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 0; box-shadow: none; margin: 0;
	padding: 11px 12px; border-radius: var(--radius-md);
	font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 800; letter-spacing: var(--ls-wide);
	line-height: 1.2; cursor: pointer; width: 100%; text-align: center; text-decoration: none !important;
	transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-quick) var(--ease-standard);
}
.cmp-add-cart { background: var(--cot-bg); color: var(--cot-fg) !important; border: 1px solid var(--cot-border); }
.cmp-add-cart svg { flex-shrink: 0; }
.cmp-add-cart .lbl-compact { display: none; }
.cmp-add-cart:hover { background: var(--cot-bg-hover); border-color: var(--cot-bg-hover); color: var(--cot-fg) !important; transform: none; }
.cmp-add-cart:active { transform: translateY(1px); }
.cmp-add-cart.loading { opacity: .75; cursor: wait; }
.cmp-add-cart.added { background: var(--success); border-color: var(--success); color: #fff !important; }
.cmp-add-cart--disabled { background: var(--bg-muted); color: var(--fg-placeholder) !important; border: 1px solid var(--border-default); cursor: not-allowed; pointer-events: none; }
.cmp-ph-actions .added_to_cart {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 700; color: var(--acc-deep) !important;
	text-decoration: none !important; padding: 2px; width: 100%;
}
.cmp-quote { background: transparent; color: var(--fg-secondary) !important; border: 1px solid var(--border-default); }
.cmp-quote:hover { border-color: var(--acc); color: var(--acc-deep) !important; }
.cmp-quote svg { color: currentColor; }
.cmp-quote--disabled { background: var(--bg-muted); color: var(--fg-placeholder) !important; border-color: var(--border-subtle); cursor: not-allowed; pointer-events: none; opacity: .75; }
.cmp-quote--disabled:hover { border-color: var(--border-subtle); color: var(--fg-placeholder) !important; }

/* slot vacío para agregar (enlaza a la tienda) */
.cmp-addslot {
	position: sticky; top: var(--cmp-stick, 132px); z-index: 1006;
	border-left: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-default);
	background: var(--bg-subtle);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 20px 15px; text-align: center; cursor: pointer;
	color: var(--fg-muted); text-decoration: none !important;
	transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cmp-addslot:hover { background: var(--acc-soft); color: var(--acc-deep); }
.cmp-addslot .plus {
	width: 44px; height: 44px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--bg-surface); border: 1.5px dashed var(--border-strong); color: var(--fg-muted);
	transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cmp-addslot:hover .plus { border-color: var(--acc); color: var(--acc-deep); }
.cmp-addslot .lbl { font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 800; line-height: 1.35; color: inherit; }
.cmp-addslot .sub { font-size: var(--fs-12); font-weight: 500; color: var(--fg-placeholder); }
.cmp-cell.is-empty { background: var(--bg-subtle); border-left: 1px solid var(--border-subtle); }

/* ---- winner + diff ---- */
.cmp-cell.is-win { background: var(--acc-soft); box-shadow: inset 3px 0 0 var(--acc); }
.cmp-cell.is-win [data-prido-compare-value] { color: var(--acc-deep); font-weight: 800; }
.cmp-win-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--acc-deep); }
.cmp-win-tag svg { width: 12px; height: 12px; }
.prido-compare-matrix[data-diff="1"] .prido-compare-data-row.is-same .cmp-lbl { color: var(--fg-placeholder); }
.prido-compare-matrix[data-diff="1"] .prido-compare-data-row.is-same .cmp-cell [data-prido-compare-value] { color: var(--fg-placeholder); font-weight: 500; }

/* chip de stock (Disponibilidad) */
.cmp-cell.stock-ok [data-prido-compare-value] { color: var(--success); font-weight: 700; }
.cmp-cell.stock-no [data-prido-compare-value] { color: var(--danger); font-weight: 700; }
.cmp-cell.stock-ok [data-prido-compare-value]::before,
.cmp-cell.stock-no [data-prido-compare-value]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: currentColor; margin-right: 7px; vertical-align: middle; }

/* selector de variación dentro de la celda (reusa .prido-compare-variation-control) */
.cmp-cell .prido-compare-variation-control { width: 100%; max-width: 260px; }
.cmp-cell .prido-compare-variation-control select {
	background-color: var(--bg-subtle) !important; border: 1px solid var(--border-default) !important;
	color: var(--fg-default) !important; font-family: var(--font-sans) !important; border-radius: var(--radius-md) !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}

/* ============================================================
   TOAST
   ============================================================ */
.cmp-toast-wrap {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
	z-index: 2200; display: flex; flex-direction: column; gap: 10px; align-items: center;
	pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.cmp-toast {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 18px; border-radius: var(--radius-lg);
	background: var(--prido-ink); color: #fff; box-shadow: var(--shadow-lg);
	font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 600;
	opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-emphasis);
	pointer-events: auto;
}
html[data-theme="dark"] .cmp-toast { background: var(--ink-panel); border: 1px solid var(--border-default); }
.cmp-toast.in { opacity: 1; transform: none; }
.cmp-toast .ic { width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; background: var(--prido-teal); color: var(--prido-ink); display: inline-flex; align-items: center; justify-content: center; }
.cmp-toast a { color: var(--prido-teal-300); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   BANDA DE AYUDA (cierre)
   ============================================================ */
.cmp-help {
	display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
	background: var(--prido-ink); border-radius: var(--radius-xl); padding: 30px 36px; color: #fff;
	margin: 0 0 clamp(28px, 5vh, 48px);
}
html[data-theme="dark"] .cmp-help { background: var(--ink-panel); border: 1px solid var(--border-default); }
.cmp-help-l { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cmp-help-ic { width: 50px; height: 50px; flex-shrink: 0; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; color: var(--prido-teal-300); }
.cmp-help-ey { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--prido-teal-300); margin: 0 0 5px; }
.cmp-help h3 { font-family: var(--font-sans); font-size: var(--fs-20); font-weight: 700; color: #fff; margin: 0; letter-spacing: var(--ls-snug); }
.cmp-help-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmp-help-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 700; white-space: nowrap; text-decoration: none !important; transition: transform var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard); }
.cmp-help-btn:active { transform: translateY(1px); }
.cmp-wsp { background: #1FB6B0; color: #04241F !important; }
.cmp-wsp:hover { filter: brightness(1.07); }
.cmp-tel { background: rgba(255, 255, 255, .1); color: #fff !important; border: 1px solid rgba(255, 255, 255, .18); }
.cmp-tel:hover { background: rgba(255, 255, 255, .16); }

/* ============================================================
   MARCA + PIE del PDF (se muestran solo al capturar / imprimir)
   ============================================================ */
.prido-compare-pdf-brand { display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border-default); font-family: var(--font-sans); font-weight: 800; color: var(--fg-default); }
.prido-compare-pdf-brand img { width: 128px; height: auto; }
.prido-compare-pdf-footer { display: none; padding: 12px 20px; margin: 0; color: var(--fg-muted); font-size: 11px; }

/* ============================================================
   RESPONSIVE — región de scroll acotada 2 ejes en móvil/tablet
   ============================================================ */
@media (max-width: 1199px) {
	.prido-compare-page { --cmp-label-w: 172px; --cmp-col-w: 184px; padding-left: 28px; padding-right: 28px; }
	.cmp-scroll {
		overflow: auto; -webkit-overflow-scrolling: touch;
		max-height: max(440px, calc(100svh - 96px));
		border: 1px solid var(--border-default); border-radius: var(--radius-xl);
		scroll-snap-type: x proximity; scroll-padding-left: var(--cmp-label-w);
	}
	.prido-compare-matrix { border: none; border-radius: 0; overflow: visible; box-shadow: none; }
	.cmp-phead, .cmp-addslot, .cmp-corner { top: 0; }
	.cmp-phead, .cmp-addslot { scroll-snap-align: start; }
	.cmp-lbl, .cmp-group, .cmp-corner { box-shadow: 6px 0 12px -8px rgba(15, 30, 45, .16); }
	html[data-theme="dark"] .cmp-lbl,
	html[data-theme="dark"] .cmp-group,
	html[data-theme="dark"] .cmp-corner { box-shadow: 6px 0 12px -6px rgba(0, 0, 0, .5); }
	.cmp-phead, .cmp-addslot { box-shadow: 0 6px 12px -8px rgba(15, 30, 45, .16); }
	.cmp-corner { box-shadow: 6px 6px 12px -8px rgba(15, 30, 45, .18); }
	.cmp-phead { padding: 12px 12px; gap: 6px; }
	.cmp-ph-name { font-size: var(--fs-14); }
	.cmp-ph-actions { flex-direction: row; gap: 6px; padding-top: 2px; }
	.cmp-add-cart, .cmp-quote { padding: 9px 6px; font-size: var(--fs-12); gap: 5px; }
	.cmp-add-cart .lbl-full { display: none; }
	.cmp-add-cart .lbl-compact { display: inline; }
}
@media (max-width: 1040px) {
	.prido-compare-page { --cmp-label-w: 150px; --cmp-col-w: 178px; }
}
@media (max-width: 820px) {
	.prido-compare-page { --cmp-label-w: 140px; --cmp-col-w: 168px; --cmp-cell-px: 14px; }
	.cmp-hero-row { gap: 14px; }
}
@media (max-width: 560px) {
	.prido-compare-page { --cmp-label-w: 118px; --cmp-col-w: 152px; --cmp-cell-py: 11px; --cmp-cell-px: 11px; padding-left: 16px; padding-right: 16px; }
	.cmp-hero-aside { align-items: flex-start; }
	.cmp-scroll { max-height: max(420px, calc(100svh - 84px)); margin-left: -14px; margin-right: -14px; border-radius: 0; border-left: none; border-right: none; }
	.cmp-corner .ttl { font-size: var(--fs-16); }
	.cmp-corner .sub { display: none; }
	.cmp-ph-price ins .woocommerce-Price-amount, .cmp-ph-price > .woocommerce-Price-amount { font-size: var(--fs-16); }
	.cmp-ph-priceline { flex-wrap: wrap; }
	.cmp-win-tag { display: none; }
	.cmp-cell, .cmp-lbl { font-size: var(--fs-13); }
	.cmp-bar-r { width: 100%; }
	.cmp-bar-r .cmp-switch { flex: 1; justify-content: space-between; }
	.cmp-help { padding: 24px; }
	.cmp-help-r { width: 100%; }
	.cmp-help-btn { flex: 1; justify-content: center; }
}
@media (max-width: 380px) {
	.prido-compare-page { --cmp-label-w: 104px; --cmp-col-w: 140px; }
}

/* ============================================================
   IMPRESIÓN (fallback si jsPDF no carga → window.print())
   ============================================================ */
@media print {
	.cmp-hero, .cmp-bar, .cmp-addslot, .cmp-ph-remove, .cmp-ph-actions, .cmp-help,
	.cmp-toast-wrap, .prido-compare-floating, #prido-hs, .prido-fs { display: none !important; }
	.prido-compare-pdf-brand, .prido-compare-pdf-footer { display: flex !important; grid-column: 1 / -1; }
	.cmp-scroll { overflow: visible !important; max-height: none !important; border: none !important; }
	.prido-compare-matrix { box-shadow: none !important; border: 1px solid #d9e2e8 !important; }
	.cmp-phead, .cmp-corner, .cmp-lbl, .cmp-group { position: static !important; box-shadow: none !important; }
}

/* ============================================================
   Estado VACÍO — chips "Empieza por" en una sola línea (desktop).
   En móvil se conserva el wrap por seguridad de ancho.
   ============================================================ */
@media (min-width: 981px) {
	.prido-compare-empty .pce-dym { flex-wrap: nowrap; }
	.prido-compare-empty .pce-dym > * { flex-shrink: 0; }
}


/* ============================================================
   En el comparador el header del sitio NO reaparece al hacer scroll:
   apenas se condensa (scroll > 18px) se oculta y se queda oculto, para no
   renderizarse detrás ni al lado del renglón sticky. Solo visible en el tope.
   (replica .prido-hs--hidden; scopeado al body de esta página) 
   ============================================================ */
body.prido-compare-active .prido-hs.is-condensed {
	transform: translateY(-100%) !important;
	pointer-events: none !important;
}