/**
 * Blog Detail Page Styles
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   Blog Detail Container
   ========================================================================== */

.only-blog-detail {
	padding: 0 0 80px;
}

/* Breadcrumb inside header container */
.only-blog-detail .only-breadcrumb-wrapper {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 20px 0;
}

.only-blog-detail__container {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 60px;
	padding: 0 20px;
	max-width: 1400px;
	margin: 0 auto;
	align-items: flex-start;
}

/* ==========================================================================
   Sidebar & Table of Contents
   ========================================================================== */

.only-blog-detail__sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 140px;
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	z-index: 10;
	align-self: start;
	width: 380px;
}

.only-blog-toc-wrapper {
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	width: 100%;
	overflow: hidden;
}

.only-blog-toc-wrapper--sticky {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* TOC Toggle Button */
.only-blog-toc__toggle {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #F8F8F8;
	border: none;
	border-bottom: 1px solid #E5E5E5;
	border-radius: 12px 12px 0 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	padding: 20px 24px;
	transition: background 0.2s ease;
}

.only-blog-toc__toggle:hover {
	background: #F0F0F0;
}

/* When collapsed, round all corners */
.only-blog-toc__toggle[aria-expanded="false"] {
	border-radius: 12px;
	border-bottom: none;
}

/* TOC Header */
.only-blog-toc__title {
	margin: 0;
	padding: 0;
	color: #000000;
	font-family: 'Roboto Flex', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 21px;
	text-align: left;
}

/* Arrow icon container */
.only-blog-toc__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

/* Collapsed state - rotate arrow */
.only-blog-toc__toggle[aria-expanded="false"] .only-blog-toc__icon {
	transform: rotate(-180deg);
}

/* TOC List Container */
.only-blog-toc {
	padding: 0;
	background: #FFFFFF;
	max-height: 1000px;
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	opacity: 1;
}

/* Collapsed state */
.only-blog-toc.collapsed {
	max-height: 0;
	opacity: 0;
}

.only-blog-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.only-blog-toc__item {
	margin: 0;
	border-bottom: none;
}

.only-blog-toc__link {
	display: flex;
	align-items: center;
	padding: 16px 32px;
	color: #444444;
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	font-style: normal;
	font-feature-settings: 'liga' off, 'clig' off;
	transition: all 0.2s ease;
	position: relative;
	background: #FFFFFF;
	border-left: 4px solid transparent;
	min-height: 56px;
}

.only-blog-toc__link:link,
.only-blog-toc__link:visited {
	color: #444444;
	text-decoration: none;
}

.only-blog-toc__link:hover {
	background: rgba(173, 109, 244, 0.08);
	color: #444444;
}

.only-blog-toc__link:focus,
.only-blog-toc__link:active {
	outline: none;
	color: #444444;
	text-decoration: none;
}

/* Active state - purple background + left border */
.only-blog-toc__link--active {
	background: rgba(173, 109, 244, 0.08) !important;
	border-left-color: #AD6DF4 !important;
	color: #AD6DF4 !important;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	font-style: normal;
	font-feature-settings: 'liga' off, 'clig' off;
	text-decoration: none !important;
}

.only-blog-toc__link--active:link,
.only-blog-toc__link--active:visited,
.only-blog-toc__link--active:hover,
.only-blog-toc__link--active:focus,
.only-blog-toc__link--active:active {
	color: #AD6DF4 !important;
}

/* Remove counter numbers */
.only-blog-toc__link::before {
	display: none;
}

/* ==========================================================================
   Article Container
   ========================================================================== */

.only-blog-detail__article {
	max-width: 1000px;
	margin-top: 0;
	padding-top: 0;
}

/* ==========================================================================
   Article Header (Full Width - Title, Meta, Featured Image)
   ========================================================================== */

.only-blog-detail__header {
	max-width: 1440px;
	margin: 39px auto 60px;
	padding: 0 20px;
}

.only-blog-detail__featured-image {
	margin-top: 40px;
	border-radius: 20px;
	overflow: hidden;
	width: 100%;
	height: 500px;
	background: #D9D9D9;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.only-blog-detail__featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Default placeholder when no featured image */
.only-blog-detail__featured-image--placeholder {
	background: linear-gradient(135deg, #8B4C9F 0%, #6B3C7F 50%, #4B2C5F 100%);
	position: relative;
}

.only-blog-detail__featured-image--placeholder::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20Z' stroke='white' stroke-width='3' stroke-opacity='0.3'/%3E%3Cpath d='M100 60V100L130 130' stroke='white' stroke-width='3' stroke-linecap='round' stroke-opacity='0.3'/%3E%3Cpath d='M70 70L130 130M130 70L70 130' stroke='white' stroke-width='3' stroke-linecap='round' stroke-opacity='0.2'/%3E%3Ccircle cx='100' cy='100' r='15' fill='white' fill-opacity='0.3'/%3E%3Ctext x='100' y='155' font-family='Roboto Flex, sans-serif' font-size='16' fill='white' fill-opacity='0.5' text-anchor='middle'%3EKloira Articles%3C/text%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.6;
}

.only-blog-detail__featured-image--placeholder::after {
	content: 'Kloira';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'DM Serif Display', serif;
	font-size: 48px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 2px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Title and Meta Container - Centered */
.only-blog-detail__title-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	gap: 24px;
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
}

.only-blog-detail__title {
	width: 900px;
	max-width: 100%;
	margin: 0;
	font-family: 'DM Serif Display', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 44px;
	line-height: 60px;
	text-align: center;
	color: #000000;
}

.only-blog-detail__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 32px;
	justify-content: center;
	flex-wrap: wrap;
}

.only-blog-detail__meta > span {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 12px;
}

/* SVG icons in meta (clock, calendar, user) */
.only-blog-detail__meta svg {
	display: flex;
	width: 24px;
	height: 24px;
	padding: 2px 3px;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
	color: #888888;
	flex: none;
}

/* Orange separator shape - no padding, just the icon */
.only-blog-detail__meta > svg {
	color: #FF6B35;
	padding: 0;
	flex-shrink: 0;
}

.only-blog-detail__icon {
	display: flex;
	width: 24px;
	height: 24px;
	padding: 2px 3px;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
	color: #888888;
	flex: none;
}

.only-blog-detail__date,
.only-blog-detail__reading-time {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: normal;
	text-align: center;
	color: #222222;
}

/* Author container */
.only-blog-detail__author {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: normal;
	text-align: center;
	color: #888888;
}

/* Author name link styling */
.only-blog-detail__author-link {
	color: #222222;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	transition: color 0.2s ease;
}

.only-blog-detail__author-link:hover {
	color: #FF6B35;
}

.only-blog-detail__categories {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	text-align: center;
	color: #888888;
}

.only-blog-detail__categories a {
	color: #888888;
	text-decoration: none;
	transition: color 0.2s ease;
}

.only-blog-detail__categories a:hover {
	color: #222222;
}

/* ==========================================================================
   Quote Block
   ========================================================================== */

.only-blog-quote-block {
	position: relative;
	display: block;
	max-width: 1000px;
	width: 100%;
	margin: 50px auto;
	padding: 40px 0;
	min-height: 1px;
}

/* Purple background box - starts at 32px from left */
.only-blog-quote-block::before {
	content: '';
	position: absolute;
	left: 32px;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(173, 109, 244, 0.08);
	border-radius: 20px;
	z-index: 0;
}

.only-blog-quote-block__icon-wrapper {
	position: absolute;
	left: 0;
	top: 40px;
	flex-shrink: 0;
	width: 116px;
	height: 80px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	z-index: 1;
}

.only-blog-quote-block__icon-wrapper svg {
	width: 116px !important;
	height: 80px !important;
	max-width: 116px;
	max-height: 80px;
	flex-shrink: 0;
}

.only-blog-quote-block__icon-wrapper svg path {
	fill: rgba(173, 109, 244, 0.32) !important;
	opacity: 1;
}

.only-blog-quote-block__content {
	position: relative;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 156px;
	margin-right: 32px;
	padding: 0;
	padding-right: 32px;
	gap: 20px;
	width: auto;
	max-width: none;
	z-index: 1;
}

.only-blog-quote-block__title {
	margin: 0;
	width: 100%;
	height: auto;
	color: #000000;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 26px !important;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
}

.only-blog-quote-block__text {
	width: 100%;
	height: auto;
	margin: 0;
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
}

.only-blog-quote-block__text p {
	margin: 0 0 16px 0;
	width: 100%;
	height: auto;
	color: #444444;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 20px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 32px !important;
}

.only-blog-quote-block__text p:last-of-type {
	margin-bottom: 0;
}

.only-blog-quote-block__text .only-blog-quote-block__author,
.only-blog-quote-block__author {
	margin: 12px 0 0 0 !important;
	padding: 0;
	color: #FF5100 !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 20px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 32px !important;
}

/* ==========================================================================
   Article Content
   ========================================================================== */

.only-blog-detail__content {
	font-size: 20px;
	line-height: 1.8;
	color: #333;
}

.only-blog-detail__content p {
	margin: 0 0 24px 0;
}

.only-blog-detail__content h2 {
	margin: 48px 0 24px 0;
	padding-top: 20px;
	scroll-margin-top: 100px;
	font-family: 'DM Serif Display', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 32px;
	line-height: 42px;
	color: #000000;
}

.only-blog-detail__content h3 {
	margin: 32px 0 16px 0;
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	color: #222222;
}

.only-blog-detail__content h4 {
	margin: 24px 0 12px 0;
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #333333;
}

.only-blog-detail__content ul,
.only-blog-detail__content ol {
	margin: 0 0 24px 0;
	padding-left: 32px;
}

.only-blog-detail__content li {
	margin-bottom: 12px;
}

.only-blog-detail__content a {
	color: #8B4C9F;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.only-blog-detail__content a:hover {
	color: #FF6B35;
}

.only-blog-detail__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 32px 0;
}

.only-blog-detail__content blockquote {
	margin: 32px 0;
	padding: 24px 32px;
	background: #F9F7FF;
	border-left: 4px solid #8B4C9F;
	border-radius: 8px;
	font-style: italic;
}

.only-blog-detail__content code {
	padding: 2px 8px;
	background: #F5F5F5;
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	color: #FF6B35;
}

.only-blog-detail__content pre {
	padding: 20px;
	background: #1A1A1A;
	border-radius: 8px;
	overflow-x: auto;
	margin: 32px 0;
}

.only-blog-detail__content pre code {
	padding: 0;
	background: transparent;
	color: #22c55e;
}

/* ==========================================================================
   Table Styles
   ========================================================================== */

.only-blog-detail__content table {
	width: 100%;
	max-width: 1000px;
	border-collapse: collapse;
	margin: 50px auto;
	background: #FFFFFF;
	font-family: 'Roboto Flex', sans-serif;
	box-shadow: none;
	border: 1px solid #DDDDDD;
}

/* Table Header - Support both proper <thead> and WordPress's <tbody> structure */
.only-blog-detail__content thead {
	background: rgba(173, 109, 244, 0.32) !important;
}

.only-blog-detail__content thead tr {
	background: rgba(173, 109, 244, 0.32) !important;
}

.only-blog-detail__content thead th {
	height: 50px;
	padding: 16px 24px;
	text-align: left;
	vertical-align: middle;
	background: rgba(173, 109, 244, 0.32) !important;
	border: 1px solid #FFFFFF !important;
	font-family: 'Roboto Flex', sans-serif !important;
	font-style: normal;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 19px !important;
	color: #000000 !important;
	text-transform: none !important;
	letter-spacing: normal;
}

/* Fallback: style first tbody row as header ONLY when table has no <thead> */
.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child {
	background: rgba(173, 109, 244, 0.32) !important;
}

.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child td {
	height: 50px;
	padding: 16px 24px;
	text-align: left;
	vertical-align: middle;
	background: rgba(173, 109, 244, 0.32) !important;
	background-color: rgba(173, 109, 244, 0.32) !important;
	border: 1px solid #FFFFFF !important;
	font-family: 'Roboto Flex', sans-serif !important;
	font-style: normal;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 19px !important;
	color: #000000 !important;
	text-transform: none !important;
	letter-spacing: normal;
}

/* Body Rows - skip first row (header) */
.only-blog-detail__content tbody tr {
	background: #FFFFFF !important;
	transition: none;
}

.only-blog-detail__content tbody tr:hover {
	background: #FFFFFF !important;
}

.only-blog-detail__content tbody td {
	height: 50px;
	padding: 16px 24px;
	vertical-align: middle;
	background: #FFFFFF !important;
	border: 1px solid #DDDDDD !important;
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 19px;
	color: #222222 !important;
}

/* Make sure data rows (not first row) have white background and gray borders */
.only-blog-detail__content tbody tr:not(:first-child) td {
	background: #FFFFFF !important;
	border: 1px solid #DDDDDD !important;
}

.only-blog-detail__content tbody td:first-child {
	font-weight: 400;
	color: #222222;
}

/* Remove alternating row colors - apply to all rows except first */
.only-blog-detail__content tbody tr:nth-child(even) {
	background: #FFFFFF !important;
}

.only-blog-detail__content tbody tr:nth-child(even):hover {
	background: #FFFFFF !important;
}

.only-blog-detail__content tbody tr:nth-child(even) td {
	background: #FFFFFF !important;
}

/* ==========================================================================
   Key Takeaways Block
   ========================================================================== */

.only-key-takeaways {
	margin: 48px 0;
	padding: 32px;
	background: linear-gradient(135deg, #F9F7FF 0%, #F0EBFF 100%);
	border-radius: 16px;
	border: 2px solid #E6E1F5;
}

.only-key-takeaways__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.only-key-takeaways__icon {
	width: 48px;
	height: 48px;
}

.only-key-takeaways__title {
	margin: 0;
	color: #8B4C9F;
}

.only-key-takeaways__content {
	color: #333;
}

.only-key-takeaways__content p {
	margin: 0 0 16px 0;
	padding-left: 24px;
	position: relative;
	line-height: 1.7;
}

.only-key-takeaways__content p:last-child {
	margin-bottom: 0;
}

.only-key-takeaways__content p::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #8B4C9F;
	font-weight: 700;
	font-size: 20px;
}

.only-key-takeaways__content strong {
	color: #1A1A1A;
	font-weight: 600;
}

/* ==========================================================================
   Sources Section
   ========================================================================== */

.only-blog-sources-wrapper {
	margin: 48px 0;
	padding: 24px;
	background: #F5F5F5;
	border-radius: 12px;
}

.only-blog-sources-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 20px;
	background: #8B4C9F;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.only-blog-sources-toggle:hover {
	background: #6B3C7F;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(139, 76, 159, 0.3);
}

.only-blog-sources-toggle svg {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
}

.only-blog-sources-toggle--active svg {
	transform: rotate(180deg);
}

.only-blog-sources-content {
	padding: 24px 20px 0;
}

.only-blog-sources-content p {
	margin: 0 0 12px 0;
}

.only-blog-sources-content a {
	color: #8B4C9F;
	text-decoration: none;
	border-bottom: 1px solid #8B4C9F;
	transition: all 0.2s ease;
}

.only-blog-sources-content a:hover {
	color: #FF6B35;
	border-color: #FF6B35;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.only-blog-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 48px 0;
	padding-top: 32px;
	border-top: 1px solid #E6E1F5;
}

.only-blog-detail__tag {
	display: inline-block;
	padding: 8px 16px;
	background: #F9F7FF;
	color: #8B4C9F;
	text-decoration: none;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #E6E1F5;
	transition: all 0.2s ease;
}

.only-blog-detail__tag:hover {
	background: #8B4C9F;
	color: #fff;
	border-color: #8B4C9F;
	transform: translateY(-2px);
}

/* ==========================================================================
   Share Section
   ========================================================================== */

.only-blog-share {
	margin: 48px 0;
	padding: 32px;
	background: #F9F7FF;
	border-radius: 16px;
	text-align: center;
}

.only-blog-share__title {
	margin: 0 0 24px 0;
	color: #1A1A1A;
}

.only-blog-share__buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.only-blog-share__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: all 0.3s ease;
	text-decoration: none;
}

.only-blog-share__button:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.only-blog-share__button svg {
	width: 24px;
	height: 24px;
}

.only-blog-share__button--facebook {
	background: #1877F2;
	color: #fff;
}

.only-blog-share__button--linkedin {
	background: #0A66C2;
	color: #fff;
}

.only-blog-share__button--x {
	background: #000;
	color: #fff;
}

.only-blog-share__button--whatsapp {
	background: #25D366;
	color: #fff;
}

.only-blog-share__button--email {
	background: #666;
	color: #fff;
}

/* ==========================================================================
   Blog Navigation (Previous / View All / Next)
   ========================================================================== */

.only-blog-nav {
	width: 100%;
	height: 192px;
	background: #F5F6FA;
	display: flex;
	align-items: center;
	justify-content: center;
}

.only-blog-nav__container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1440px;
	height: 92px;
	padding: 0 240px;
	box-sizing: border-box;
}

.only-blog-nav__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.only-blog-nav__item--prev {
	align-items: flex-start;
}

.only-blog-nav__item--center {
	align-items: center;
}

.only-blog-nav__item--next {
	align-items: flex-end;
}

.only-blog-nav__link {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.only-blog-nav__link:hover {
	opacity: 0.7;
}

.only-blog-nav__link--disabled {
	cursor: default;
	opacity: 0.4;
}

.only-blog-nav__link--disabled:hover {
	opacity: 0.4;
}

.only-blog-nav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.only-blog-nav__icon svg {
	width: 40px;
	height: 40px;
}

.only-blog-nav__icon--grid {
	width: 32px;
	height: 32px;
}

.only-blog-nav__icon--grid svg {
	width: 32px;
	height: 32px;
}

.only-blog-nav__text {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	color: #000000;
}

.only-blog-nav__item--next .only-blog-nav__text {
	text-align: right;
}

.only-blog-nav__item--center .only-blog-nav__text {
	text-align: center;
}

/* ==========================================================================
   Related Articles
   ========================================================================== */

.only-related-articles {
	padding: 80px 20px;
	background: #FFFFFF;
	margin-top: 0;
}

.only-related-articles__container {
	max-width: 1440px;
	margin: 0 auto;
}

.only-related-articles__title {
	margin: 0 0 48px 0;
	text-align: center;
	font-family: 'DM Serif Display', Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 44px;
	line-height: 60px;
	color: #111111;
}

.only-related-articles__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.only-related-article {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.only-related-article:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.only-related-article__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.only-related-article__image {
	display: block;
	overflow: hidden;
	background: #F0F0F0;
}

.only-related-article__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.only-related-article:hover .only-related-article__image img {
	transform: scale(1.05);
}

.only-related-article__placeholder {
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #E8E8E8 0%, #F5F5F5 100%);
}

.only-related-article__content {
	padding: 20px;
}

.only-related-article__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: #666;
	margin-bottom: 12px;
}

.only-related-article__meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.only-related-article__meta svg {
	width: 16px;
	height: 16px;
	color: #888;
}

.only-related-article__meta .separator {
	width: 6px;
	height: 6px;
	background: #FFAC85;
	border-radius: 50%;
}

.only-related-article__title {
	margin: 0;
	font-family: 'Roboto Flex', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	color: #222;
	transition: color 0.2s ease;
}

.only-related-article:hover .only-related-article__title {
	color: #8B4C9F;
}

@media (max-width: 1200px) {
	.only-related-articles__title {
		font-size: 38px;
		line-height: 52px;
	}
}

@media (max-width: 992px) {
	.only-related-articles__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.only-related-articles__title {
		font-size: 32px;
		line-height: 44px;
	}

	.only-related-articles {
		padding: 60px 20px;
	}
}

/* ==========================================================================
   Inline Blog Images (DALL-E generated)
   ========================================================================== */

.only-blog-detail__content .only-blog-inline-image {
	margin: 40px auto;
	padding: 0;
	text-align: center;
	max-width: 100%;
}

.only-blog-detail__content .only-blog-inline-image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Blog Table Wrapper
   ========================================================================== */

.only-blog-detail__content .only-blog-table-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 50px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
	border: 1px solid #DDDDDD;
}

.only-blog-detail__content .only-blog-table-wrapper table {
	margin: 0;
	border: none;
	border-radius: 0;
}

/* ==========================================================================
   Product Showcase (inside blog posts)
   Inherits all card/slider styles from product-card.css.
   Slider extends to the right edge of the viewport (Figma spec)
   while left edge stays aligned with blog content.
   ========================================================================== */

.only-blog-detail__article {
	overflow: visible;
}

.only-blog-detail__content .only-edu-products-section {
	position: relative;
	max-width: none;
	margin: 48px 0;
	box-sizing: border-box;
	overflow: visible;
}

/* Slider breaks out to right viewport edge */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider {
	width: calc(100vw - 460px) !important;
	max-width: none !important;
	margin-left: 0 !important;
	overflow: visible !important;
}

/* Wider viewports: container is centered, recalculate */
@media (min-width: 1441px) {
	.only-blog-detail__content .only-edu-products-section .ksq-product-slider {
		width: calc(50vw + 260px) !important;
	}
}

/* Container: no padding, full available width */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__container {
	max-width: 100% !important;
	padding: 0 !important;
}

/* Title: left-aligned, reset blog h2 overrides */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__title {
	text-align: left;
	margin: 0;
	padding-top: 0;
	scroll-margin-top: unset;
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	font-size: 35px;
	line-height: normal;
	color: #111111;
}

/* Reset blog h3 bleeding into product card titles */
.only-blog-detail__content .only-edu-products-section .ksq-product-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: #222222;
	padding-top: 0;
}

/* Reset blog img/a/p styles bleeding into product cards */
.only-blog-detail__content .only-edu-products-section img {
	margin: 0;
	border-radius: 0;
}

.only-blog-detail__content .only-edu-products-section a {
	color: inherit;
	text-decoration: none;
}

.only-blog-detail__content .only-edu-products-section p {
	margin: 0;
}

/* Track container: horizontal scroll within the extended width */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__track-container {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.only-blog-detail__content .only-edu-products-section .ksq-product-slider__track-container::-webkit-scrollbar {
	display: none;
}

/* Lock cards to 342px for horizontal scrolling */
.only-blog-detail__content .only-edu-products-section .ksq-product-card {
	width: 342px !important;
	min-width: 342px !important;
	max-width: 342px !important;
}

.only-blog-detail__content .only-edu-products-section .ksq-product-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Right white fade gradient at the edge of the slider */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 166px;
	height: 472px;
	background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: 5;
}

/* Nav arrows */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__nav--prev {
	left: -15px;
}

.only-blog-detail__content .only-edu-products-section .ksq-product-slider__nav--next {
	right: 16px;
	z-index: 10;
}

/* Tablet: smaller sidebar (300px + 40px gap = 340px + 20px padding = 360px) */
@media (max-width: 1024px) and (min-width: 769px) {
	.only-blog-detail__content .only-edu-products-section .ksq-product-slider {
		width: calc(100vw - 360px) !important;
	}
}

/* Mobile: sidebar is stacked, slider stays within content */
@media (max-width: 768px) {
	.only-blog-detail__content .only-edu-products-section .ksq-product-slider {
		width: calc(100vw - 40px) !important;
	}
}

/* ==========================================================================
   FAQ Accordion (matching Support page style)
   ========================================================================== */

.only-blog-detail__content .only-blog-faq-section {
	margin: 48px 0 0;
}

.only-blog-detail__content .only-blog-faq-section > h2 {
	margin: 0 0 8px 0;
}

.only-blog-detail__content .only-support-faq .only-faq__list {
	display: flex;
	flex-direction: column;
}

.only-blog-detail__content .only-support-faq .only-faq__item {
	width: 100%;
	border-top: 1px solid #D1D4DB;
}

.only-blog-detail__content .only-support-faq .only-faq__item:last-child {
	border-bottom: 1px solid #D1D4DB;
}

.only-blog-detail__content .only-support-faq .only-faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	gap: 16px;
	transition: opacity 0.2s ease;
}

.only-blog-detail__content .only-support-faq .only-faq__question:hover {
	opacity: 0.7;
}

.only-blog-detail__content .only-support-faq .only-faq__question-text {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: #222222;
	flex: 1;
}

.only-blog-detail__content .only-support-faq .only-faq__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #222222;
	display: flex;
	align-items: center;
	justify-content: center;
}

.only-blog-detail__content .only-support-faq .only-faq__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.only-blog-detail__content .only-support-faq .only-faq__icon-horizontal,
.only-blog-detail__content .only-support-faq .only-faq__icon-vertical {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.only-blog-detail__content .only-support-faq .only-faq__item--active .only-faq__icon-vertical {
	opacity: 0;
	transform: rotate(90deg);
}

.only-blog-detail__content .only-support-faq .only-faq__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.only-blog-detail__content .only-support-faq .only-faq__answer[hidden] {
	display: block;
}

.only-blog-detail__content .only-support-faq .only-faq__answer-content {
	padding: 0 0 24px 0;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 18px;
	line-height: 28px;
	color: #444444;
}

.only-blog-detail__content .only-support-faq .only-faq__answer-content p {
	margin: 0 0 12px 0;
}

.only-blog-detail__content .only-support-faq .only-faq__answer-content p:last-child {
	margin-bottom: 0;
}

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

@media (max-width: 1024px) {
	.only-blog-detail__container {
		grid-template-columns: 300px 1fr;
		gap: 40px;
	}

	.only-blog-detail__sidebar {
		width: 300px;
	}

	.only-blog-toc-wrapper {
		width: 300px;
	}

	/* Product Showcase - Tablet: hide arrows, use scroll */
	.only-blog-detail__content .only-edu-products-section .ksq-product-slider__nav {
		display: none;
	}
}

@media (max-width: 768px) {
	.only-blog-detail__container {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.only-blog-detail__sidebar {
		order: -1;
		width: 100%;
	}

	.only-blog-toc-wrapper {
		position: static;
		margin-bottom: 32px;
		width: 100%;
	}

	.only-blog-detail__header {
		padding: 0 16px;
	}

	.only-blog-detail__featured-image {
		height: 300px;
		border-radius: 12px;
	}

	.only-blog-detail__featured-image--placeholder::before {
		width: 120px;
		height: 120px;
	}

	.only-blog-detail__featured-image--placeholder::after {
		font-size: 32px;
	}

	.only-blog-detail__title-wrapper {
		width: 100%;
		gap: 20px;
	}

	.only-blog-detail__title {
		width: 100%;
		font-size: 32px;
		line-height: 40px;
	}

	.only-blog-detail__meta {
		gap: 20px;
		font-size: 16px;
	}

	.only-blog-quote-block {
		flex-direction: column;
		gap: 24px;
		padding: 32px 24px;
		min-height: auto;
		margin: 40px 0;
	}

	.only-blog-quote-block::before {
		left: 0;
	}

	.only-blog-quote-block__icon-wrapper {
		position: relative;
		left: 0;
		top: 0;
		width: 90px;
		height: 60px;
	}

	.only-blog-quote-block__icon-wrapper svg {
		width: 90px !important;
		height: 60px !important;
		max-width: 90px;
		max-height: 60px;
	}

	.only-blog-quote-block__content {
		position: relative;
		left: 0;
		top: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		padding: 0;
	}

	.only-blog-quote-block__title {
		width: 100%;
		font-size: 22px;
		line-height: 28px;
	}

	.only-blog-quote-block__text,
	.only-blog-quote-block__text p {
		width: 100%;
		font-size: 18px;
		line-height: 28px;
	}

	.only-blog-quote-block__author {
		font-size: 18px;
		line-height: 28px;
	}

	.only-blog-share__buttons {
		gap: 12px;
	}

	.only-related-articles__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.only-blog-detail__content table {
		font-size: 14px;
		margin: 40px auto;
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.only-blog-detail__content thead,
	.only-blog-detail__content tbody,
	.only-blog-detail__content tr {
		display: table;
		width: 100%;
		table-layout: fixed;
	}

	.only-blog-detail__content thead th,
	.only-blog-detail__content tbody td {
		padding: 12px 16px;
		font-size: 14px;
	}

	/* Blog Navigation - Tablet */
	.only-blog-nav__container {
		padding: 0 40px;
	}
}

/* ==========================================================================
   Mobile Styles (Fully Responsive with 20px padding)
   ========================================================================== */

@media (max-width: 480px) {
	/* Main Container - 100% width with 20px padding */
	.only-blog-detail {
		width: 100%;
		max-width: 100%;
		padding: 0 0 40px;
		background: #FFFFFF;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	.only-blog-detail__container {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		gap: 24px;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	/* Article content - prevent overflow */
	.only-blog-detail__article {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	.only-blog-detail__content {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* WordPress columns - prevent overflow */
	.only-blog-detail__content .wp-block-columns {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	.only-blog-detail__content .wp-block-column {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* Breadcrumb - 100% width with 20px padding, single line */
	.only-blog-detail .only-breadcrumb-wrapper {
		width: 100%;
		max-width: 100%;
		padding: 16px 20px 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.only-blog-detail .only-breadcrumb,
	.only-blog-detail .woocommerce-breadcrumb {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 12px;
		line-height: 14px;
		gap: 8px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.only-blog-detail .only-breadcrumb__item,
	.only-blog-detail .only-breadcrumb__link,
	.only-blog-detail .woocommerce-breadcrumb a,
	.only-blog-detail .woocommerce-breadcrumb > span {
		font-size: 12px;
		line-height: 14px;
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Current page (last item) - truncate with ellipsis */
	.only-blog-detail .only-breadcrumb__current,
	.only-blog-detail .woocommerce-breadcrumb > span:last-of-type {
		color: #666666;
		font-size: 12px;
		line-height: 14px;
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Home icon */
	.only-blog-detail .woocommerce-breadcrumb > span:first-child a,
	.only-blog-detail .woocommerce-breadcrumb > a:first-child {
		width: 16px;
		height: 16px;
		min-width: 16px;
		background-size: 16px 16px;
		flex-shrink: 0;
	}

	/* Separator */
	.only-blog-detail .woocommerce-breadcrumb .breadcrumb-separator {
		width: 5px;
		height: 8px;
		min-width: 5px;
		background-size: 5px 8px;
		flex-shrink: 0;
	}

	/* Header Section - 100% width with 20px padding */
	.only-blog-detail__header {
		width: 100%;
		max-width: 100%;
		margin: 16px auto 20px;
		padding: 0 20px;
		box-sizing: border-box;
	}

	/* Title Wrapper - 100% width */
	.only-blog-detail__title-wrapper {
		width: 100%;
		max-width: 100%;
		gap: 12px;
		align-items: center;
	}

	/* Title - Mobile Styling - 100% width */
	.only-blog-detail__title {
		width: 100%;
		max-width: 100%;
		font-family: 'DM Serif Display', serif;
		font-style: normal;
		font-weight: 400;
		font-size: 22px;
		line-height: 26px;
		text-align: center;
		color: #000000;
	}

	/* Meta Information - 100% width */
	.only-blog-detail__meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		flex-wrap: wrap;
	}

	.only-blog-detail__meta > span {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0;
		gap: 8px;
	}

	/* Meta Icons */
	.only-blog-detail__meta svg {
		width: 16px;
		height: 16px;
		padding: 0;
	}

	/* Orange separator */
	.only-blog-detail__meta > svg {
		width: 8px;
		height: 8px;
		color: #FFAC85;
	}

	/* Meta Text */
	.only-blog-detail__date,
	.only-blog-detail__reading-time {
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		color: #222222;
	}

	.only-blog-detail__author {
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		color: #888888;
	}

	.only-blog-detail__author-link {
		font-size: 12px;
		line-height: 14px;
	}

	/* Featured Image - Full width, no padding */
	.only-blog-detail__featured-image {
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
		height: 200px;
		margin-top: 20px;
		border-radius: 0;
		background: #F5F6FA;
	}

	.only-blog-detail__featured-image--placeholder::before {
		width: 80px;
		height: 80px;
	}

	.only-blog-detail__featured-image--placeholder::after {
		font-size: 24px;
	}

	/* Sidebar / TOC - Hidden on mobile */
	.only-blog-detail__sidebar {
		display: none;
	}

	.only-blog-toc-wrapper {
		display: none;
	}

	/* Article Content - 100% width */
	.only-blog-detail__article {
		width: 100%;
		max-width: 100%;
	}

	.only-blog-detail__content {
		width: 100%;
		font-size: 16px;
		line-height: 24px;
		color: #444444;
	}

	.only-blog-detail__content p {
		margin: 0 0 20px 0;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #444444;
	}

	.only-blog-detail__content h2 {
		margin: 32px 0 12px 0;
		padding-top: 16px;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 24px;
		color: #000000;
	}

	.only-blog-detail__content h3 {
		margin: 24px 0 12px 0;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 21px;
		color: #444444;
	}

	.only-blog-detail__content h4 {
		margin: 20px 0 10px 0;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		line-height: 19px;
		color: #444444;
	}

	.only-blog-detail__content ul,
	.only-blog-detail__content ol {
		margin: 0 0 20px 0;
		padding-left: 24px;
	}

	.only-blog-detail__content li {
		margin-bottom: 10px;
		font-size: 16px;
		line-height: 24px;
	}

	.only-blog-detail__content img {
		width: 100%;
		max-width: 100%;
		margin: 24px 0;
		border-radius: 8px;
	}

	.only-blog-detail__content blockquote {
		margin: 24px 0;
		padding: 20px 24px;
		border-radius: 8px;
	}

	/* Quote Block - Mobile - 100% width */
	.only-blog-quote-block {
		position: relative;
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 24px 0;
		padding: 24px 0;
	}

	.only-blog-quote-block::before {
		left: 0;
		right: 0;
		border-radius: 12px;
	}

	.only-blog-quote-block__icon-wrapper {
		position: absolute;
		left: 0;
		top: 24px;
		width: 72.5px;
		height: 50px;
	}

	.only-blog-quote-block__icon-wrapper svg {
		width: 72.5px !important;
		height: 50px !important;
		max-width: 72.5px;
		max-height: 50px;
	}

	.only-blog-quote-block__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0;
		gap: 12px;
		margin-left: 20px;
		margin-right: 20px;
		padding-top: 50px;
		width: auto;
	}

	.only-blog-quote-block__title {
		width: 100%;
		max-width: 100%;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: 18px !important;
		line-height: 21px;
		color: #000000;
	}

	.only-blog-quote-block__text {
		width: 100%;
		max-width: 100%;
	}

	.only-blog-quote-block__text p {
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 16px !important;
		line-height: 24px !important;
		color: #444444;
	}

	.only-blog-quote-block__text .only-blog-quote-block__author,
	.only-blog-quote-block__author {
		font-size: 16px !important;
		line-height: 24px !important;
	}

	/* Key Takeaways Block - Mobile - 100% width */
	.only-key-takeaways {
		width: 100%;
		margin: 24px 0;
		padding: 24px 20px;
		border-radius: 12px;
		box-sizing: border-box;
	}

	.only-key-takeaways__header {
		gap: 12px;
		margin-bottom: 16px;
	}

	.only-key-takeaways__icon {
		width: 40px;
		height: 40px;
	}

	.only-key-takeaways__title {
		font-size: 20px;
		line-height: 23px;
		color: #5C41BB;
	}

	.only-key-takeaways__content p {
		font-size: 16px;
		line-height: 24px;
		padding-left: 20px;
	}

	/* Product Showcase - Mobile: hide arrows, reduce fade */
	.only-blog-detail__content .only-edu-products-section .ksq-product-slider__nav {
		display: none;
	}

	.only-blog-detail__content .only-edu-products-section .ksq-product-slider__wrapper::after {
		width: 60px;
		height: 100%;
	}

	/* Table Styles - Mobile (Horizontal Scroll) */
	.only-blog-detail__content .wp-block-table {
		display: block;
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 24px 0;
		padding: 0;
		overflow: hidden;
		box-sizing: border-box;
	}

	/* Table scroll container */
	.only-blog-detail__content .wp-block-table table {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 16px 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		border: none !important;
		border-collapse: separate !important;
		border-spacing: 0 !important;
		box-sizing: border-box !important;
	}

	.only-blog-detail__content .wp-block-table table tbody {
		display: table !important;
		width: auto !important;
		min-width: 600px !important;
		border-radius: 12px !important;
		overflow: hidden !important;
	}

	.only-blog-detail__content thead {
		display: table-header-group !important;
	}

	.only-blog-detail__content tbody {
		display: table !important;
		min-width: 600px !important;
	}

	.only-blog-detail__content tr {
		display: table-row !important;
	}

	.only-blog-detail__content thead th,
	.only-blog-detail__content tbody td {
		display: table-cell !important;
		height: 40px !important;
		padding: 12px 16px !important;
		font-family: 'Roboto Flex', sans-serif !important;
		font-style: normal !important;
		font-weight: 400 !important;
		font-size: 14px !important;
		line-height: 16px !important;
		color: #222222 !important;
		background: #FFFFFF !important;
		border: 1px solid #AD6DF43D !important;
		border-top: none !important;
		border-left: none !important;
		vertical-align: middle !important;
		white-space: nowrap !important;
		box-sizing: border-box !important;
	}

	/* First column - no left border but add it back */
	.only-blog-detail__content tbody td:first-child {
		border-left: 1px solid #AD6DF43D !important;
	}

	/* First row cells need top border */
	.only-blog-detail__content tbody tr:first-child td {
		border-top: 1px solid #AD6DF43D !important;
	}

	/* Header row styles - proper thead */
	.only-blog-detail__content thead th {
		height: 40px !important;
		font-weight: 700 !important;
		color: #000000 !important;
		background: #AD6DF452 !important;
		border: 1px solid #FFFFFF !important;
		border-top: none !important;
		border-left: none !important;
	}

	/* Fallback: first tbody row as header ONLY when table has no <thead> */
	.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child td {
		height: 40px !important;
		padding: 12px 16px !important;
		font-family: 'Roboto Flex', sans-serif !important;
		font-style: normal !important;
		font-weight: 700 !important;
		font-size: 14px !important;
		line-height: 16px !important;
		color: #000000 !important;
		background: #AD6DF452 !important;
		background-color: #AD6DF452 !important;
		border: 1px solid #FFFFFF !important;
		border-top: none !important;
		border-left: none !important;
		vertical-align: middle !important;
		white-space: nowrap !important;
	}

	/* Header first cell - top-left corner (no thead fallback) */
	.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child td:first-child {
		border-top-left-radius: 12px !important;
		border-left: 1px solid #AD6DF452 !important;
		border-top: 1px solid #AD6DF452 !important;
	}

	/* Header last cell - top-right corner (no thead fallback) */
	.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child td:last-child {
		border-top-right-radius: 12px !important;
		border-right: 1px solid #AD6DF452 !important;
		border-top: 1px solid #AD6DF452 !important;
	}

	/* Body rows - not first row */
	.only-blog-detail__content tbody tr:not(:first-child) {
		background: #FFFFFF !important;
	}

	.only-blog-detail__content tbody tr:not(:first-child) td {
		background: #FFFFFF !important;
		border: 1px solid #AD6DF43D !important;
		border-top: none !important;
		border-left: none !important;
	}

	.only-blog-detail__content tbody tr:not(:first-child) td:first-child {
		border-left: 1px solid #AD6DF43D !important;
	}

	/* Last row - bottom corners */
	.only-blog-detail__content tbody tr:last-child td:first-child {
		border-bottom-left-radius: 12px !important;
	}

	.only-blog-detail__content tbody tr:last-child td:last-child {
		border-bottom-right-radius: 12px !important;
	}

	/* Override WordPress fixed layout */
	.only-blog-detail__content table.has-fixed-layout {
		table-layout: auto !important;
	}

	/* Custom scrollbar for table - Scroll indicator bar */
	.only-blog-detail__content .wp-block-table table::-webkit-scrollbar {
		height: 3px !important;
		background: #DDDDDD !important;
		border-radius: 20px !important;
	}

	.only-blog-detail__content .wp-block-table table::-webkit-scrollbar-track {
		background: #DDDDDD !important;
		border-radius: 20px !important;
	}

	.only-blog-detail__content .wp-block-table table::-webkit-scrollbar-thumb {
		background: #222222 !important;
		border-radius: 20px !important;
	}

	/* Firefox scrollbar */
	.only-blog-detail__content .wp-block-table table {
		scrollbar-width: thin !important;
		scrollbar-color: #222222 #DDDDDD !important;
	}

	/* Sources Section - Mobile - 100% width */
	.only-blog-sources-wrapper {
		width: 100%;
		margin: 24px 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}

	.only-blog-sources-toggle {
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 0;
		gap: 8px;
	}

	.only-blog-sources-toggle svg {
		width: 20px;
		height: 20px;
		color: #FF5B5D;
	}

	.only-blog-sources-toggle span {
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 19px;
		color: #FF5B5D;
	}

	.only-blog-sources-toggle:hover {
		background: transparent;
		transform: none;
		box-shadow: none;
	}

	/* Tags - Mobile - 100% width */
	.only-blog-detail__tags {
		width: 100%;
		margin: 24px 0;
		padding-top: 24px;
		gap: 8px;
	}

	.only-blog-detail__tag {
		padding: 6px 12px;
		font-size: 12px;
		border-radius: 16px;
	}

	/* Share Section - Mobile - 100% width */
	.only-blog-share {
		width: 100%;
		margin: 24px 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		text-align: left;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
	}

	.only-blog-share__title {
		margin: 0;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 14px;
		color: #222222;
		width: auto;
	}

	.only-blog-share__buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0;
		gap: 8px;
		justify-content: flex-start;
	}

	.only-blog-share__button {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		background: #FFFFFF;
		border: 1px solid #AAAAAA;
	}

	.only-blog-share__button svg {
		width: 14px;
		height: 14px;
		color: #222222;
	}

	.only-blog-share__button--facebook,
	.only-blog-share__button--linkedin,
	.only-blog-share__button--x,
	.only-blog-share__button--whatsapp,
	.only-blog-share__button--email {
		background: #FFFFFF;
		color: #222222;
	}

	.only-blog-share__button--facebook svg,
	.only-blog-share__button--linkedin svg,
	.only-blog-share__button--x svg,
	.only-blog-share__button--whatsapp svg,
	.only-blog-share__button--email svg {
		color: #222222;
	}

	.only-blog-share__button:hover {
		transform: none;
		box-shadow: none;
		border-color: #222222;
	}

	/* Separator Line before Share */
	.only-blog-detail__article > .only-blog-share::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -24px;
		height: 1px;
		background: #DDDDDD;
	}

	/* Blog Navigation Section - Mobile - 100% width */
	.only-blog-nav {
		width: 100%;
		height: 107px;
		background: #F5F6FA;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.only-blog-nav__container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 59px;
		padding: 24px 24px;
		box-sizing: border-box;
	}

	.only-blog-nav__item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.only-blog-nav__item--prev {
		align-items: flex-start;
		width: 62px;
	}

	.only-blog-nav__item--center {
		align-items: center;
		width: 58px;
	}

	.only-blog-nav__item--next {
		align-items: flex-end;
		width: 33px;
	}

	.only-blog-nav__link {
		gap: 18px;
	}

	.only-blog-nav__icon {
		width: 24px;
		height: 24px;
	}

	.only-blog-nav__icon svg {
		width: 24px;
		height: 24px;
	}

	.only-blog-nav__icon--grid {
		width: 20px;
		height: 20px;
	}

	.only-blog-nav__icon--grid svg {
		width: 20px;
		height: 20px;
	}

	.only-blog-nav__text {
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 19px;
		color: #000000;
	}

	/* Mobile: Show short text */
	.only-blog-nav__item--prev .only-blog-nav__text {
		font-size: 0;
	}

	.only-blog-nav__item--prev .only-blog-nav__text::after {
		content: 'Previous';
		font-size: 16px;
	}

	.only-blog-nav__item--next .only-blog-nav__text {
		font-size: 0;
	}

	.only-blog-nav__item--next .only-blog-nav__text::before {
		content: 'Next';
		font-size: 16px;
	}

	.only-blog-nav__item--center .only-blog-nav__text {
		font-size: 0;
	}

	.only-blog-nav__item--center .only-blog-nav__text::after {
		content: 'View All';
		font-size: 16px;
	}

	/* Related Articles - Mobile - 100% width */
	.only-related-articles {
		width: 100%;
		padding: 24px 0;
		margin-top: 0;
		background: #FFFFFF;
	}

	.only-related-articles__container {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.only-related-articles__title {
		width: 100%;
		margin: 0 0 24px 0;
		font-family: 'DM Serif Display', serif;
		font-style: normal;
		font-weight: 400;
		font-size: 22px;
		line-height: 26px;
		text-align: center;
		color: #111111;
	}

	.only-related-articles__grid {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding: 0;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.only-related-articles__grid::-webkit-scrollbar {
		display: none;
	}

	.only-related-article {
		flex: 0 0 260px;
		width: 260px;
		scroll-snap-align: start;
		border-radius: 8px;
		box-shadow: none;
	}

	.only-related-article__image img {
		width: 260px;
		height: 166px;
		border-radius: 8px;
	}

	.only-related-article__content {
		padding: 12px 0;
	}

	.only-related-article__meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0;
		gap: 12px;
		margin-bottom: 8px;
	}

	.only-related-article__meta span {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 14px;
		color: #222222;
	}

	.only-related-article__meta svg {
		width: 16px;
		height: 16px;
		color: #888888;
	}

	.only-related-article__meta .separator {
		width: 8px;
		height: 8px;
		background: #FFAC85;
		border-radius: 50%;
	}

	.only-related-article__title {
		margin: 0;
		font-family: 'Roboto Flex', sans-serif;
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		color: #212B35;
	}
}

/* ==========================================================================
   Migrated Shopify Image Blocks
   Articles imported from the Shopify blog wrap product shots in
   .multi-watch-image-block (always two images) and
   .single-watch-image-banner (always one). The markup ships with no styles,
   so without these rules the paired images stack vertically instead of
   sitting side by side.
   ========================================================================== */

.only-blog-detail__content .multi-watch-image-block > span {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: start;
	margin: 32px 0;
}

/* A few exported blocks carry the class on a plain text paragraph with no
   images. Only grid the ones that actually contain a linked image, so those
   stray blocks keep flowing as normal text. */
.only-blog-detail__content .multi-watch-image-block:not(:has(img)) > span {
	display: block;
	margin: 0;
}

/* The images carry an inline style="float: none;" from the export, so the
   grid item itself is what needs sizing. */
.only-blog-detail__content .multi-watch-image-block > span > a {
	display: block;
	margin: 0;
}

/* Some exported blocks separate the two links with a <br>. As a grid item it
   would take a cell of its own and push the second image onto a new row. */
.only-blog-detail__content .multi-watch-image-block > span > br {
	display: none;
}

/* The same export also carries inline bottom margins on the images, which
   breaks the even grid spacing. */
.only-blog-detail__content .multi-watch-image-block > span img[style] {
	margin: 0 !important;
}

.only-blog-detail__content .multi-watch-image-block > span img,
.only-blog-detail__content .single-watch-image-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: 12px;
}

.only-blog-detail__content .single-watch-image-banner {
	margin: 32px 0;
}

.only-blog-detail__content .single-watch-image-banner img {
	aspect-ratio: auto;
	height: auto;
}

/* Two columns is the point of the block, so it is kept on tablet and only
   collapses on narrow phones where two shots would be too small to read. */
@media (max-width: 480px) {
	.only-blog-detail__content .multi-watch-image-block > span {
		grid-template-columns: 1fr;
		gap: 16px;
		margin: 24px 0;
	}

	.only-blog-detail__content .multi-watch-image-block > span img,
	.only-blog-detail__content .single-watch-image-banner img {
		border-radius: 8px;
	}
}

/* ==========================================================================
   Table Header Alignment
   The header rules above hardcode text-align:left, which beats the
   text-align:center that migrated Shopify tables carry on the <table> element
   itself - so headers sat left while their data cells were centred.
   Inheriting instead lets each table decide, and tables with no alignment of
   their own still fall back to left via the inherited default.
   ========================================================================== */

.only-blog-detail__content thead th,
.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child td {
	text-align: inherit;
}

/* Cell contents are wrapped in <p> by the export; those paragraphs must not
   re-introduce their own alignment. */
.only-blog-detail__content table th > p,
.only-blog-detail__content table td > p {
	text-align: inherit;
	margin: 0;
}