/* =============================================================
   WPSANI — Design v2  ·  Editorial Marketplace
   Override layer loaded AFTER style.min.css.
   Disable: define('WPSANI_DESIGN_V2', false) in wp-config.php
   ============================================================= */

/* ------------ 0. Tokens ------------------------------------- */
:root {
	/* Refine existing tokens (names kept for back-compat) */
	--background-color: #FBF8F2;
	--text-color: #1A1230;
	--secondary-color: #1A1230;

	/* New v2 palette */
	--v2-violet: #6E59A5;
	--v2-violet-deep: #4B3A82;
	--v2-violet-darker: #2E2253;
	--v2-violet-soft: #EDE6FB;
	--v2-violet-wash: #F6F1FF;
	--v2-violet-glow: rgba(110, 89, 165, .18);
	--v2-cream: #FBF8F2;
	--v2-cream-2: #F4EEE2;
	--v2-paper: #FFFFFF;
	--v2-ink: #1A1230;
	--v2-ink-2: #2E2A4A;
	--v2-ink-soft: #595478;
	--v2-ink-mute: #8A85A6;
	--v2-line: #ECE5F4;
	--v2-line-strong: #D8CDE8;
	--v2-mint: #2F9C72;
	--v2-mint-soft: #E5F4ED;
	--v2-coral: #E15B4D;
	--v2-coral-soft: #FCEBE7;
	--v2-amber: #C18C2A;
	--v2-amber-soft: #FBF1DC;

	/* Type */
	--v2-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
	--v2-body: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--v2-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Shape */
	--v2-radius-xs: 6px;
	--v2-radius-sm: 10px;
	--v2-radius: 16px;
	--v2-radius-lg: 22px;
	--v2-radius-pill: 999px;

	/* Depth */
	--v2-shadow-1: 0 1px 0 rgba(28, 18, 48, .04), 0 1px 2px rgba(28, 18, 48, .04);
	--v2-shadow-2: 0 1px 0 rgba(28, 18, 48, .03), 0 10px 24px -8px rgba(28, 18, 48, .10);
	--v2-shadow-3: 0 2px 0 rgba(28, 18, 48, .04), 0 22px 48px -16px rgba(28, 18, 48, .18);
	--v2-shadow-violet: 0 16px 40px -16px rgba(75, 58, 130, .35);

	/* Motion */
	--v2-ease: cubic-bezier(.2, .7, .2, 1);
	--v2-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------ 1. Global typography & base -------------------- */
body,
body.page,
body.single,
body.archive,
body.home {
	font-family: var(--v2-body);
	background: var(--v2-cream);
	color: var(--v2-ink);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#main-content,
main {
	background: transparent;
}

h1, h2, h3, h4 {
	font-family: var(--v2-display);
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--v2-ink);
	font-variation-settings: "opsz" 96, "SOFT" 25;
}

h1 { font-weight: 500; }
h2 { font-weight: 500; }
h3, h4 { font-weight: 600; letter-spacing: -.015em; font-variation-settings: "opsz" 24, "SOFT" 30; }

p { color: var(--v2-ink-2); }

a { color: var(--v2-violet-deep); }
a:hover { color: var(--v2-violet); }

::selection { background: var(--v2-violet); color: var(--v2-cream); }

img { max-width: 100%; }

/* Scrollbar (subtle) */
* { scrollbar-color: var(--v2-line-strong) transparent; }

/* Focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--v2-violet);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ------------ 2. Eyebrows & micro-typography ----------------- */
.v2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--v2-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-violet-deep);
}
.v2-eyebrow::before {
	content: "";
	width: 22px; height: 1px;
	background: currentColor;
	display: inline-block;
}

/* ------------ 3. Buttons (global) ---------------------------- */
.cta,
.cta-primary,
.cta-secondary,
.cta-tertiary,
.btn,
.edd-submit,
button.edd-add-to-cart,
input.edd-add-to-cart,
a.edd-add-to-cart {
	font-family: var(--v2-body);
	font-weight: 600;
	letter-spacing: -.005em;
	border-radius: var(--v2-radius-pill);
	transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease), background .25s var(--v2-ease), color .25s var(--v2-ease);
}

.cta-primary,
.btn.btnPrimary,
button.edd-add-to-cart,
input.edd-add-to-cart,
a.edd-add-to-cart {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border: 1px solid var(--v2-ink) !important;
	box-shadow: var(--v2-shadow-2);
}
.cta-primary:hover,
.btn.btnPrimary:hover,
button.edd-add-to-cart:hover,
input.edd-add-to-cart:hover,
a.edd-add-to-cart:hover {
	background: var(--v2-violet-darker) !important;
	border-color: var(--v2-violet-darker) !important;
	transform: translateY(-2px);
	box-shadow: var(--v2-shadow-3);
}

.cta-secondary,
.btn.btnGhost {
	background: transparent !important;
	color: var(--v2-ink) !important;
	border: 1px solid var(--v2-ink) !important;
}
.cta-secondary:hover,
.btn.btnGhost:hover {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	transform: translateY(-2px);
}

.cta-tertiary {
	background: var(--v2-violet-soft) !important;
	color: var(--v2-violet-deep) !important;
	border: 1px solid transparent !important;
}
.cta-tertiary:hover {
	background: var(--v2-violet) !important;
	color: var(--v2-cream) !important;
}

/* ------------ 4. Header (top bar) ---------------------------- */
header#header {
	background: var(--v2-cream);
	border-bottom: 1px solid var(--v2-line);
	backdrop-filter: blur(8px);
	z-index: 1200;
}

.main-header {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 24px !important;
}

.logo-top-bar {
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--v2-line-strong), var(--v2-shadow-1);
	transition: transform .25s var(--v2-ease);
}
.logo-top-bar:hover { transform: rotate(-4deg) scale(1.05); }

#header nav a,
#header .nav-link {
	font-family: var(--v2-body);
	font-weight: 500;
	font-size: .95rem;
	color: var(--v2-ink-2) !important;
	letter-spacing: -.005em;
	position: relative;
	padding: .35rem 0 !important;
	transition: color .2s var(--v2-ease);
}
#header nav a::after,
#header .nav-link::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -2px;
	height: 1.5px;
	background: var(--v2-violet);
	transition: right .3s var(--v2-ease);
}
#header nav a:hover::after,
#header .nav-link:hover::after { right: 0; }
#header nav a:hover,
#header .nav-link:hover { color: var(--v2-ink) !important; }

.cart-link,
.account-link {
	color: var(--v2-ink) !important;
	transition: color .2s var(--v2-ease);
}
.cart-link:hover,
.account-link:hover { color: var(--v2-violet) !important; }

/* Mobile nav */
#mobile-nav.mobile-nav {
	background: var(--v2-cream) !important;
	border-bottom: 1px solid var(--v2-line);
}

.hamburger span {
	background: var(--v2-ink) !important;
	height: 2px !important;
}

/* ------------ 5. Hero (homepage) ----------------------------- */
.hero {
	background: var(--v2-cream) !important;
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 7vw, 5rem) !important;
	border-bottom: 1px solid var(--v2-line);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 60% at 85% 10%, rgba(110, 89, 165, .22), transparent 60%),
		radial-gradient(40% 50% at 10% 100%, rgba(155, 135, 245, .14), transparent 65%);
	pointer-events: none;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(28,18,48,.025) 0 1px, transparent 1px 36px),
		repeating-linear-gradient(90deg, rgba(28,18,48,.025) 0 1px, transparent 1px 36px);
	mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
	pointer-events: none;
	opacity: .5;
}

/* Recolor the existing orbs as soft ambient blobs */
.hero-fx { z-index: 1; opacity: .65; mix-blend-mode: multiply; }
.hero-orb {
	filter: blur(60px);
	opacity: .35 !important;
}
.hero-orb-1 { background: radial-gradient(circle, var(--v2-violet) 0%, transparent 70%) !important; }
.hero-orb-2 { background: radial-gradient(circle, var(--tertiary-color) 0%, transparent 70%) !important; }
.hero-orb-3 { background: radial-gradient(circle, var(--v2-coral) 0%, transparent 70%) !important; opacity: .22 !important; }

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

.hero-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5rem !important;
	margin-bottom: 1.4rem;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: var(--v2-paper) !important;
	color: var(--v2-violet-deep) !important;
	border: 1px solid var(--v2-line-strong) !important;
	padding: .42rem .85rem !important;
	border-radius: var(--v2-radius-pill) !important;
	font-size: .78rem !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	box-shadow: var(--v2-shadow-1);
	backdrop-filter: none !important;
}
.hero-badge i { color: var(--v2-violet); font-size: .8rem; }

.hero-title.text-white,
.hero-title {
	font-family: var(--v2-display) !important;
	color: var(--v2-ink) !important;
	font-weight: 400 !important;
	font-size: clamp(2.4rem, 5.6vw, 4.6rem) !important;
	line-height: 1.02 !important;
	letter-spacing: -.035em !important;
	margin: 0 auto 1.2rem !important;
	max-width: 22ch;
	font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 420;
	text-shadow: none !important;
}
.hero-title em,
.hero-title i {
	font-style: italic;
	color: var(--v2-violet-deep);
	font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380;
}

.hero-subtitle {
	font-family: var(--v2-body) !important;
	color: var(--v2-ink-soft) !important;
	font-size: clamp(1.02rem, 1.3vw, 1.18rem) !important;
	line-height: 1.55 !important;
	max-width: 56ch;
	margin: 0 auto 2rem !important;
	font-weight: 400 !important;
}

.hero .cta-buttons {
	margin-top: .5rem !important;
}

.hero .cta-buttons .cta {
	padding: .9rem 1.6rem !important;
	font-size: 1rem !important;
	min-width: 180px;
}

.hero-underline {
	display: none !important;
}

/* ------------ 6. Trust bar ----------------------------------- */
.trust-bar {
	background: var(--v2-paper) !important;
	border-top: 1px solid var(--v2-line);
	border-bottom: 1px solid var(--v2-line);
	padding: 1.6rem 0 !important;
	margin: 0 !important;
}
.trust-bar .container > div,
.trust-bar [class*="d-flex"] {
	gap: 2.5rem !important;
}
.trust-bar [class*="trust-item"],
.trust-bar > .container > .d-flex > div {
	color: var(--v2-ink-soft) !important;
	font-weight: 500;
	font-size: .9rem;
}
.trust-bar i { color: var(--v2-violet); }

/* ------------ 7. Section frame ------------------------------- */
.featured-edd-plugins,
.featured-categories,
.featured-new-arrivals,
.why-wpsani,
.guides-highlights,
.contact-us-banner {
	padding: clamp(3rem, 7vw, 5.5rem) 0 !important;
	background: transparent !important;
}

.featured-categories,
.guides-highlights {
	background: var(--v2-paper) !important;
	border-top: 1px solid var(--v2-line);
	border-bottom: 1px solid var(--v2-line);
}

/* Section headers (h2 + lead) */
section h2,
section .section-title {
	font-family: var(--v2-display);
	font-size: clamp(1.85rem, 3.4vw, 2.8rem);
	font-weight: 450;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: var(--v2-ink);
	margin-bottom: .65rem;
	font-variation-settings: "opsz" 96, "SOFT" 50;
}

section h2 + p,
section .section-lead {
	color: var(--v2-ink-soft);
	font-size: 1.05rem;
	max-width: 60ch;
}

/* ------------ 8. Plugin card (.pc-*) ------------------------- */
.plugin-card {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	overflow: hidden;
	box-shadow: var(--v2-shadow-1);
	transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), border-color .35s var(--v2-ease);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.plugin-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--v2-shadow-3);
	border-color: var(--v2-line-strong) !important;
}

.pc-accent-bar {
	height: 3px !important;
	background: linear-gradient(90deg, var(--v2-violet) 0%, var(--v2-violet-deep) 50%, var(--v2-coral) 100%) !important;
	opacity: .85;
}

.pc-image-wrap {
	background: linear-gradient(180deg, var(--v2-violet-wash) 0%, var(--v2-cream-2) 100%) !important;
	position: relative;
	overflow: hidden;
}
.pc-image {
	transition: transform .6s var(--v2-ease);
}
.pc-image img {
	object-position: top center;
}
.plugin-card:hover .pc-image {
	transform: scale(1.04);
}

.pc-badges {
	display: flex;
	gap: .35rem;
	padding: .9rem !important;
}
.pc-badges .pc-badge,
.pc-badge-new,
.pc-badge-free,
.pc-badge-premium,
.pc-badge-sale {
	font-family: var(--v2-body);
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3rem .65rem !important;
	border-radius: var(--v2-radius-pill) !important;
	box-shadow: var(--v2-shadow-1);
	border: 0 !important;
}
.pc-badge-new { background: var(--v2-violet) !important; color: var(--v2-cream) !important; }
.pc-badge-free { background: var(--v2-mint) !important; color: var(--v2-cream) !important; }
.pc-badge-premium { background: var(--v2-ink) !important; color: var(--v2-cream) !important; }
.pc-badge-sale { background: var(--v2-coral) !important; color: var(--v2-cream) !important; }

.pc-body {
	padding: 1.4rem 1.4rem 0 !important;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	flex-grow: 1;
}

.pc-title-link h3,
.pc-title-link {
	font-family: var(--v2-display) !important;
	font-size: 1.32rem !important;
	font-weight: 550 !important;
	line-height: 1.18 !important;
	letter-spacing: -.018em !important;
	color: var(--v2-ink) !important;
	margin: 0 !important;
	font-variation-settings: "opsz" 24, "SOFT" 60;
}
.pc-title-link:hover h3,
.pc-title-link:hover { color: var(--v2-violet-deep) !important; }

.pc-rating {
	color: var(--v2-amber) !important;
	font-size: .85rem !important;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.pc-rating .rating-count,
.pc-rating-count {
	color: var(--v2-ink-soft) !important;
	font-weight: 500;
}

.pc-excerpt {
	color: var(--v2-ink-soft) !important;
	font-size: .92rem !important;
	line-height: 1.55 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pc-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	padding: 1.2rem 1.4rem 1.4rem !important;
	margin-top: auto;
	border-top: 1px dashed var(--v2-line);
}

.pc-price {
	font-family: var(--v2-display) !important;
	font-size: 1.45rem !important;
	font-weight: 600 !important;
	color: var(--v2-ink) !important;
	letter-spacing: -.02em !important;
	font-variation-settings: "opsz" 24;
}

.pc-action {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
}
.pc-btn-primary,
.pc-btn-secondary,
.plugin-card a.edd-submit,
.plugin-card button.edd-submit,
.plugin-card .pc-btn {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border: 0 !important;
	border-radius: var(--v2-radius-pill) !important;
	padding: .55rem 1.15rem !important;
	font-size: .87rem !important;
	font-weight: 600 !important;
	letter-spacing: -.005em !important;
	display: inline-flex !important;
	align-items: center;
	gap: .35rem;
	box-shadow: var(--v2-shadow-1);
	transition: transform .25s var(--v2-ease), background .25s var(--v2-ease), box-shadow .25s var(--v2-ease);
	white-space: nowrap;
	min-width: auto !important;
	width: auto !important;
	text-decoration: none !important;
}
.pc-btn-primary:hover,
.pc-btn-secondary:hover,
.plugin-card a.edd-submit:hover,
.plugin-card button.edd-submit:hover,
.plugin-card .pc-btn:hover {
	background: var(--v2-violet) !important;
	transform: translateY(-2px);
	box-shadow: var(--v2-shadow-2);
	color: var(--v2-cream) !important;
}

/* ------------ 9. Featured plugins carousel ------------------- */
.swiper-featured-plugins,
.swiper-new-arrivals {
	padding: 1rem .25rem 3rem !important;
}
.swiper-pagination-bullet {
	background: var(--v2-line-strong) !important;
	opacity: 1 !important;
	width: 22px !important; height: 4px !important;
	border-radius: 2px !important;
	transition: background .2s, width .2s;
}
.swiper-pagination-bullet-active {
	background: var(--v2-violet) !important;
	width: 36px !important;
}
.swiper-button-next,
.swiper-button-prev {
	width: 44px !important;
	height: 44px !important;
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line-strong) !important;
	border-radius: 50% !important;
	box-shadow: var(--v2-shadow-1);
	color: var(--v2-ink) !important;
	transition: transform .25s var(--v2-ease), background .25s var(--v2-ease);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	transform: scale(1.06);
}
.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 1rem !important;
	font-weight: 700 !important;
}

/* ------------ 10. Featured categories ------------------------ */
.featured-categories .category-card-v2,
.category-card,
.category-card-v2 {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.6rem !important;
	transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), border-color .35s var(--v2-ease);
	box-shadow: var(--v2-shadow-1);
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
	position: relative;
	overflow: hidden;
}
.category-card-v2::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 60% at 100% 0%, var(--v2-violet-wash), transparent 60%);
	opacity: 0;
	transition: opacity .4s var(--v2-ease);
	pointer-events: none;
}
.category-card-v2:hover {
	transform: translateY(-6px);
	border-color: var(--v2-violet) !important;
	box-shadow: var(--v2-shadow-3);
}
.category-card-v2:hover::before { opacity: 1; }

.cat-icon-wrap {
	width: 58px !important;
	height: 58px !important;
	border-radius: 14px !important;
	display: grid !important;
	place-items: center;
	background: var(--v2-violet-wash) !important;
	color: var(--v2-violet-deep);
}
.cat-icon-wrap i,
.cat-icon-wrap svg { color: var(--v2-violet-deep) !important; font-size: 1.5rem; }

.category-card-v2 .cat-body h3 {
	font-family: var(--v2-display) !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	margin-bottom: .35rem !important;
	letter-spacing: -.018em;
}
.category-card-v2 .cat-body p {
	color: var(--v2-ink-soft) !important;
	font-size: .92rem !important;
	line-height: 1.5;
	margin: 0;
}
.category-card-v2 .cat-footer,
.category-card-v2 .cat-count {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: auto;
	padding-top: .7rem;
	border-top: 1px dashed var(--v2-line);
	font-size: .85rem;
	color: var(--v2-ink-soft);
}
.category-card-v2 .cat-footer .arrow,
.category-card-v2 .cat-arrow {
	color: var(--v2-violet);
	transition: transform .3s var(--v2-ease);
	font-weight: 600;
}
.category-card-v2:hover .cat-arrow,
.category-card-v2:hover .cat-footer .arrow { transform: translateX(4px); }

/* ------------ 11. Why-wpsani ---------------------------------- */
.why-wpsani {
	position: relative;
}
.why-wpsani h2 { color: var(--v2-ink) !important; }
.why-card {
	background: var(--v2-paper);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius-lg);
	padding: 1.8rem !important;
	transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease);
	height: 100%;
}
.why-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--v2-shadow-2);
}
.why-icon {
	width: 56px !important; height: 56px !important;
	border-radius: 14px !important;
	background: var(--v2-violet-soft) !important;
	color: var(--v2-violet-deep) !important;
	display: grid !important;
	place-items: center;
	margin-bottom: 1.1rem;
	font-size: 1.4rem;
}
.why-card h4 {
	font-family: var(--v2-display);
	font-size: 1.18rem !important;
	font-weight: 600;
	letter-spacing: -.015em;
	margin-bottom: .45rem !important;
	color: var(--v2-ink) !important;
}
.why-card p {
	color: var(--v2-ink-soft) !important;
	font-size: .94rem;
	line-height: 1.55;
	margin: 0;
}

/* ------------ 12. Guides highlights / .guide-card ------------- */
.guides-highlights .guide-card,
.guide-card {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.4rem !important;
	transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), border-color .35s var(--v2-ease);
	box-shadow: var(--v2-shadow-1);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
.guide-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--v2-shadow-3);
	border-color: var(--v2-violet) !important;
}
.guide-meta,
.guide-card .meta {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .76rem;
	color: var(--v2-ink-mute);
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.guide-badge,
.guide-card .badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem !important;
	border-radius: var(--v2-radius-pill) !important;
	background: var(--v2-violet-soft) !important;
	color: var(--v2-violet-deep) !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 0 !important;
}
.guide-badge-new { background: var(--v2-mint-soft) !important; color: var(--v2-mint) !important; }
.guide-title,
.guide-card h2,
.guide-card h3 {
	font-family: var(--v2-display) !important;
	font-size: 1.22rem !important;
	font-weight: 600 !important;
	line-height: 1.18 !important;
	letter-spacing: -.018em !important;
	color: var(--v2-ink) !important;
	margin: 0;
	font-variation-settings: "opsz" 24, "SOFT" 50;
}
.guide-card a:hover .guide-title,
.guide-card:hover h2,
.guide-card:hover h3 { color: var(--v2-violet-deep) !important; }

.guide-excerpt {
	color: var(--v2-ink-soft) !important;
	font-size: .92rem !important;
	line-height: 1.55;
	flex-grow: 1;
}

.guide-card .read-more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--v2-violet-deep) !important;
	font-weight: 600;
	font-size: .9rem;
	margin-top: auto;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	width: fit-content;
}
/* CTA-primary buttons inside guide cards: render as proper button */
.guide-card .cta.cta-primary {
	display: flex !important;
	width: 100% !important;
	justify-content: center !important;
	border-bottom: 0 !important;
	padding: .72rem 1rem !important;
	border-radius: var(--v2-radius-pill) !important;
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	font-weight: 600;
	margin-top: auto;
	text-align: center;
	width: fit-content;
}
.guide-card .cta.cta-primary:hover {
	background: var(--v2-violet-darker) !important;
	color: var(--v2-cream) !important;
	transform: translateY(-2px);
}

/* ------------ 13. Contact banner ----------------------------- */
.contact-us-banner {
	background:
		radial-gradient(60% 80% at 0% 100%, var(--v2-violet-wash), transparent 65%),
		radial-gradient(60% 80% at 100% 0%, var(--v2-cream-2), transparent 70%),
		var(--v2-cream) !important;
	border-top: 1px solid var(--v2-line);
}
/* Text colors: contact section uses light background — reset white text from old style.css */
.wpsani-cf7 label { color: var(--v2-ink) !important; }
.contact-us-banner h2 { color: var(--v2-ink) !important; }
.contact-us-banner .fs-5 { color: var(--v2-ink-soft) !important; }
.contact-feature-card h5 { color: var(--v2-ink) !important; }
.contact-feature-card p { color: var(--v2-ink-soft) !important; }
.contact-eyebrow { color: var(--v2-violet-deep) !important; }
.contact-us-banner .section-eyebrow { color: var(--v2-violet-deep) !important; }
.contact-feature-card {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.4rem !important;
	box-shadow: var(--v2-shadow-1);
	transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}
.contact-feature-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--v2-shadow-2);
}
.contact-feature-card i {
	color: var(--v2-violet) !important;
	font-size: 1.4rem;
}

/* Contact form fields */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea,
.wpcf7-form select {
	font-family: var(--v2-body) !important;
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line-strong) !important;
	border-radius: var(--v2-radius-sm) !important;
	padding: .8rem 1rem !important;
	font-size: 1rem !important;
	color: var(--v2-ink) !important;
	transition: border-color .2s var(--v2-ease), box-shadow .2s var(--v2-ease);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	border-color: var(--v2-violet) !important;
	box-shadow: 0 0 0 4px var(--v2-violet-glow) !important;
	outline: 0 !important;
}
.wpcf7-form input[type=submit] {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border: 0 !important;
	border-radius: var(--v2-radius-pill) !important;
	padding: .9rem 1.8rem !important;
	font-weight: 600 !important;
	cursor: pointer;
}

/* ------------ 14. Footer (.v2) ------------------------------- */
footer.v2 {
	background: var(--v2-violet-darker) !important;
	color: rgba(255, 255, 255, .82) !important;
	padding: 4rem 0 1.6rem !important;
	margin-top: 3rem;
	position: relative;
	overflow: hidden;
}
footer.v2::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 70% at 100% 0%, rgba(155, 135, 245, .25), transparent 60%),
		radial-gradient(40% 60% at 0% 100%, rgba(225, 91, 77, .12), transparent 65%);
	pointer-events: none;
}
footer.v2 > * { position: relative; z-index: 1; }

footer.v2 .top-footer {
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	padding-bottom: 2rem;
	margin-bottom: 1.6rem;
}
footer.v2 a:not(.iubenda-embed) {
	color: rgba(255, 255, 255, .82) !important;
	transition: color .2s var(--v2-ease);
}
footer.v2 a:not(.iubenda-embed):hover { color: var(--v2-cream) !important; }
footer.v2 .footer-link {
	font-weight: 500;
	font-size: .92rem;
}
footer.v2 .footer-nav { gap: 2rem !important; }
footer.v2 .bottom-footer {
	font-size: .85rem;
	color: rgba(255, 255, 255, .55) !important;
}

/* ------------ 15. Listing page (tpl-all-plugins) ------------- */
.heroBox {
	background: linear-gradient(140deg, var(--v2-violet-wash) 0%, var(--v2-cream) 70%) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4vw, 2.6rem) !important;
	margin-top: 2rem !important;
	margin-bottom: 1.8rem !important;
	position: relative;
	overflow: hidden;
}
.heroBox::after {
	content: "";
	position: absolute;
	right: -120px; top: -120px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--v2-violet-soft) 0%, transparent 70%);
	pointer-events: none;
	opacity: .8;
}
.heroBox > * { position: relative; z-index: 1; }
.heroBox h1 {
	font-family: var(--v2-display) !important;
	font-size: clamp(2.1rem, 4.5vw, 3.4rem) !important;
	font-weight: 450 !important;
	line-height: 1.04 !important;
	letter-spacing: -.028em !important;
	margin: 0 0 .8rem !important;
	max-width: 22ch;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.heroLead {
	font-size: 1.08rem !important;
	color: var(--v2-ink-soft) !important;
	max-width: 55ch;
	margin-bottom: 1rem !important;
}
.plugins-intro {
	font-size: .96rem;
	color: var(--v2-ink-soft);
	max-width: 65ch;
}

.plugins-browse-cats {
	margin-top: 1.5rem !important;
}
.hubTabs {
	display: flex !important;
	flex-wrap: wrap;
	gap: .55rem !important;
	background: var(--v2-paper);
	padding: .55rem;
	border-radius: var(--v2-radius-pill);
	border: 1px solid var(--v2-line);
	width: fit-content;
	max-width: 100%;
	box-shadow: var(--v2-shadow-1);
}
.hubTab {
	display: inline-flex !important;
	align-items: center;
	gap: .45rem;
	padding: .55rem 1rem !important;
	border-radius: var(--v2-radius-pill) !important;
	font-size: .9rem !important;
	font-weight: 600;
	color: var(--v2-ink-soft) !important;
	border: 0 !important;
	background: transparent !important;
	transition: all .25s var(--v2-ease);
	text-decoration: none !important;
}
.hubTab:hover { background: var(--v2-violet-wash) !important; color: var(--v2-violet-deep) !important; }
.hubTab.is-active {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	box-shadow: var(--v2-shadow-1);
}
.hubBadge {
	background: rgba(255, 255, 255, .18);
	color: inherit !important;
	padding: 1px 8px !important;
	border-radius: var(--v2-radius-pill);
	font-size: .72rem !important;
	font-weight: 700;
}
.hubTab:not(.is-active) .hubBadge { background: var(--v2-violet-soft); color: var(--v2-violet-deep) !important; }

#plugin-list { margin-top: 2rem !important; }

/* Pagination */
.page-numbers,
nav.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .8rem;
	border-radius: var(--v2-radius-pill) !important;
	font-weight: 600;
	font-size: .9rem;
	color: var(--v2-ink) !important;
	background: var(--v2-paper);
	border: 1px solid var(--v2-line);
	margin: 0 3px;
	transition: all .25s var(--v2-ease);
	text-decoration: none;
}
.page-numbers:hover {
	background: var(--v2-violet-soft);
	border-color: var(--v2-violet);
}
.page-numbers.current {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border-color: var(--v2-ink) !important;
}

/* Topic grid (categories at bottom of listing) */
.topicGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin-top: 1.5rem;
}
@media (max-width: 992px) { .topicGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .topicGrid { grid-template-columns: 1fr; } }

.topicCard {
	display: block;
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius) !important;
	padding: 1.4rem !important;
	text-decoration: none !important;
	color: inherit;
	transition: transform .3s var(--v2-ease), border-color .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
	position: relative;
}
.topicCard:hover {
	border-color: var(--v2-violet) !important;
	transform: translateY(-3px);
	box-shadow: var(--v2-shadow-2);
}
.topicCard::after {
	content: "→";
	position: absolute;
	right: 1.2rem; top: 1.4rem;
	color: var(--v2-violet);
	transition: transform .3s var(--v2-ease);
	font-size: 1.05rem;
}
.topicCard:hover::after { transform: translateX(4px); }
.topicTitle {
	font-family: var(--v2-display) !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: var(--v2-ink) !important;
	margin: 0 0 .35rem !important;
	letter-spacing: -.015em;
}
.topicMeta {
	color: var(--v2-ink-mute) !important;
	font-size: .82rem;
	margin: 0;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ------------ 16. Single download (sdl-*) -------------------- */
body.single-download #single-download {
	max-width: 1200px !important;
	padding: 1.5rem 1.4rem 4rem !important;
}

/* Hero card */
.sdl-hero {
	margin-top: 1rem !important;
	margin-bottom: 2.5rem !important;
}

.sdl-hero__card {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: clamp(1.6rem, 3.5vw, 2.8rem) !important;
	box-shadow: var(--v2-shadow-2);
	position: relative;
	overflow: hidden;
}
.sdl-hero__card--free {
	background:
		radial-gradient(60% 70% at 100% 0%, var(--v2-mint-soft), transparent 65%),
		var(--v2-paper) !important;
}
.sdl-hero__card--pro {
	background:
		radial-gradient(60% 70% at 100% 0%, var(--v2-violet-wash), transparent 65%),
		var(--v2-paper) !important;
	border-color: var(--v2-violet-soft) !important;
}
.sdl-hero__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(28,18,48,.018) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, rgba(28,18,48,.018) 0 1px, transparent 1px 24px);
	mask-image: radial-gradient(ellipse at 100% 0%, black 0%, transparent 60%);
	pointer-events: none;
}

.sdl-hero__grid {
	position: relative;
	z-index: 1;
}

.sdl-proof {
	display: flex !important;
	flex-wrap: wrap;
	gap: .8rem 1.2rem !important;
	margin-bottom: 1.1rem !important;
}
.sdl-rating {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--v2-amber) !important;
	font-weight: 600;
}
.sdl-rating-text {
	color: var(--v2-ink-soft) !important;
	font-weight: 500;
}
.sdl-installs {
	color: var(--v2-ink-soft) !important;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.sdl-installs i { color: var(--v2-violet); }

.sdl-title {
	font-family: var(--v2-display) !important;
	font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
	font-weight: 460 !important;
	line-height: 1.04 !important;
	letter-spacing: -.028em !important;
	color: var(--v2-ink) !important;
	margin: 0 0 .9rem !important;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.sdl-tagline {
	font-family: var(--v2-body) !important;
	font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
	color: var(--v2-ink-soft) !important;
	line-height: 1.5 !important;
	margin: 0 0 1.4rem !important;
	max-width: 56ch;
}

.sdl-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 1.6rem;
	display: grid;
	gap: .55rem;
}
.sdl-bullets li {
	position: relative;
	padding-left: 1.65rem;
	color: var(--v2-ink-2);
	font-size: .95rem;
	line-height: 1.5;
}
.sdl-bullets li::before {
	content: "";
	position: absolute;
	left: 0; top: .42em;
	width: 1.05rem; height: 1.05rem;
	border-radius: 50%;
	background: var(--v2-violet-soft);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234B3A82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.6 6.6 11.5 12.5 5'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;
}

/* Price block */
.sdl-price {
	display: flex !important;
	align-items: baseline;
	gap: .85rem !important;
	margin-bottom: .55rem !important;
}
.sdl-price-now {
	font-family: var(--v2-display) !important;
	font-size: clamp(2.2rem, 4vw, 3rem) !important;
	font-weight: 600 !important;
	color: var(--v2-ink) !important;
	line-height: 1 !important;
	letter-spacing: -.025em;
	font-variation-settings: "opsz" 96;
}
.sdl-price-old {
	font-family: var(--v2-display) !important;
	font-size: 1.4rem !important;
	color: var(--v2-ink-mute) !important;
	text-decoration: line-through !important;
	text-decoration-thickness: 1.5px !important;
	font-weight: 400 !important;
}
.sdl-price-ctx {
	display: flex !important;
	flex-wrap: wrap;
	gap: .5rem .9rem !important;
	color: var(--v2-ink-soft) !important;
	font-size: .88rem !important;
	margin-bottom: 1.4rem !important;
}
.sdl-price-ctx__dot {
	display: inline-flex; align-items: center; gap: .35rem;
}
.sdl-price-ctx__dot::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--v2-violet); display: inline-block;
}

/* CTA buttons in hero */
.sdl-cta {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin-bottom: 1.2rem;
}
.sdl-cta button.edd-add-to-cart,
.sdl-cta input.edd-add-to-cart,
.sdl-cta a.edd-submit {
	width: 100% !important;
	padding: 1rem 1.4rem !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	border-radius: var(--v2-radius) !important;
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border: 0 !important;
	box-shadow: var(--v2-shadow-2);
	letter-spacing: -.005em;
}
.sdl-cta button.edd-add-to-cart:hover,
.sdl-cta input.edd-add-to-cart:hover,
.sdl-cta a.edd-submit:hover {
	background: var(--v2-violet-darker) !important;
	transform: translateY(-2px);
	box-shadow: var(--v2-shadow-violet);
}

.sdl-free-fine {
	color: var(--v2-ink-mute) !important;
	font-size: .82rem !important;
	margin: 0 !important;
	text-align: center;
}

.sdl-pro-trust {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .7rem;
	font-size: .83rem;
	font-weight: 700;
	color: var(--v2-ink-soft);
	background: var(--v2-paper);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius-pill);
	padding: .4rem .9rem;
	margin-bottom: 1rem;
}
.sdl-pro-trust__dot {
	display: inline-flex; align-items: center; gap: .35rem;
	color: var(--v2-line-strong);
}
.sdl-pro-trust__dot i { color: var(--v2-mint); }

.sdl-upsell {
	background: var(--v2-violet-wash) !important;
	border: 1px dashed var(--v2-violet) !important;
	border-radius: var(--v2-radius) !important;
	padding: 1rem 1.1rem !important;
	margin-top: 1rem;
	font-size: .9rem;
	color: var(--v2-violet-darker);
}
.sdl-upsell a { color: var(--v2-violet-deep); font-weight: 700; }

.sdl-plugin-img-wrap {
	background: linear-gradient(160deg, var(--v2-violet-wash) 0%, var(--v2-cream-2) 100%) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.8rem !important;
	border: 1px solid var(--v2-line);
	display: grid;
	place-items: center;
	min-height: 260px;
}
.sdl-plugin-img {
	max-width: 100%;
	filter: drop-shadow(0 24px 40px rgba(28, 18, 48, .14));
}

.sdl-help-link {
	color: var(--v2-violet-deep) !important;
	font-weight: 600;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	width: fit-content;
}

/* Section panels in single-download */
.sdl-spec-panel,
.sdl-faq-panel,
.sdl-install-panel,
.sdl-cl-panel {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: clamp(1.4rem, 3vw, 2.2rem) !important;
	margin: 1.5rem 0 !important;
	box-shadow: var(--v2-shadow-1);
}

.sdl-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.4rem !important;
}
@media (min-width: 768px) {
	.sdl-spec-grid { grid-template-columns: repeat(3, 1fr); }
}

.sdl-spec-item {
	display: flex !important;
	gap: .9rem !important;
	align-items: center;
	padding: .9rem !important;
	background: var(--v2-cream) !important;
	border-radius: var(--v2-radius) !important;
	border: 1px solid var(--v2-line);
}
.sdl-spec-icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--v2-violet-soft) !important;
	color: var(--v2-violet-deep) !important;
	display: grid; place-items: center;
	flex-shrink: 0;
}
.sdl-spec-label {
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--v2-ink-mute) !important;
	margin-bottom: .15rem;
}
.sdl-spec-val {
	font-family: var(--v2-display);
	font-size: 1.05rem !important;
	font-weight: 600;
	color: var(--v2-ink) !important;
	letter-spacing: -.012em;
}

/* Install steps */
.sdl-install-step {
	display: flex !important;
	gap: 1.1rem !important;
	padding: 1.1rem 0 !important;
	border-bottom: 1px solid var(--v2-line);
}
.sdl-install-step:last-of-type { border-bottom: 0; }
.sdl-install-step__num {
	flex-shrink: 0;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	display: grid; place-items: center;
	font-family: var(--v2-display);
	font-weight: 600;
	font-size: 1rem;
}
.sdl-install-step__body {
	flex: 1;
}
.sdl-install-step__body strong {
	font-family: var(--v2-display);
	font-size: 1.08rem;
	color: var(--v2-ink);
	font-weight: 600;
	display: block;
	margin-bottom: .25rem;
	letter-spacing: -.012em;
}
.sdl-install-step__body p {
	color: var(--v2-ink-soft);
	margin: 0;
	font-size: .94rem;
	line-height: 1.55;
}

/* Changelog */
.sdl-cl-list { list-style: none; padding: 0; margin: 0; }
.sdl-cl-item {
	border-left: 2px solid var(--v2-line);
	padding: 0 0 1.4rem 1.5rem !important;
	position: relative;
}
.sdl-cl-item::before {
	content: "";
	position: absolute;
	left: -7px; top: .25rem;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--v2-paper);
	border: 2px solid var(--v2-line-strong);
}
.sdl-cl-item--latest { border-left-color: var(--v2-violet); }
.sdl-cl-item--latest::before {
	background: var(--v2-violet);
	border-color: var(--v2-violet);
	box-shadow: 0 0 0 4px var(--v2-violet-glow);
}
.sdl-cl-head {
	display: flex !important;
	align-items: center;
	gap: .8rem;
	margin-bottom: .5rem;
}
.sdl-cl-ver {
	font-family: var(--v2-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--v2-ink);
	letter-spacing: -.01em;
}
.sdl-cl-ver--latest { color: var(--v2-violet-deep); }
.sdl-cl-latest-badge {
	background: var(--v2-violet) !important;
	color: var(--v2-cream) !important;
	padding: .15rem .6rem;
	border-radius: var(--v2-radius-pill);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sdl-cl-changes {
	color: var(--v2-ink-soft);
	font-size: .94rem;
	line-height: 1.55;
}

/* Reviews */
.sdl-rev-card {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius) !important;
	padding: 1.3rem !important;
	margin-bottom: 1rem;
	box-shadow: var(--v2-shadow-1);
}
.sdl-rev-card__head {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: .55rem;
}
.sdl-rev-card__av {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--v2-violet-soft);
	color: var(--v2-violet-deep);
	display: grid; place-items: center;
	font-family: var(--v2-display);
	font-weight: 700;
}
.sdl-rev-card__name { font-weight: 600; color: var(--v2-ink); }
.sdl-rev-card__date { color: var(--v2-ink-mute); font-size: .82rem; }
.sdl-rev-card__stars { color: var(--v2-amber); }
.sdl-rev-card__text { color: var(--v2-ink-2); line-height: 1.55; margin: 0; }
.sdl-rev-form-section {
	background: var(--v2-cream-2) !important;
	border: 1px dashed var(--v2-line-strong) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.6rem !important;
	margin-top: 1.6rem;
}
.sdl-rev-form-title {
	font-family: var(--v2-display);
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: .8rem;
}

/* ------------ 17. Hub & guide listing (.heroCard, .grid) ------ */
.bleed.heroBleed,
.heroBleed {
	background:
		radial-gradient(50% 80% at 100% 0%, var(--v2-violet-wash), transparent 60%),
		radial-gradient(60% 90% at 0% 100%, var(--v2-cream-2), transparent 60%),
		var(--v2-cream) !important;
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.8rem, 4vw, 3rem) !important;
	border-bottom: 1px solid var(--v2-line);
}
.bleedInner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1.4rem;
}

.heroCard {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: clamp(1.8rem, 4vw, 2.8rem) !important;
	box-shadow: var(--v2-shadow-2);
	position: relative;
	overflow: hidden;
}
.heroCard::before {
	content: "";
	position: absolute;
	right: -100px; top: -100px;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--v2-violet-soft) 0%, transparent 70%);
	pointer-events: none;
}
.heroCard > * { position: relative; z-index: 1; }
.heroCard h1 {
	font-family: var(--v2-display) !important;
	font-size: clamp(2rem, 4.4vw, 3.2rem) !important;
	font-weight: 450 !important;
	line-height: 1.05 !important;
	letter-spacing: -.028em !important;
	margin: .55rem 0 .8rem !important;
	max-width: 22ch;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.heroCard .subtitle,
.heroCard p {
	color: var(--v2-ink-soft) !important;
	font-size: 1.06rem !important;
	max-width: 56ch;
	margin: 0 0 1.2rem;
	line-height: 1.55;
}
.heroCard .eyebrow,
.heroCard .badge-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--v2-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-violet-deep);
	background: var(--v2-violet-soft);
	padding: .35rem .8rem;
	border-radius: var(--v2-radius-pill);
}

/* Filter row */
.heroCard form,
.heroCard .controls {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.3rem;
}
.field,
.heroCard input[type=text],
.heroCard input[type=search],
.heroCard select {
	font-family: var(--v2-body) !important;
	background: var(--v2-cream) !important;
	border: 1px solid var(--v2-line-strong) !important;
	border-radius: var(--v2-radius) !important;
	padding: .65rem .9rem !important;
	font-size: .95rem !important;
	color: var(--v2-ink) !important;
	min-height: 44px;
}
/* Inputs/selects inside .field: transparent/borderless so only the outer .field shows */
.field input[type=search],
.field input[type=text],
.field select {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-height: unset !important;
	box-shadow: none !important;
}
.heroCard input:focus,
.heroCard select:focus {
	border-color: var(--v2-violet) !important;
	box-shadow: 0 0 0 4px var(--v2-violet-glow) !important;
	outline: 0 !important;
}

/* Card grid */
.grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.3rem !important;
	margin: 2rem 0 !important;
}
@media (max-width: 992px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.grid > .card,
.grid > article.card {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.5rem !important;
	box-shadow: var(--v2-shadow-1);
	display: flex;
	flex-direction: column;
	gap: .8rem;
	transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), border-color .35s var(--v2-ease);
	height: 100%;
}
.grid > .card:hover {
	transform: translateY(-5px);
	box-shadow: var(--v2-shadow-3);
	border-color: var(--v2-violet) !important;
}
.cardTop {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.cardTop h2,
.cardTop h3,
.card h2 a,
.card h3 a {
	font-family: var(--v2-display) !important;
	font-size: 1.22rem !important;
	font-weight: 600 !important;
	line-height: 1.18 !important;
	letter-spacing: -.018em !important;
	color: var(--v2-ink) !important;
	margin: 0;
	font-variation-settings: "opsz" 24, "SOFT" 50;
	text-decoration: none !important;
}
.card a:hover h2,
.card a:hover h3,
.card h2 a:hover,
.card h3 a:hover { color: var(--v2-violet-deep) !important; }

.cardMid,
.card .excerpt,
.card p {
	color: var(--v2-ink-soft) !important;
	font-size: .94rem !important;
	line-height: 1.55 !important;
	flex-grow: 1;
}

.card .meta,
.cardMeta {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	font-size: .76rem;
	color: var(--v2-ink-mute);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: auto;
	padding-top: .5rem;
	border-top: 1px dashed var(--v2-line);
}

.card .badge,
.cardTop .badge {
	display: inline-flex;
	align-items: center;
	padding: .25rem .65rem;
	border-radius: var(--v2-radius-pill);
	background: var(--v2-violet-soft);
	color: var(--v2-violet-deep);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pager {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: .35rem;
	margin: 2rem 0 !important;
}

/* ------------ 18. Single guide / article --------------------- */
body.single-wpsani_guides #main-content,
body.single-wpsani_guides article {
	background: transparent;
}

body.single-wpsani_guides .entry-header,
body.single-wpsani_guides .post-header,
body.single-wpsani_guides .article-hero {
	padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem !important;
}

body.single-wpsani_guides h1,
body.single-wpsani_guides .entry-title {
	font-family: var(--v2-display) !important;
	font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important;
	font-weight: 460 !important;
	line-height: 1.06 !important;
	letter-spacing: -.028em !important;
	color: var(--v2-ink) !important;
	max-width: 24ch;
	margin: .5rem 0 .8rem !important;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}

body.single-wpsani_guides .kicker,
body.single-wpsani_guides .kicker-label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-violet-deep);
	background: var(--v2-violet-soft);
	padding: .35rem .8rem;
	border-radius: var(--v2-radius-pill);
}

body.single-wpsani_guides .post-meta,
body.single-wpsani_guides .meta-items {
	color: var(--v2-ink-mute);
	font-size: .88rem;
	font-weight: 500;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem 1rem;
}

body.single-wpsani_guides .entry-content,
body.single-wpsani_guides article .content,
body.single-wpsani_guides article .post-content {
	font-family: var(--v2-body);
	font-size: 1.06rem;
	line-height: 1.72;
	color: var(--v2-ink-2);
	max-width: 70ch;
}
body.single-wpsani_guides .entry-content > * { margin-top: 1.4rem; margin-bottom: 1.4rem; }
body.single-wpsani_guides .entry-content > :first-child { margin-top: 0; }
body.single-wpsani_guides .entry-content h2 {
	font-family: var(--v2-display);
	font-size: 1.85rem;
	font-weight: 550;
	letter-spacing: -.02em;
	margin-top: 2.6rem !important;
	margin-bottom: 1rem !important;
	color: var(--v2-ink);
	line-height: 1.15;
	font-variation-settings: "opsz" 60;
}
body.single-wpsani_guides .entry-content h3 {
	font-family: var(--v2-display);
	font-size: 1.42rem;
	font-weight: 600;
	letter-spacing: -.018em;
	margin-top: 2rem !important;
	margin-bottom: .7rem !important;
	color: var(--v2-ink);
}
body.single-wpsani_guides .entry-content p { color: var(--v2-ink-2); }
body.single-wpsani_guides .entry-content a {
	color: var(--v2-violet-deep);
	border-bottom: 1.5px solid var(--v2-violet-soft);
	transition: border-color .2s var(--v2-ease);
	text-decoration: none;
}
body.single-wpsani_guides .entry-content a:hover {
	border-bottom-color: var(--v2-violet);
}
body.single-wpsani_guides blockquote {
	border-left: 3px solid var(--v2-violet);
	padding: .6rem 0 .6rem 1.4rem;
	margin: 1.8rem 0;
	font-family: var(--v2-display);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--v2-ink);
	letter-spacing: -.012em;
	line-height: 1.42;
}
body.single-wpsani_guides code,
body.single-wpsani_guides pre {
	font-family: var(--v2-mono);
	font-size: .92em;
	background: var(--v2-violet-wash);
	color: var(--v2-violet-darker);
	border-radius: var(--v2-radius-xs);
	padding: .15em .42em;
	border: 1px solid var(--v2-line);
}
body.single-wpsani_guides pre {
	padding: 1.1rem 1.3rem;
	overflow-x: auto;
	border-radius: var(--v2-radius);
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border-color: var(--v2-ink);
}
body.single-wpsani_guides pre code {
	background: transparent !important;
	color: var(--v2-cream) !important;
	border: 0;
	padding: 0;
}
body.single-wpsani_guides .entry-content ul,
body.single-wpsani_guides .entry-content ol {
	padding-left: 1.4rem;
}
body.single-wpsani_guides .entry-content li { margin-bottom: .55rem; }
body.single-wpsani_guides .entry-content img {
	border-radius: var(--v2-radius);
	box-shadow: var(--v2-shadow-2);
	margin: 1.6rem 0;
}

/* Sidebar callout boxes (ACF valuebox, sidebar, callout) */
.valuebox,
.valuebox-card,
.callout,
.callout-card,
.sidebar-card,
.guide-sidebar-card,
.bridge-box {
	background: var(--v2-paper) !important;
	border: 1px solid var(--v2-line) !important;
	border-left: 3px solid var(--v2-violet) !important;
	border-radius: var(--v2-radius-lg) !important;
	padding: 1.4rem 1.5rem !important;
	margin: 1.8rem 0 !important;
	box-shadow: var(--v2-shadow-1);
}
.valuebox h3,
.callout h3,
.sidebar-card h3,
.bridge-box h3 {
	font-family: var(--v2-display) !important;
	font-size: 1.18rem !important;
	font-weight: 600 !important;
	margin: 0 0 .65rem !important;
	color: var(--v2-ink) !important;
	letter-spacing: -.015em;
}
.valuebox ul,
.sidebar-card ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.valuebox li,
.sidebar-card li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--v2-ink-2);
	margin-bottom: .55rem;
	line-height: 1.55;
}
.valuebox li::before,
.sidebar-card li::before {
	content: "→";
	position: absolute;
	left: 0; top: 0;
	color: var(--v2-violet);
	font-weight: 700;
}
.valuebox .cta,
.callout .cta,
.sidebar-card .cta {
	margin-top: 1rem;
}

/* FAQ */
.faq-section,
.guide-faq,
.sdl-faq-panel {
	margin: 2rem 0;
}
.faq-item,
.faq details,
.guide-faq details,
.sdl-faq-panel details {
	background: var(--v2-paper);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius);
	padding: 1rem 1.2rem;
	margin-bottom: .7rem;
	box-shadow: var(--v2-shadow-1);
	transition: border-color .2s var(--v2-ease);
}
.faq details[open],
.guide-faq details[open],
.sdl-faq-panel details[open] {
	border-color: var(--v2-violet);
}
.faq summary,
.guide-faq summary,
.sdl-faq-panel summary {
	font-family: var(--v2-display);
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--v2-ink);
	cursor: pointer;
	letter-spacing: -.012em;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.faq summary::-webkit-details-marker,
.guide-faq summary::-webkit-details-marker,
.sdl-faq-panel summary::-webkit-details-marker { display: none; }
.faq summary::after,
.guide-faq summary::after,
.sdl-faq-panel summary::after {
	content: "+";
	color: var(--v2-violet);
	font-size: 1.4rem;
	font-weight: 400;
	transition: transform .25s var(--v2-ease);
	flex-shrink: 0;
}
.faq details[open] summary::after,
.guide-faq details[open] summary::after,
.sdl-faq-panel details[open] summary::after { transform: rotate(45deg); }

/* TOC (table of contents) */
.toc,
.guide-toc {
	background: var(--v2-violet-wash);
	border: 1px solid var(--v2-violet-soft);
	border-radius: var(--v2-radius);
	padding: 1.1rem 1.3rem;
	margin: 1.6rem 0;
}
.toc h4,
.guide-toc h4 {
	font-family: var(--v2-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-violet-deep);
	margin: 0 0 .7rem;
}
.toc ol,
.toc ul,
.guide-toc ol,
.guide-toc ul {
	margin: 0;
	padding-left: 1.1rem;
}
.toc a,
.guide-toc a {
	color: var(--v2-ink-2);
	border: 0;
}
.toc a:hover,
.guide-toc a:hover { color: var(--v2-violet-deep); }

/* Sources */
.sources,
.guide-sources {
	background: var(--v2-cream-2);
	border: 1px dashed var(--v2-line-strong);
	border-radius: var(--v2-radius);
	padding: 1.1rem 1.3rem;
	margin: 1.6rem 0;
	font-size: .9rem;
}
.sources h4,
.guide-sources h4 {
	font-family: var(--v2-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-ink-soft);
	margin: 0 0 .55rem;
}

/* ------------ 19. Animations --------------------------------- */
@keyframes v2-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
.hero .hero-badges,
.hero h1.hero-title,
.hero .hero-subtitle,
.hero .cta-buttons {
	animation: v2-fade-up .8s var(--v2-ease-out) both;
}
.hero h1.hero-title { animation-delay: .08s; }
.hero .hero-subtitle { animation-delay: .18s; }
.hero .cta-buttons { animation-delay: .28s; }

.heroBox h1,
.heroCard h1 {
	animation: v2-fade-up .8s var(--v2-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ------------ 20. Mobile refinements ------------------------- */
@media (max-width: 767px) {
	body { font-size: 16px; }
	.hero { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
	.hero-title { font-size: 2.2rem !important; }
	.hero-subtitle { font-size: 1rem !important; }
	.hero .cta-buttons { flex-direction: column !important; align-items: stretch !important; }
	.hero .cta-buttons .cta { width: 100% !important; }
	.heroBox, .heroCard { padding: 1.4rem !important; }
	.sdl-hero__card { padding: 1.4rem !important; }
	.sdl-title { font-size: 1.9rem !important; }
	.sdl-price-now { font-size: 2rem !important; }
	.pc-image { height: 180px !important; }
	.pc-body { padding: 1.1rem 1.1rem 0 !important; }
	.pc-footer { padding: 1rem 1.1rem 1.1rem !important; }
	footer.v2 { padding-top: 2.5rem !important; }
}

/* ------------ 21. Print -------------------------------------- */
@media print {
	header, footer, .hero-fx, .swiper-button-next, .swiper-button-prev { display: none !important; }
	body { background: white !important; color: black !important; }
}

/* =============================================================
   22. SPECIFICITY + MOBILE SAFETY OVERRIDES
   The original style.css uses ID-prefixed selectors (#homepage,
   #featured-edd-plugins, #plugin-list) that beat plain class
   selectors. We boost specificity here to match.
   Also: hard mobile safety net to prevent any horizontal overflow
   (Fraunces' "ch" unit is wider than typical sans-serifs, so the
   22ch max-widths used above can overflow narrow viewports).
   ============================================================= */

/* 22a. Document-level overflow safety */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100vw; }

/* 22b. Universal title wrap safety (Fraunces ch units run wide) */
.hero-title,
.heroCard h1,
.heroBox h1,
.sdl-title,
body.single-wpsani_guides h1,
body.single-wpsani_guides .entry-title,
section h2,
section .section-title,
.pc-title-link h3,
.pc-title-link,
.guide-title,
.card h2,
.card h3,
.topicTitle {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

/* 22c. Homepage hero — beat #homepage .hero {…} from original CSS */
#homepage .hero,
body.home .hero {
	background: var(--v2-cream) !important;
	overflow: hidden;
	padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 7vw, 5rem) !important;
	border-bottom: 1px solid var(--v2-line);
}
#homepage .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 60% at 85% 10%, rgba(110, 89, 165, .22), transparent 60%),
		radial-gradient(40% 50% at 10% 100%, rgba(155, 135, 245, .14), transparent 65%);
	background-size: auto;
	mask-image: none;
	opacity: 1;
	pointer-events: none;
}
#homepage .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(28,18,48,.025) 0 1px, transparent 1px 36px),
		repeating-linear-gradient(90deg, rgba(28,18,48,.025) 0 1px, transparent 1px 36px);
	background-size: auto;
	mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
	filter: none;
	opacity: .5;
	pointer-events: none;
	transform: none;
}

#homepage .hero h1.hero-title {
	font-family: var(--v2-display) !important;
	color: var(--v2-ink) !important;
	font-weight: 400 !important;
	font-size: clamp(2rem, 6.4vw, 4.4rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -.03em !important;
	margin: 0 auto 1.2rem !important;
	max-width: 100%;
	font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 420;
	text-shadow: none !important;
	text-wrap: balance;
	overflow-wrap: break-word;
}
#homepage .hero h1.hero-title em,
#homepage .hero h1.hero-title i {
	font-style: italic;
	color: var(--v2-violet-deep);
}
#homepage .hero .hero-subtitle {
	font-family: var(--v2-body) !important;
	color: var(--v2-ink-soft) !important;
	font-size: clamp(.98rem, 1.3vw, 1.18rem) !important;
	line-height: 1.55 !important;
	max-width: 56ch;
	margin: 0 auto 2rem !important;
	font-weight: 400 !important;
	text-shadow: none !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
}

#homepage .hero .hero-badges {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem !important;
	margin-bottom: 1.4rem !important;
	max-width: 100%;
}
#homepage .hero .hero-badge {
	background: var(--v2-paper) !important;
	color: var(--v2-violet-deep) !important;
	border: 1px solid var(--v2-line-strong) !important;
	padding: .42rem .85rem !important;
	border-radius: var(--v2-radius-pill) !important;
	font-size: .76rem !important;
	font-weight: 600 !important;
	box-shadow: var(--v2-shadow-1) !important;
	backdrop-filter: none !important;
	white-space: normal;
}
#homepage .hero .hero-badge i { color: var(--v2-violet) !important; }

#homepage .hero .hero-underline { display: none !important; }

/* `.animated-logo` and `.accent-gradient` are spans INSIDE the h1
   (WPSani / WordPress Plugins) — keep them visible, restyle. */
#homepage .hero .hero-title .animated-logo {
	display: inline !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--v2-ink) !important;
	font-family: var(--v2-display) !important;
	font-weight: 500 !important;
	font-style: normal !important;
	letter-spacing: -.03em;
	animation: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
#homepage .hero .hero-title .accent-gradient {
	display: inline !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--v2-violet-deep) !important;
	font-family: var(--v2-display) !important;
	font-style: italic !important;
	font-weight: 450 !important;
	font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 420;
	text-shadow: none !important;
}

#homepage .hero .cta-buttons {
	max-width: 100%;
	flex-wrap: wrap !important;
}
#homepage .hero .cta-buttons .cta {
	width: auto !important;
	min-width: 0;
}
#homepage .hero .cta-buttons .cta-primary {
	background: var(--v2-ink) !important;
	color: var(--v2-cream) !important;
	border: 1px solid var(--v2-ink) !important;
	box-shadow: var(--v2-shadow-2) !important;
}
#homepage .hero .cta-buttons .cta-primary::before,
#homepage .hero .cta-buttons .cta-primary::after { display: none !important; }
#homepage .hero .cta-buttons .cta-primary:hover {
	background: var(--v2-violet-darker) !important;
	border-color: var(--v2-violet-darker) !important;
}
#homepage .hero .cta-buttons .cta-tertiary {
	background: var(--v2-violet-soft) !important;
	color: var(--v2-violet-deep) !important;
	border: 1px solid transparent !important;
}
#homepage .hero .cta-buttons .cta-tertiary:hover {
	background: var(--v2-violet) !important;
	color: var(--v2-cream) !important;
}

/* 22d. Featured plugins section (ID-scoped in original) */
#featured-edd-plugins.featured-edd-plugins,
#featured-edd-plugins {
	background: transparent !important;
	padding: clamp(3rem, 7vw, 5.5rem) 0 !important;
}
#featured-edd-plugins .container { max-width: 1240px; }

/* 22e. Plugin listing — image height tighter, card stacks cleanly */
#plugin-list { margin-top: 2rem !important; }
#plugin-list .pc-image { height: 220px !important; }

/* 22f. Header — tighter on mobile, bigger on desktop */
.main-header {
	padding: 14px clamp(12px, 4vw, 24px) !important;
	gap: .8rem;
}
@media (max-width: 575px) {
	.main-header {
		padding: 10px 14px !important;
		gap: .5rem;
	}
	.logo-top-bar { width: 44px !important; height: 44px !important; }
	#header .cart-link span,
	#header .cart-link .cart-text { display: none !important; }
	#header .cart-link i,
	#header .account-link i { font-size: 1.15rem; }
}

/* 22g. Hide desktop nav on mobile (defensive) */
@media (max-width: 991px) {
	#header .d-lg-flex { display: none !important; }
}

/* 22h. Hero on small screens */
@media (max-width: 575px) {
	#homepage .hero,
	.hero {
		padding: 2rem 0 1.8rem !important;
	}
	#homepage .hero h1.hero-title,
	.hero-title {
		font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
		letter-spacing: -.02em !important;
		line-height: 1.08 !important;
	}
	#homepage .hero .hero-subtitle,
	.hero-subtitle {
		font-size: 1rem !important;
		line-height: 1.5 !important;
	}
	#homepage .hero .hero-badges,
	.hero-badges {
		justify-content: center;
		gap: .35rem !important;
	}
	#homepage .hero .hero-badge,
	.hero-badge {
		font-size: .72rem !important;
		padding: .32rem .7rem !important;
	}
	#homepage .hero .cta-buttons {
		flex-direction: column !important;
		align-items: stretch !important;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
	#homepage .hero .cta-buttons .cta,
	.hero .cta-buttons .cta {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.heroBox, .heroCard {
		padding: 1.2rem !important;
		margin-left: -.4rem;
		margin-right: -.4rem;
	}
	.heroBox h1, .heroCard h1 {
		font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
		line-height: 1.1 !important;
		letter-spacing: -.02em !important;
	}
	.heroBox::after, .heroCard::before { display: none; }
	.sdl-hero__card { padding: 1.2rem !important; }
	.sdl-title { font-size: 1.6rem !important; line-height: 1.12 !important; }
	.sdl-tagline { font-size: .98rem !important; }
	.sdl-price-now { font-size: 1.9rem !important; }
	.sdl-price-old { font-size: 1.05rem !important; }
	.sdl-bullets li { font-size: .9rem !important; }
	.sdl-cta button.edd-add-to-cart,
	.sdl-cta input.edd-add-to-cart,
	.sdl-cta a.edd-submit { padding: .9rem 1.2rem !important; font-size: 1rem !important; }
	.sdl-spec-grid { grid-template-columns: 1fr !important; }
	.sdl-rev-card { padding: 1rem !important; }
	.swiper-button-next, .swiper-button-prev { display: none !important; }
}

/* 22i. Trust bar mobile wrap */
@media (max-width: 767px) {
	.trust-bar [class*="d-flex"],
	.trust-bar > .container > .d-flex {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: .8rem 1.4rem !important;
		text-align: center;
	}
}

/* 22j. Footer mobile reflow */
@media (max-width: 767px) {
	footer.v2 .top-footer,
	footer.v2 .bottom-footer {
		flex-direction: column !important;
		gap: 1rem !important;
		text-align: center;
	}
	footer.v2 .footer-nav {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: .9rem 1.4rem !important;
	}
}

/* 22k. Single-download hero grid: force single column under 992px */
@media (max-width: 991px) {
	.sdl-hero__grid {
		display: block !important;
		grid-template-columns: 1fr !important;
	}
	.sdl-hero__visual,
	.sdl-plugin-img-wrap {
		max-width: 100%;
		margin-top: 1.2rem;
	}
}

/* 22l. Tame any wide table or pre that could overflow */
.entry-content table,
body.single-wpsani_guides table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
body.single-wpsani_guides pre { overflow-x: auto; max-width: 100%; }

/* 22m. Hub tabs scroll-x on overflow instead of breaking layout */
@media (max-width: 575px) {
	.hubTabs {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		max-width: calc(100vw - 28px);
		scrollbar-width: none;
		padding: .4rem !important;
	}
	.hubTabs::-webkit-scrollbar { display: none; }
	.hubTab { white-space: nowrap; }
}

/* =============================================================
   23. CRITICAL BUG FIXES — high-specificity overrides
   These rules sit at the bottom of the cascade so they beat any
   prior conflicting !important rule of equal specificity. Each
   rule documents the bug it fixes.
   ============================================================= */

/* 23a. EDD no-js fallback <input> shows literal HTML icon
   --------------------------------------------------------------
   edd_get_purchase_link() emits BOTH a <button> (used when JS
   loads) and an <input type="submit"> with class .edd-no-js as
   the no-js fallback. The input's `value=""` can't render HTML,
   so `<i class="fa fa-cart-plus"></i> Add to Cart` shows as
   literal text. The blocks bundle ships .edd-no-js{display:none}
   but our .pc-btn-primary/.pc-btn-secondary !important rule has
   equal specificity and loads later, so it wins. Beat it with a
   compound class selector (specificity 0,2,1). */
input.edd-add-to-cart.edd-no-js,
.plugin-card input.edd-no-js,
input[type="submit"].edd-no-js,
.edd-no-js {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	font-size: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* 23b. Footer paragraphs invisible on dark background
   --------------------------------------------------------------
   Section 1 sets a global `p { color: var(--v2-ink-2) }` which
   is dark indigo. Footer.v2 uses violet-darker as background,
   so those p tags are nearly invisible. The `color` set on
   footer.v2 doesn't cascade into <p> because <p> has its own
   global color. Re-state at higher specificity. */
footer.v2,
footer.v2 p,
footer.v2 .footer-link,
footer.v2 .top-footer p,
footer.v2 .bottom-footer p {
	color: rgba(255, 255, 255, .82) !important;
}
footer.v2 .bottom-footer,
footer.v2 .bottom-footer p {
	color: rgba(255, 255, 255, .58) !important;
}
footer.v2 a,
footer.v2 .footer-link,
footer.v2 .footer-nav a {
	color: rgba(255, 255, 255, .9) !important;
	text-decoration: none;
}
footer.v2 a:hover,
footer.v2 .footer-link:hover,
footer.v2 .footer-nav a:hover {
	color: #ffffff !important;
}
footer.v2 .footer-logo img {
	filter: brightness(0) invert(1);
	opacity: .92;
	max-height: 42px;
	width: auto;
}

/* 23c. Header cart link — text on desktop, icon+badge on mobile
   --------------------------------------------------------------
   The previous rule `#header .cart-link span { display: none }`
   on small screens hid BOTH the cart text and the cart-quantity
   badge (both are spans). Wrap text in .cart-text and only hide
   that — keep the quantity badge visible. */
#header .cart-link {
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
	color: var(--v2-ink) !important;
	font-weight: 500;
}
#header .cart-link i { font-size: 1.05rem; }
#header .cart-link .edd-cart-quantity {
	display: inline-flex !important;
	min-width: 22px;
	height: 22px;
	padding: 0 .45rem;
	border-radius: 999px;
	background: var(--v2-violet-deep);
	color: #fff !important;
	font-size: .72rem;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
@media (max-width: 575px) {
	#header .cart-link .cart-text { display: none !important; }
	#header .cart-link .edd-cart-quantity { display: inline-flex !important; }
}
/* Undo the older rule that hid every span in cart-link */
#header .cart-link span.edd-cart-quantity {
	display: inline-flex !important;
}

/* 23d. Hero badges + CTAs container should never push viewport
   --------------------------------------------------------------
   With Plus Jakarta Sans + Fraunces, copy can wrap awkwardly.
   Make the buttons stay readable on every viewport. */
#homepage .hero .cta-buttons {
	gap: .8rem !important;
	margin-top: 1.4rem !important;
}
#homepage .hero .cta-buttons .cta {
	padding: .85rem 1.4rem !important;
	font-size: .98rem !important;
	white-space: nowrap;
}
@media (min-width: 576px) and (max-width: 991px) {
	#homepage .hero .cta-buttons {
		flex-wrap: nowrap !important;
		justify-content: center !important;
	}
}

/* 23e. Mobile-menu safety: hide overlay/drawer until toggled
   The toggle JS adds .active. Make the closed state explicit so
   we don't get a flashing drawer on first paint. */
#mobile-nav.mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: min(86vw, 340px);
	height: 100vh;
	background: var(--v2-cream) !important;
	box-shadow: -16px 0 40px -12px rgba(28, 18, 48, .25);
	transform: translateX(105%);
	transition: transform .35s var(--v2-ease, cubic-bezier(.2,.7,.2,1));
	z-index: 1100;
	overflow-y: auto;
	padding-top: 4rem !important;
}
#mobile-nav.mobile-nav.active { transform: translateX(0); }
#mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 18, 48, .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 1090;
}
#mobile-menu-overlay.active {
	opacity: 1;
	pointer-events: auto;
}
#mobile-nav.mobile-nav .mobile-menu-list a,
#mobile-nav.mobile-nav a {
	display: block;
	padding: .85rem 1.2rem;
	color: var(--v2-ink) !important;
	font-weight: 500;
	border-bottom: 1px solid var(--v2-line);
	text-decoration: none;
	font-size: 1.05rem;
}
#mobile-nav.mobile-nav .mobile-menu-list a:hover,
#mobile-nav.mobile-nav a:hover {
	background: var(--v2-violet-soft);
	color: var(--v2-violet-deep) !important;
}
.hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 22px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--v2-ink);
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span.top    { transform: translateY(10px) rotate(45deg); }
.hamburger[aria-expanded="true"] span.middle { opacity: 0; }
.hamburger[aria-expanded="true"] span.bottom { transform: translateY(-10px) rotate(-45deg); }

/* 23f. Trust bar — pure flex on desktop, wrap-friendly on mobile.
   The old separator <span class="trust-sep"> was rendered as a
   visual dot via CSS; if missing, the items run into each other. */
.trust-bar .trust-bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.2rem;
	justify-content: center;
	align-items: center;
}
.trust-bar .trust-item {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--v2-ink-soft) !important;
	font-weight: 500;
	font-size: .92rem;
}
.trust-bar .trust-item i { color: var(--v2-violet); font-size: .95rem; }
.trust-bar .trust-sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--v2-line-strong);
}
@media (max-width: 767px) {
	.trust-bar .trust-sep { display: none; }
}

/* 23g. Inputs / selects across templates — prevent zoom on iOS */
@media (max-width: 575px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* 23h. Site-wide horizontal-overflow guard
   Some EDD widget markup overruns its container; clip without
   breaking sticky/fixed positioning. */
#main-content,
#main-content > *,
section.featured-edd-plugins,
section.featured-new-arrivals,
section.featured-categories,
section.why-wpsani,
section.guides-highlights,
section.contact-us-banner {
	max-width: 100%;
	overflow-x: clip;
}

/* 23i. Iubenda cookie banner shouldn't crash mobile layout */
#iubenda-cs-banner { z-index: 2000; }

/* 23j. EDD purchase link wrapper — keep cart row on a single line */
.pc-action .edd_purchase_submit_wrapper,
.pc-action form.edd_download_purchase_form,
.pc-action form {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
}
.pc-action .edd_go_to_checkout { display: none !important; }

/* =============================================================
   24. MOBILE OVERFLOW HARDENING
   Earlier rules let the hero title and CTAs grow wider than the
   viewport on phones because Fraunces' display-optical-size
   (opsz 144) renders very wide glyphs. Lock down opsz, font size,
   and container widths on small screens.
   ============================================================= */

@media (max-width: 767px) {
	/* Container/grid never wider than viewport */
	.container,
	.container-fluid,
	#homepage .container,
	.hero > .container,
	.trust-bar > .container,
	footer.v2 > .container {
		max-width: 100% !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.row { margin-left: 0 !important; margin-right: 0 !important; }
	.row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

	/* Hero title — narrower glyphs, allow wrap, balanced lines */
	#homepage .hero h1.hero-title,
	.hero-title {
		font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
		line-height: 1.12 !important;
		letter-spacing: -.02em !important;
		font-variation-settings: "opsz" 24, "SOFT" 30, "wght" 500 !important;
		max-width: 100% !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
		hyphens: auto;
		text-wrap: balance;
		white-space: normal !important;
	}
	#homepage .hero h1.hero-title .animated-logo,
	#homepage .hero h1.hero-title .accent-gradient {
		font-variation-settings: "opsz" 24, "SOFT" 30, "wght" 500 !important;
		display: inline !important;
		white-space: normal !important;
	}
	/* Hero subtitle — fit and wrap */
	#homepage .hero .hero-subtitle,
	.hero-subtitle {
		font-size: .98rem !important;
		line-height: 1.5 !important;
		max-width: 100% !important;
	}
	#homepage .hero .hero-subtitle br { display: none; }

	/* Hero badges — wrap, never overflow */
	#homepage .hero .hero-badges,
	.hero-badges {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: .35rem !important;
		max-width: 100% !important;
	}
	#homepage .hero .hero-badge,
	.hero-badge {
		flex: 0 1 auto;
		max-width: 100%;
		white-space: normal !important;
		font-size: .72rem !important;
		padding: .3rem .65rem !important;
	}

	/* Hero CTA buttons — column, full width, capped */
	#homepage .hero .cta-buttons,
	.hero .cta-buttons {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: .65rem !important;
		max-width: 100% !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	#homepage .hero .cta-buttons .cta,
	.hero .cta-buttons .cta {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		white-space: normal !important;
		padding: .85rem 1rem !important;
		font-size: .98rem !important;
		text-align: center !important;
	}

	/* Trust bar — wrap items, no horizontal overflow */
	.trust-bar { padding: 1rem 0 !important; }
	.trust-bar .trust-bar-inner,
	.trust-bar .container > div,
	.trust-bar [class*="d-flex"] {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: .55rem 1.2rem !important;
		row-gap: .55rem !important;
	}
	.trust-bar .trust-item,
	.trust-bar [class*="trust-item"] {
		font-size: .82rem !important;
		flex: 0 1 auto;
		white-space: nowrap;
	}
	.trust-bar .trust-sep { display: none !important; }

	/* Section headers smaller */
	section h2,
	section .section-title {
		font-size: clamp(1.5rem, 5.5vw, 1.95rem) !important;
		font-variation-settings: "opsz" 36, "SOFT" 30 !important;
	}
	.section-header,
	.section-header-centered {
		text-align: center !important;
	}
	.section-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: .5rem !important;
	}

	/* Plugin/guide cards: tighter */
	.plugin-card,
	.guide-card,
	.category-card-v2,
	.why-card,
	.contact-feature-card {
		border-radius: 16px !important;
	}
	.pc-title-link h3,
	.pc-title-link {
		font-size: 1.15rem !important;
		font-variation-settings: "opsz" 24, "SOFT" 40 !important;
	}
	.pc-price { font-size: 1.2rem !important; }
	.pc-action,
	.pc-btn-primary,
	.pc-btn-secondary {
		font-size: .82rem !important;
		padding: .5rem .85rem !important;
	}

	/* Why-cards stack with breathing room */
	.why-card { padding: 1.4rem !important; }
	.why-icon { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }

	/* Footer — readable, padded */
	footer.v2 {
		padding: 2.4rem 0 1.2rem !important;
		text-align: center;
	}
	footer.v2 .col-lg-3,
	footer.v2 .col-lg-4,
	footer.v2 .col-lg-8 {
		text-align: center !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	footer.v2 .footer-logo { display: flex; justify-content: center; }
	footer.v2 .footer-nav {
		justify-content: center !important;
		flex-wrap: wrap !important;
		gap: .55rem 1.4rem !important;
	}
	footer.v2 p { font-size: .9rem; line-height: 1.55; }

	/* Header tighten */
	.main-header { padding: 8px 14px !important; gap: .35rem !important; }
	#header .cart-link { gap: .4rem !important; font-size: .9rem; }
	#header .cart-link i { font-size: 1.1rem; }
	#header .cart-link .edd-cart-quantity {
		min-width: 18px;
		height: 18px;
		font-size: .65rem;
		padding: 0 .35rem;
	}
	.logo-top-bar { width: 40px !important; height: 40px !important; }

	/* Contact form — full width inputs */
	.wpcf7-form input[type=text],
	.wpcf7-form input[type=email],
	.wpcf7-form input[type=tel],
	.wpcf7-form textarea,
	.wpcf7-form select { width: 100% !important; max-width: 100% !important; }
}

/* Tablet specific (576-991): badges/buttons row, CTA inline */
@media (min-width: 576px) and (max-width: 991px) {
	#homepage .hero h1.hero-title,
	.hero-title {
		font-size: clamp(2rem, 5.5vw, 3rem) !important;
		font-variation-settings: "opsz" 48, "SOFT" 30, "wght" 460 !important;
	}
}

/* Section 23d earlier added `white-space: nowrap` to .cta which
   forces overflow when CTA text is long. Override it back to
   normal so buttons can wrap if needed. */
#homepage .hero .cta-buttons .cta,
.hero .cta-buttons .cta {
	white-space: normal !important;
}