/* Custom styles beyond what theme.json can express. */
/* Keep this file minimal — prefer theme.json for all design tokens. */

/* =============================================
   FRAUNCES — decorative/editorial headings (replaces New Kansas)
   ============================================= */
.has-fraunces-font-family,
.telyrx-decorative-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 700;
	font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 72;
}

/* Decorative heading colors — enforce primary (indigo) on homepage sections.
   Uses compound selector to beat WP global heading styles without affecting
   footer headings which use has-indigo-lightest-color / has-surface-color. */
.telyrx-decorative-heading.has-primary-color {
	color: var(--wp--preset--color--primary, #1d2e8a) !important;
}

/* =============================================
   STICKY TOC BAR (pill-style navigation)
   ============================================= */
.telyrx-toc-bar {
	border-top: 1px solid var(--wp--preset--color--border, #e3e4eb);
	border-bottom: 1px solid var(--wp--preset--color--border, #e3e4eb);
	padding: 0.5rem 0;
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--wp--preset--color--surface, #ffffff);
}

.telyrx-toc-bar__list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	white-space: nowrap;
	max-width: 900px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.telyrx-toc-bar__list::-webkit-scrollbar {
	display: none;
}

/* Right-edge fade indicating more pills to scroll */
.telyrx-toc-bar--has-overflow .telyrx-toc-bar__list {
	-webkit-mask-image: linear-gradient( to right, black calc(100% - 60px), transparent );
	mask-image: linear-gradient( to right, black calc(100% - 60px), transparent );
}

.telyrx-toc-bar__pill {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 1rem;
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #26252a);
	text-decoration: none;
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.telyrx-toc-bar__pill:hover {
	background-color: var(--wp--preset--color--gray-bg, #f3f4f8);
	text-decoration: none;
	color: var(--wp--preset--color--text, #26252a);
}

.telyrx-toc-bar__pill--active {
	background-color: var(--wp--preset--color--amber-light, #ffe8bf);
}

.telyrx-toc-bar__pill--active:hover {
	background-color: var(--wp--preset--color--amber-light, #ffe8bf);
}


/* =============================================
   CONTENT AREA (gray background wrapper)
   ============================================= */
.telyrx-content-area .wp-block-post-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.telyrx-content-area .wp-block-post-content > * {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.telyrx-content-area .wp-block-post-content > .telyrx-email-cta {
	max-width: none;
}


/* =============================================
   ARTICLE CONTENT (editorial posts — flowing prose, no section cards)
   ============================================= */

.telyrx-article-content {
	max-width: 100%;
}

/* Typography for flowing article prose */
.telyrx-article-content .wp-block-post-content {
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--wp--preset--color--charcoal, #2F3335);
}

.telyrx-article-content .wp-block-post-content > * {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.telyrx-article-content .wp-block-post-content > .telyrx-email-cta {
	max-width: none;
}

/* Article H2s — clean section headings, no card wrapping */
.telyrx-article-content .wp-block-post-content h2 {
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #2D2D6D);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--neutral-200, #E5E7EB);
	scroll-margin-top: var(--toc-scroll-offset, 160px);
}

/* First H2 doesn't need the top border */
.telyrx-article-content .wp-block-post-content h2:first-of-type {
	border-top: none;
	padding-top: 0;
}

.telyrx-article-content .wp-block-post-content h3 {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--charcoal, #2F3335);
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.telyrx-article-content .wp-block-post-content h4 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--charcoal, #2F3335);
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* Paragraphs */
.telyrx-article-content .wp-block-post-content p {
	margin-bottom: 1.25rem;
}

/* Lists */
.telyrx-article-content .wp-block-post-content ul,
.telyrx-article-content .wp-block-post-content ol {
	margin-bottom: 1.25rem;
	padding-left: 1.5rem;
}

.telyrx-article-content .wp-block-post-content li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

/* Images inside articles */
.telyrx-article-content .wp-block-post-content .wp-block-image {
	margin: 2rem auto;
	max-width: 100%;
}

.telyrx-article-content .wp-block-post-content .wp-block-image img {
	border-radius: 12px;
	max-width: 100%;
	height: auto;
}

.telyrx-article-content .wp-block-post-content figcaption {
	font-size: 0.875rem;
	color: var(--wp--preset--color--neutral-500, #6B7280);
	text-align: center;
	margin-top: 0.5rem;
}

/* Tables — match the Quick Facts style but simpler */
.telyrx-article-content .wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9375rem;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--neutral-200, #E5E7EB);
}

.telyrx-article-content .wp-block-post-content th {
	background: var(--wp--preset--color--primary, #2D2D6D);
	color: #FFFFFF;
	font-weight: 700;
	padding: 0.75rem 1rem;
	text-align: left;
}

.telyrx-article-content .wp-block-post-content td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200, #E5E7EB);
}

.telyrx-article-content .wp-block-post-content tr:nth-child(even) td {
	background: var(--wp--preset--color--neutral-50, #F9FAFB);
}

/* Blockquotes / callouts */
.telyrx-article-content .wp-block-post-content blockquote {
	border-left: 4px solid var(--wp--preset--color--decorative-50, #8CC63F);
	padding: 1rem 1.5rem;
	margin: 1.5rem 0;
	background: var(--wp--preset--color--neutral-50, #F9FAFB);
	border-radius: 0 8px 8px 0;
	font-style: italic;
}

/* Embedded content (YouTube, etc.) */
.telyrx-article-content .wp-block-post-content .wp-block-embed {
	margin: 2rem auto;
}


/* =============================================
   CONTENT CARD (white cards on gray background)
   ============================================= */
.telyrx-content-card {
	background-color: var(--wp--preset--color--surface, #ffffff);
	border-radius: 20px;
	padding: 2.5rem;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
}

/* Content inside cards: headings inherit card context */
.telyrx-content-card h2 {
	color: var(--wp--preset--color--primary, #1d2e8a);
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
}

/* Remove extra spacing on elements inside cards */
.telyrx-content-card > *:last-child {
	margin-bottom: 0;
}

.telyrx-content-card__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.telyrx-content-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--lime-bg, #dceec3);
	flex-shrink: 0;
}

.telyrx-content-card__divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border, #e3e4eb);
	margin: 0 0 1.25rem;
}

/* Hide content separators inside cards (leftover from Elementor migration) */
.telyrx-content-card > .wp-block-separator {
	display: none;
}

/* Style H3 sub-headings inside content cards */
.telyrx-content-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #26252a);
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

.telyrx-content-card h3:first-of-type {
	margin-top: 0.5rem;
}

/* Disclaimer notes (auto-detected by section-cards.js) */
.telyrx-content-card .telyrx-disclaimer {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.571;
	color: var(--wp--preset--color--muted, #777981);
	margin-top: 0.5rem;
}

.telyrx-content-card .telyrx-disclaimer strong {
	font-weight: 700;
}

/* CTA buttons inside content cards */
.telyrx-content-card .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-amber, #ffc24c);
	color: var(--wp--preset--color--text, #26252a);
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-weight: 700;
	border-radius: 100px;
	padding: 0.75rem 2rem;
	text-decoration: none;
	display: inline-block;
}

.telyrx-content-card .wp-block-button__link:hover {
	opacity: 0.85;
}


/* =============================================
   DETAILS/ACCORDION (FAQ style)
   ============================================= */
.wp-block-details {
	background-color: var(--wp--preset--color--indigo-bg, #ecf0ff);
	border-radius: 20px;
	padding: 1.25rem 1.5rem;
	border: none;
	margin-bottom: 0.5rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--text, #26252a);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1.2;
}

.wp-block-details summary::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--wp--preset--color--text, #26252a);
	border-bottom: 2px solid var(--wp--preset--color--text, #26252a);
	transform: rotate(-45deg);
	flex-shrink: 0;
	margin-left: 10px;
	transition: transform 0.2s ease;
}

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

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


/* =============================================
   SIDE EFFECTS CHIPS (legacy pattern fallback)
   Moved to assets/css/side-effects.css for the block.
   ============================================= */


/* =============================================
   QUICK FACTS TABLE
   ============================================= */
.telyrx-quick-facts,
.quick-facts-card {
	border-radius: 20px;
	border: 1px solid var(--wp--preset--color--indigo-lightest, #a8bbff);
	overflow: hidden;
}

.telyrx-quick-facts table,
.quick-facts-card table {
	width: 100%;
	border-collapse: collapse;
}

.telyrx-quick-facts th,
.quick-facts-card th {
	background-color: var(--wp--preset--color--indigo-bg-alt, #d3dcff);
	font-weight: 700;
	padding: 0.75rem 1.25rem;
	text-align: left;
}

.telyrx-quick-facts td,
.quick-facts-card td {
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--indigo-lightest, #a8bbff);
}

.telyrx-quick-facts tr:nth-child(even) td,
.quick-facts-card tr:nth-child(even) td {
	background-color: var(--wp--preset--color--indigo-bg, #ecf0ff);
}

.telyrx-quick-facts tr:last-child td,
.quick-facts-card tr:last-child td {
	border-bottom: none;
}


/* =============================================
   MEDICATION TABLE (responsive)
   ============================================= */
.telyrx-medication-table figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.telyrx-medication-table table {
	border-collapse: collapse;
	width: 100%;
}

.telyrx-medication-table th,
.telyrx-medication-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border, #e3e4eb);
}

.telyrx-medication-table th {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1d2e8a);
	background: var(--wp--preset--color--background, #ffffff);
}


/* =============================================
   PRODUCT GRID (2x2 in CTA sections)
   ============================================= */
.telyrx-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	max-width: 900px;
	margin: 0 auto;
}


/* =============================================
   NO-BULLETS LIST (footer nav)
   ============================================= */
.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}


/* =============================================
   FOOTER & HEADER — full-width backgrounds
   ============================================= */

/* Override WP root padding so promo bar / copyright bar backgrounds extend full width */
.site-footer,
.site-header {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Footer vertical spacing — Figma: 60px top, 0 bottom */
.site-footer {
	padding-top: 3.75rem !important;
}

/* Gap between main content and copyright bar — Figma: 40px */
.site-footer__inner {
	padding-bottom: 2.5rem !important;
}

/* Content max-width: 1320px content inside 60px padding = 1440px total */
.site-footer__inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* Copyright bar: full-width bg, constrained content, proper sizing */
.site-footer__copyright {
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
	padding-left: max(var(--wp--preset--spacing--65, 60px), calc(50% - 660px)) !important;
	padding-right: max(var(--wp--preset--spacing--65, 60px), calc(50% - 660px)) !important;
	margin-top: 0 !important;
	font-size: var(--wp--preset--font-size--medium);
}

/* Copyright text — override WP inline font-size:1rem (=16px) to match body (20px) */
.site-footer__copyright p {
	font-size: var(--wp--preset--font-size--medium) !important;
}

/* Left column max width */
.site-footer__left {
	max-width: 492px;
}

/* Email subscription form */
.footer-email-form {
	display: flex;
	width: 100%;
}

.footer-email-input {
	flex: 1;
	height: 48px;
	padding: 12px 20px;
	border: none;
	border-radius: 8px 0 0 8px;
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: 1rem;
	color: #26252a;
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}

.footer-email-input::placeholder {
	color: #26252a;
}

.footer-email-btn {
	height: 48px;
	padding: 3px 16px;
	border: none;
	border-radius: 0 8px 8px 0;
	background-color: #ffc24c;
	font-family: var(--wp--preset--font-family--urbanist);
	font-size: 1rem;
	font-weight: 700;
	color: #26252a;
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
}

.footer-email-btn:hover {
	opacity: 0.9;
}

/* Social icons — Figma: 34px circles, ~22px SVG, centered */
.site-footer__social .wp-block-social-links {
	gap: 12px !important;
}

.site-footer__social .wp-block-social-link {
	width: 34px !important;
	height: 34px !important;
	overflow: hidden;
}

.site-footer__social .wp-block-social-link a {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	max-width: 34px !important;
	max-height: 34px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.site-footer__social .wp-block-social-link svg {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	min-height: 20px;
}

/* Facebook icon fix: WP SVG fills the entire circle, making "f" invisible.
   Replace with a clean "f" letterform that matches the other icon styles. */
.site-footer__social .wp-social-link-facebook svg {
	display: none !important;
}

.site-footer__social .wp-social-link-facebook a::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3V2z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Badge images with rounded corners */
.footer-badge-rounded img {
	border-radius: 6px;
}

/* Bottom bar dividers */
.footer-info-divider {
	display: inline-block;
	width: 1px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.4);
	vertical-align: middle;
}

/* Payment HSA badge: white bg with padding */
.footer-payment-badge img {
	background-color: #fff;
	border-radius: 4px;
	padding: 4px;
}

/* Payment card badges height */
.site-footer__payment img {
	height: 30px;
	width: auto;
}

/* Nav columns — top-align */
.site-footer__nav {
	align-items: flex-start !important;
}

/* Nav column headings — fix color specificity + use fluid font size */
.site-footer__nav h3.has-indigo-lightest-color {
	color: var(--wp--preset--color--indigo-lightest, #a8bbff) !important;
}

.site-footer__nav h3 {
	font-size: calc(var(--wp--preset--font-size--medium) * 1.25) !important;
}

/* Nav links — match body font size (Figma: 1rem at 20px base) */
.site-footer__nav .is-style-no-bullets {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	font-size: var(--wp--preset--font-size--medium) !important;
}

.site-footer__nav .is-style-no-bullets li {
	margin: 0;
}

/* Nav columns — prevent wrapping */
.site-footer__nav .wp-block-group {
	white-space: nowrap;
}


/* =============================================
   HEADER
   ============================================= */

/* Content max-width: 1320px content + 60px padding = 1440px total */
.header-nav {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* Logo — inline SVG link */
.header-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.header-logo-link svg {
	display: block;
	width: 136px;
	height: 32px;
}

/* Sticky header — ensure top is set (WP block sticky can leave it as auto) */
.site-header {
	box-shadow: 0px 0px 12px 0px rgba(38, 37, 42, 0.16);
	z-index: 100;
	position: sticky;
	top: 0;
}

/* WP admin bar offset for sticky elements */
.admin-bar .site-header {
	top: 32px;
}

/* admin-bar TOC offset handled by JS via --header-height variable */

/* Remove border-bottom from nav container */
.site-header .header-nav {
	border-bottom: none !important;
}

/* Promo bar link — inherits text color, underlined */
.site-header .promo-bar a {
	color: inherit;
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

/* Search — indigo button, gray input, flex to fill space */
.site-header .header-search {
	flex: 1;
	max-width: 547px;
}

.site-header .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0 !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 8px !important;
	overflow: hidden;
}

.site-header .wp-block-search__input {
	flex: 1;
	height: 42px;
	background-color: var(--wp--preset--color--gray-bg, #f3f4f8) !important;
	border: none !important;
	border-right: 1px solid var(--wp--preset--color--indigo-light, #4d67d6) !important;
	border-radius: 0 !important;
	padding: 12px 12px 12px 20px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	margin: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}

.site-header .wp-block-search__button {
	width: 42px !important;
	min-width: 42px;
	height: 42px;
	background-color: var(--wp--preset--color--indigo-light, #4d67d6) !important;
	color: var(--wp--preset--color--surface, #ffffff) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Replace WP default search icon with Figma magnifying glass (handle bottom-right) */
.site-header .wp-block-search__button svg {
	display: none !important;
}

.site-header .wp-block-search__button::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

/* Header icon links (Account, Cart) */
.header-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--wp--preset--color--text, #26252a);
}



/* =============================================
   MEGA MENU
   ============================================= */

/* Nav text links (Get Refill) */
.header-nav__text-link {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
	text-decoration: none;
	padding: 8px 24px;
	border-radius: 40px;
	white-space: nowrap;
}

.header-nav__text-link:hover {
	text-decoration: none;
	color: var(--wp--preset--color--indigo-light, #4d67d6);
}

/* Primary nav container */
.header-primary-nav {
	display: flex;
	align-items: center;
	gap: 0;
}

/* Shop All trigger button */
.mega-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
	background-color: #f3f5f4;
	border: none;
	border-radius: 40px;
	padding: 8px 24px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.mega-menu-trigger:hover {
	background-color: #e7eae8;
}

.mega-menu-chevron {
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
}

.mega-menu-trigger[aria-expanded="true"] .mega-menu-chevron {
	transform: rotate(180deg);
}

/* Mega menu panel */
.mega-menu {
	position: absolute;
	top: 65%;
	left: 0;
	right: 0;
	background-color: var(--wp--preset--color--surface, #ffffff);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 4px 12px rgba(46, 50, 47, 0.12);
	z-index: 99;
	padding: 24px 48px;
}

.mega-menu[hidden] {
	display: none;
}

.mega-menu:not([hidden]) {
	animation: mega-menu-in 0.15s ease-out;
}

@keyframes mega-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 5-column grid */
.mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
}

/* Column */
.mega-menu__column {
	display: flex;
	flex-direction: column;
}

/* Category heading */
.mega-menu__category {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 18px;
	color: #707579;
	text-decoration: none;
	padding: 4px 0;
	margin-bottom: 4px;
}

.mega-menu__category:hover {
	color: var(--wp--preset--color--indigo-light, #4d67d6);
	text-decoration: none;
}

.mega-menu__category svg {
	flex-shrink: 0;
}

/* Bold variant for "Shop All Categories" */
.mega-menu__category--bold {
	color: var(--wp--preset--color--neutral-dark, #2f3335);
}

/* Medication links */
.mega-menu__links {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px 0;
}

.mega-menu__links:last-child {
	margin-bottom: 0;
}

.mega-menu__links a {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mega-menu__links a:hover {
	color: var(--wp--preset--color--indigo-light, #4d67d6);
	background-color: var(--wp--preset--color--indigo-bg, #ecf0ff);
	text-decoration: none;
}

/* Badge system */
.mega-menu__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.012em;
	white-space: nowrap;
}

.mega-menu__badge--popular {
	background-color: var(--wp--preset--color--lime-bg, #dceec3);
	color: var(--wp--preset--color--green-icon, #40621a);
}

.mega-menu__badge--price-drop {
	background-color: #d3dcff;
	color: var(--wp--preset--color--primary, #1d2e8a);
}

.mega-menu__badge--new {
	background-color: #e7e9ea;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
}

.mega-menu__badge--in-demand {
	background-color: var(--wp--preset--color--amber-light, #ffe8bf);
	color: var(--wp--preset--color--text, #26252a);
}

/* Header-nav needs relative positioning for mega menu */
.header-nav {
	position: relative;
}

/* Hamburger toggle — hidden on desktop */
.mobile-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	border-radius: 8px;
}

.mobile-nav-toggle:hover {
	background-color: #f3f5f4;
}

/* Icon link padding (Figma: 12px padding, 8px radius) */
.header-icon-link {
	display: inline-flex;
	align-items: center;
	padding: 12px;
	border-radius: 8px;
}

.header-icon-link:hover {
	background-color: #f3f5f4;
}


/* =============================================
   MOBILE NAVIGATION
   ============================================= */
.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--wp--preset--color--surface, #ffffff);
	z-index: 200;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav:not([hidden]) {
	animation: mobile-nav-in 0.2s ease-out;
}

@keyframes mobile-nav-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-nav-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	border-radius: 8px;
}

.mobile-nav-close:hover {
	background-color: #f3f5f4;
}

.mobile-nav__actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-nav__action-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
	text-decoration: none;
	padding: 8px 0;
}

.mobile-nav__search {
	display: flex;
	align-items: center;
	border: 2px solid #e7e9ea;
	border-radius: 8px;
	overflow: hidden;
}

.mobile-nav__search-input {
	flex: 1;
	height: 42px;
	padding: 0 16px;
	border: none;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	color: var(--wp--preset--color--text, #26252a);
	outline: none;
}

.mobile-nav__search-input::placeholder {
	color: #707579;
}

.mobile-nav__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: none;
	border: none;
	color: #707579;
	cursor: pointer;
}

.mobile-nav__quick-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px solid #e7e9ea;
	padding-top: 16px;
}

.mobile-nav__quick-link {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
	text-decoration: none;
	padding: 8px 0;
}

/* Category accordion */
.mobile-nav__categories {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mobile-nav__category {
	border-top: 1px solid #e7e9ea;
}

.mobile-nav__category-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #707579;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}

.mobile-nav__category-heading::-webkit-details-marker {
	display: none;
}

.mobile-nav__category-heading::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #707579;
	border-bottom: 2px solid #707579;
	transform: rotate(45deg);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.mobile-nav__category[open] .mobile-nav__category-heading::after {
	transform: rotate(-135deg);
}

.mobile-nav__category-links {
	list-style: none;
	padding: 0 0 12px 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-nav__category-links a {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-dark, #2f3335);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
}

/* Body scroll lock when menus are open */
body.mega-menu-open,
body.mobile-nav-open {
	overflow: hidden;
}

/* Blur overlay behind mega menu */
body.mega-menu-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: transparent;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 90;
	pointer-events: none;
}


/* =============================================
   YOAST BREADCRUMBS
   ============================================= */
.yoast-breadcrumbs {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #777981);
	margin-bottom: var(--wp--preset--spacing--30, 0.67rem);
}

.yoast-breadcrumbs a {
	color: var(--wp--preset--color--text, #26252a);
	text-decoration: none;
}

.yoast-breadcrumbs a:hover {
	color: var(--wp--preset--color--indigo-light, #4d67d6);
	text-decoration: underline;
}

.yoast-breadcrumbs .breadcrumb_last {
	color: var(--wp--preset--color--muted, #777981);
}

.telyrx-breadcrumb-chevron {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.25rem;
	color: var(--wp--preset--color--neutral-400, #9CA3AF);
}


/* =============================================
   HERO TAGS (category pills in hero section)
   ============================================= */
.telyrx-hero-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.telyrx-hero-tag,
.telyrx-hero-tags a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	background-color: var(--wp--preset--color--lime-bg, #dceec3);
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 24px;
	color: var(--wp--preset--color--green-icon, #40621a) !important;
	white-space: nowrap;
	text-decoration: none !important;
}

.telyrx-hero-tags a:hover {
	opacity: 0.85;
}


/* =============================================
   HERO ATTRIBUTION (Written by / Reviewed by)
   ============================================= */
.telyrx-hero-attribution {
	display: flex;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 22px;
	color: var(--wp--preset--color--text, #26252a);
	flex-wrap: wrap;
}

.telyrx-hero-attribution strong {
	font-weight: 700;
}

.telyrx-hero-attribution a {
	color: var(--wp--preset--color--indigo-light, #4d67d6);
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

.telyrx-hero-attribution a:hover {
	color: var(--wp--preset--color--primary, #1d2e8a);
}

.telyrx-hero-attribution__date {
	color: var(--wp--preset--color--muted, #777981);
}


/* =============================================
   SCROLL OFFSET (for sticky header + TOC)
   ============================================= */
.telyrx-content-card h2 {
	scroll-margin-top: var(--toc-scroll-offset, 160px);
}

/* Remove content-area bottom padding when footer product list is present */
.telyrx-content-area:has(.telyrx-product-list-section) {
	padding-bottom: 0 !important;
}

/* "What It Is" anchor on hero section also needs scroll offset */
#what-it-is {
	scroll-margin-top: var(--toc-scroll-offset, 160px);
}


/* =============================================
   MOBILE RESPONSIVE (max-width: 768px)
   ============================================= */
@media (max-width: 768px) {
	/* Header promo bar */
	.promo-bar {
		display: none;
	}

	/* Hide desktop nav elements on mobile */
	.header-primary-nav,
	.header-search {
		display: none !important;
	}

	/* Show hamburger */
	.mobile-nav-toggle {
		display: flex;
	}

	/* Tighten header padding on mobile */
	.header-nav {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Hide mega menu on mobile (use mobile nav instead) */
	.mega-menu {
		display: none !important;
	}

	/* TOC bar */
	.telyrx-toc-bar__list {
		justify-content: flex-start;
		padding: 0 1rem;
	}

	.telyrx-toc-bar__pill {
		font-size: 0.875rem;
	}

	/* Article content — tighter margins on mobile */
	.telyrx-article-content .wp-block-post-content h2 {
		font-size: 1.5rem;
		margin-top: 2rem;
		padding-top: 1.25rem;
	}

	.telyrx-article-content .wp-block-post-content h3 {
		font-size: 1.25rem;
	}

	/* Content cards */
	.telyrx-content-card {
		padding: 1.25rem;
	}

	/* Product grid */
	.telyrx-product-grid {
		grid-template-columns: 1fr;
	}

	/* Hero attribution — stack vertically */
	.telyrx-hero-attribution {
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Footer */
	.site-footer__inner {
		flex-direction: column;
		gap: 2rem;
	}

	.site-footer__left {
		max-width: 100%;
	}

	.site-footer__nav {
		flex-direction: column;
		gap: 2rem;
	}

	.site-footer__copyright {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}

	.site-footer__info {
		flex-wrap: wrap;
		justify-content: center;
	}

	.site-footer__payment {
		justify-content: center;
	}

	.site-footer__badges {
		flex-wrap: wrap;
	}

	.site-footer__social {
		flex-wrap: wrap;
	}
}


/* =============================================
   HOMEPAGE — Post Cards
   ============================================= */
.telyrx-post-card {
	overflow: hidden;
}

/* "Read more" link — indigo with short divider line above */
.telyrx-post-card .wp-block-read-more,
.wp-block-read-more.telyrx-read-more {
	color: var(--wp--preset--color--primary, #1d2e8a) !important;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	margin-top: var(--wp--preset--spacing--20, 0.5rem);
	padding-top: var(--wp--preset--spacing--25, 0.75rem);
	border-top: 2px solid var(--wp--preset--color--primary, #1d2e8a);
	display: inline-block;
}

.telyrx-post-card .wp-block-read-more:hover,
.wp-block-read-more.telyrx-read-more:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--primary, #1d2e8a) !important;
}

/* Meta line: "by Author | Date" */
.telyrx-post-card__meta {
	align-items: baseline;
}

/* Pipe separator — thinner than default text */
.telyrx-meta-pipe {
	opacity: 0.5;
}


/* Page indicator on paginated homepage ("all articles — Page 2") */
.telyrx-page-indicator {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-style: normal;
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--wp--preset--color--muted, #777981);
	font-variation-settings: normal;
}


/* =============================================
   AUTHOR PAGE — Bio
   ============================================= */
.telyrx-author-bio {
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--text, #26252a);
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
}

/* Author name link in post cards — inherit muted color */
.telyrx-post-card__meta .wp-block-post-author-name a {
	color: inherit;
	text-decoration: none;
}

.telyrx-post-card__meta .wp-block-post-author-name a:hover {
	text-decoration: underline;
}


/* =============================================
   HOMEPAGE — Article Grid
   ============================================= */
.telyrx-article-grid {
	gap: var(--wp--preset--spacing--40, 1.5rem) !important;
}


/* =============================================
   HOMEPAGE — Featured Article Card
   ============================================= */
.telyrx-featured-card {
	overflow: hidden;
}


/* =============================================
   HOMEPAGE — Video Carousel
   ============================================= */
.telyrx-video-carousel {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--wp--preset--spacing--20, 0.5rem);
}

.telyrx-video-carousel::-webkit-scrollbar {
	display: none;
}

.telyrx-video-card {
	flex: 0 0 calc(33.333% - var(--wp--preset--spacing--40, 1.5rem) * 2 / 3);
	scroll-snap-align: start;
	min-width: 300px;
}

/* Video CTA button — force lime bg even inside card context */
.telyrx-video-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-lime, #8cc641) !important;
	color: var(--wp--preset--color--surface, #ffffff) !important;
}

.telyrx-video-cta .wp-block-button__link:hover {
	opacity: 0.85;
}


/* =============================================
   HOMEPAGE — Video Dot Navigation
   ============================================= */
.telyrx-video-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.telyrx-video-dot {
	width: 10px;
	height: 10px;
	border-radius: 100px;
	border: none;
	background-color: var(--wp--preset--color--border, #e3e4eb);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease;
}

.telyrx-video-dot--active {
	background-color: var(--wp--preset--color--accent-lime, #8cc641);
}

.telyrx-video-dot:hover {
	background-color: var(--wp--preset--color--lime-light, #bbdf89);
}


/* =============================================
   HOMEPAGE — CTA Section
   ============================================= */
.telyrx-cta-homepage {
	margin-bottom: 0 !important;
}

/* CTA columns: no gap, full bleed */
.telyrx-cta-columns {
	gap: 0 !important;
	margin-bottom: 0 !important;
}

/* CTA image: fill column height, crop to fit */
.telyrx-cta-image-col {
	overflow: hidden;
}

.telyrx-cta-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.telyrx-cta-image {
	margin-bottom: 0 !important;
}

/* Flush CTA to footer — remove all gaps between main and footer */
.site-footer {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* WordPress .wp-site-blocks adds margin between top-level blocks */
.wp-site-blocks > .site-footer,
.wp-site-blocks > footer,
.wp-site-blocks > *:last-child + .site-footer {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Also remove bottom margin from main wrapper above footer */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group {
	margin-bottom: 0 !important;
	margin-block-end: 0 !important;
}


/* =============================================
   HOMEPAGE — Mobile Responsive
   ============================================= */
@media (max-width: 768px) {
	/* Article grid — single column */
	.telyrx-article-grid {
		grid-template-columns: 1fr !important;
	}

	/* Featured card — stack columns */
	.telyrx-featured-card .wp-block-columns {
		flex-direction: column !important;
	}

	.telyrx-featured-card .wp-block-column {
		flex-basis: 100% !important;
	}

	.telyrx-featured-card .wp-block-post-featured-image img {
		border-radius: 20px 20px 0 0 !important;
	}

	/* Video carousel — swipe single card */
	.telyrx-video-card {
		flex: 0 0 85%;
		min-width: 260px;
	}

	/* CTA — stack image above text on mobile */
	.telyrx-cta-columns {
		flex-direction: column !important;
	}

	.telyrx-cta-image-col,
	.telyrx-cta-text-col {
		flex-basis: 100% !important;
	}

	.telyrx-cta-text-col {
		text-align: center;
	}

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


/* =============================================
   PAGINATION — ShadCN-style (clean rounded squares)
   Targets: front-page, index, search, author templates
   Reference: https://ui.shadcn.com/docs/components/pagination
   ============================================= */

/* Container: flex row, centered, consistent gap */
.wp-block-query-pagination {
	gap: 0.25rem !important;
	align-items: center;
	flex-wrap: wrap;
}

/* Shared base for ALL pagination items */
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	box-sizing: border-box;
}

/* Page number items: fixed 36x36 square */
.wp-block-query-pagination-numbers .page-numbers {
	min-width: 36px;
	padding: 0 0.25rem;
	color: var(--wp--preset--color--text, #26252a);
	background-color: transparent;
}

/* Ghost hover (inactive page numbers) */
.wp-block-query-pagination-numbers a.page-numbers:hover {
	background-color: var(--wp--preset--color--gray-bg, #f3f4f8);
	color: var(--wp--preset--color--text, #26252a);
	text-decoration: none;
}

/* Active/current page: outline variant */
.wp-block-query-pagination-numbers .page-numbers.current {
	border: 1px solid var(--wp--preset--color--border, #e3e4eb);
	background-color: var(--wp--preset--color--surface, #ffffff);
	color: var(--wp--preset--color--primary, #1d2e8a);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: default;
}

/* Ellipsis dots: non-interactive */
.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: 36px;
	color: var(--wp--preset--color--muted, #777981);
	cursor: default;
	pointer-events: none;
	letter-spacing: 0.1em;
}

/* Previous / Next links */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	padding: 0 0.625rem;
	gap: 0.25rem;
	color: var(--wp--preset--color--text, #26252a);
	background-color: transparent;
	white-space: nowrap;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--gray-bg, #f3f4f8);
	color: var(--wp--preset--color--text, #26252a);
	text-decoration: none;
}

/* Numbers container: inherit flex gap */
.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Override WP link color on pagination anchors */
.wp-block-query-pagination a {
	color: var(--wp--preset--color--text, #26252a);
	text-decoration: none;
}

.wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--text, #26252a);
	text-decoration: none;
}


/* =============================================
   PAGINATION — Mobile
   ============================================= */
@media (max-width: 768px) {
	.wp-block-query-pagination {
		gap: 0.25rem !important;
	}

	/* Slightly smaller hit targets on mobile */
	.wp-block-query-pagination-numbers .page-numbers,
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		min-height: 32px;
		font-size: 0.8125rem;
	}

	.wp-block-query-pagination-numbers .page-numbers {
		min-width: 32px;
	}

	/* Collapse Previous/Next to chevrons only */
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		font-size: 0;
		padding: 0;
		min-width: 32px;
	}

	.wp-block-query-pagination-previous::before {
		content: "\2039";
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 1;
	}

	.wp-block-query-pagination-next::after {
		content: "\203A";
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 1;
	}
}