*/
.only-blog-detail__content table:not(:has(thead)) tbody tr:first-child {
background: transparent !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 #EBDCFC !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 #EBDCFC !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 #EBDCFC !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
========================================================================== */
/* Flat lilac card; the binoculars illustration pokes 37px out of the top
right corner, so the block reserves that much space above itself. */
.only-key-takeaways {
position: relative;
margin: 37px 0 50px 0;
padding: 50px;
background: rgba(173, 109, 244, 0.08);
border-radius: 20px;
}
.only-blog-detail__content > * + .only-key-takeaways {
margin-top: 87px;
}
.only-key-takeaways__header {
margin-bottom: 24px;
padding-right: 210px;
}
/* Two classes so the generic content img rules (width:100%, margins,
rounded corners) do not apply to the illustration */
.only-blog-detail__content .only-key-takeaways__icon {
position: absolute;
top: -37px;
right: 24px;
width: 204px;
max-width: none;
height: 113px;
margin: 0;
border-radius: 0;
}
.only-blog-detail__content .only-key-takeaways__title {
margin: 0;
font-family: 'Roboto Flex', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: normal;
color: #5C41BB;
}
.only-key-takeaways__content {
font-size: 20px;
line-height: 32px;
color: #444444;
}
.only-blog-detail__content .only-key-takeaways__list {
margin: 0;
padding-left: 30px;
list-style: disc;
}
.only-blog-detail__content .only-key-takeaways__list li {
margin: 0 0 12px 0;
}
.only-blog-detail__content .only-key-takeaways__list li:last-child {
margin-bottom: 0;
}
.only-key-takeaways__content strong {
color: #000000;
font-weight: 500;
}
/* ==========================================================================
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
========================================================================== */
/* Divider line 40px below the article, then a right-aligned row of
outlined square buttons */
.only-blog-share {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 16px;
margin: 80px 0 100px;
padding: 0;
background: transparent;
text-align: left;
}
.only-blog-detail__article > .only-blog-share::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -40px;
height: 1px;
background: #DDDDDD;
}
.only-blog-share__title {
margin: 0;
font-family: 'Roboto Flex', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: normal;
color: #000000;
}
.only-blog-share__buttons {
display: flex;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.only-blog-share__button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #AAAAAA;
color: #222222;
box-sizing: border-box;
transition: border-color 0.2s ease;
text-decoration: none;
}
.only-blog-share__button:hover {
border-color: #222222;
}
.only-blog-share__button svg {
width: 18px;
height: 18px;
color: #222222;
}
/* ==========================================================================
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;
/* Same 20px gutter as the article, so Previous/Next line up with its edges */
padding: 0 20px;
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;
}
/* The grid glyph is smaller than the arrows, but its box keeps the arrow
size so all three labels sit on the same line */
.only-blog-nav__icon--grid {
width: 40px;
height: 40px;
}
.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
========================================================================== */
/* No bottom padding: the above-footer block that follows brings its own
top spacing */
.only-related-articles {
padding: 100px 20px 0;
background: #FFFFFF;
margin-top: 0;
}
.only-related-articles__container {
max-width: 1440px;
margin: 0 auto;
}
.only-related-articles__title {
margin: 0 0 50px 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;
}
/* Plain layout: rounded image with the text underneath, no card box */
.only-related-article {
background: transparent;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.only-related-article__link {
display: block;
text-decoration: none;
color: inherit;
}
.only-related-article__image {
display: block;
overflow: hidden;
border-radius: 12px;
background: #F0F0F0;
}
.only-related-article__image img {
width: 100%;
height: 220px;
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: 220px;
background: linear-gradient(135deg, #E8E8E8 0%, #F5F5F5 100%);
}
.only-related-article__content {
padding: 20px 0 0;
}
.only-related-article__meta {
display: flex;
align-items: center;
gap: 20px;
font-size: 16px;
line-height: normal;
color: #222222;
margin-bottom: 12px;
}
.only-related-article__meta span {
display: flex;
align-items: center;
gap: 12px;
}
.only-related-article__meta svg {
width: 20px;
height: 20px;
color: #888;
}
/* Same four-point star as the separators in the post header */
.only-related-article__meta .separator {
flex: none;
width: 12px;
height: 12px;
border-radius: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 16 16'%3E%3Cpath fill='%23FFAC85' d='M11.8673 4H12.1327C12.8071 8.02 15.98 11.1928 20 11.8673V12.1327C15.98 12.8072 12.8071 15.98 12.1327 20H11.8673C11.1929 15.98 8.02001 12.8072 4 12.1327V11.8673C8.02001 11.1928 11.1929 8.02 11.8673 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.only-related-article__title {
margin: 0;
font-family: 'Roboto Flex', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: #212B35;
transition: color 0.2s ease;
}
.only-related-article:hover .only-related-article__title {
color: #FF5100;
}
@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
========================================================================== */
/* Every blog table sits in this box: AI posts write it themselves, and
only_wrap_blog_tables() (inc/blog-shortcodes.php) adds it around WordPress
table blocks and the bare Shopify-import tables. The box draws the rounded
frame and scrolls sideways when the table is wider than the column, so the
corners stay fixed at every width. */
.only-blog-detail__content .only-blog-table-wrapper {
width: 100%;
max-width: 100%;
margin: 10px 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
border: 1px solid #EBDCFC;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #222222 #DDDDDD;
}
.only-blog-detail__content .only-blog-table-wrapper::-webkit-scrollbar {
height: 3px;
background: #DDDDDD;
}
.only-blog-detail__content .only-blog-table-wrapper::-webkit-scrollbar-thumb {
background: #222222;
border-radius: 20px;
}
/* Table blocks: the spacing stays on the figure (it overlaps the paragraph
and heading margins around it), the wrapper inside adds none */
.only-blog-detail__content figure.wp-block-table {
margin: 10px 0;
overflow: visible;
}
.only-blog-detail__content figure.wp-block-table .only-blog-table-wrapper {
margin: 0;
}
/* The frame draws the outer edge; border-style:hidden stops the edge cells
from doubling it. max-width:none lets a wide table overflow the box (and
scroll) instead of being squeezed. */
/* !important throughout: some imported/older tables carry inline styles
(style="width: 889px", or their own border, border-radius and margin) */
.only-blog-detail__content .only-blog-table-wrapper table {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
border: none !important;
border-style: hidden !important;
border-radius: 0 !important;
}
/* Size columns by their content as in the design, instead of the equal
widths WordPress forces */
.only-blog-detail__content .only-blog-table-wrapper table.has-fixed-layout {
table-layout: auto;
}
/* The article allows breaking anywhere (for long URLs); inside a cell that
would let the auto layout squeeze a column until a word splits
("Weigh / t"), so cells only wrap between words. Selector outranks
WordPress core's .wp-block-table .has-fixed-layout td rule. */
.only-blog-detail .only-blog-detail__content .only-blog-table-wrapper th,
.only-blog-detail .only-blog-detail__content .only-blog-table-wrapper td {
word-break: normal;
overflow-wrap: normal;
}
/* ==========================================================================
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: 32px 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;
}
/* The slider width is based on 100vw, which includes the page scrollbar,
so the arrow sits 16px further in to stay fully visible */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__nav--next {
right: 32px;
z-index: 10;
}
/* An arrow with nowhere to go is hidden (only the next arrow shows at the
start of the row, only the previous one at the end) */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__nav:disabled {
display: none;
}
/* 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 minmax(0, 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: minmax(0, 1fr);
gap: 32px;
overflow-x: hidden;
}
/* Tablet / phablet typography (481-768px previously fell back to
full desktop scale because all mobile type lived at max-width 480px) */
.only-blog-detail__content {
font-size: 17px;
line-height: 1.7;
}
.only-blog-detail__content p,
.only-blog-detail__content li {
font-size: 17px;
line-height: 1.7;
}
.only-blog-detail__content h2 {
font-size: 24px;
line-height: 32px;
}
.only-blog-detail__content h3 {
font-size: 20px;
line-height: 28px;
margin: 16px 0 8px 0;
}
.only-blog-detail__content h4 {
font-size: 18px;
line-height: 24px;
}
.only-blog-detail__content ul,
.only-blog-detail__content ol {
padding-left: 24px;
}
.only-blog-detail__content img {
margin: 10px 0;
}
.only-blog-detail__content blockquote {
padding: 20px 24px;
}
.only-key-takeaways {
width: 100%;
margin: 24px 0 32px 0;
padding: 32px 20px;
border-radius: 12px;
box-sizing: border-box;
}
.only-blog-detail__content > * + .only-key-takeaways {
margin-top: 48px;
}
.only-key-takeaways__header {
margin-bottom: 12px;
padding-right: 120px;
}
.only-blog-detail__content .only-key-takeaways__icon {
top: -24px;
right: 0;
width: 136px;
height: 75px;
}
.only-blog-detail__content .only-key-takeaways__title {
font-size: 20px;
}
.only-key-takeaways__content,
.only-blog-detail__content .only-key-takeaways__list li {
font-size: 16px;
line-height: 24px;
}
.only-blog-detail__content .only-key-takeaways__list {
padding-left: 24px;
}
.only-blog-detail__content .only-key-takeaways__list li {
margin-bottom: 8px;
}
.only-blog-detail__content pre {
padding: 12px;
}
/* Slider title is 4 classes deep and outranks the mobile h2 rule */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__title {
font-size: 24px;
line-height: 32px;
}
/* Table of Contents is hidden on tablet and below: once the layout is a
single column the TOC sits between the header and the article, pushing
the content down without earning its space. */
.only-blog-detail__sidebar,
.only-blog-toc-wrapper {
display: none;
}
.only-blog-detail__header {
padding: 0 16px;
}
.only-blog-detail__featured-image {
height: auto;
border-radius: 12px;
}
/* The base rule pins the image to height:100% with object-fit:cover, which
crops it. With an auto-height container let the image set its own height
so the full picture shows at its natural aspect ratio. */
.only-blog-detail__featured-image img {
height: auto;
object-fit: contain;
}
.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;
margin-left: 0;
margin-right: 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-related-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Tables - tablet and phone. The table stays a real table (one grid, so
header and body columns always line up); the wrapper box scrolls it
sideways. Every cell keeps at least 120px and wraps between words, so
narrow screens scroll instead of squeezing text over the next cell. */
.only-blog-detail__content .only-blog-table-wrapper,
.only-blog-detail__content figure.wp-block-table {
margin: 10px 0;
}
.only-blog-detail__content figure.wp-block-table .only-blog-table-wrapper {
margin: 0;
}
.only-blog-detail__content .only-blog-table-wrapper table {
width: auto !important;
min-width: 100%;
}
/* Extra .only-blog-detail class: the desktop cell rules are !important
and fairly specific */
.only-blog-detail .only-blog-detail__content .only-blog-table-wrapper th,
.only-blog-detail .only-blog-detail__content .only-blog-table-wrapper td {
/* In auto table layout a cell width acts as the column minimum, and
CSS replaces the width="" attributes of imported tables */
width: 120px;
min-width: 120px;
height: auto !important;
padding: 12px 16px !important;
font-size: 14px !important;
line-height: 18px !important;
white-space: normal !important;
}
/* Cell text wrapped in must follow the cell, not the bigger mobile
paragraph size */
.only-blog-detail .only-blog-detail__content .only-blog-table-wrapper th p,
.only-blog-detail .only-blog-detail__content .only-blog-table-wrapper td p {
margin: 0;
font-size: inherit !important;
line-height: inherit !important;
}
/* Blog Navigation - Tablet.
Previously only the container padding was reduced here, so 481-768px kept
the desktop height (192px) and 24px link text, leaving the three items
crammed together in an oversized bar. */
.only-blog-nav {
height: auto;
min-height: 120px;
padding: 24px 0;
}
.only-blog-nav__container {
height: auto;
padding: 0 24px;
gap: 16px;
}
.only-blog-nav__item {
gap: 10px;
min-width: 0;
flex: 1 1 0;
}
.only-blog-nav__item--center {
align-items: center;
}
.only-blog-nav__item--next {
align-items: flex-end;
}
.only-blog-nav__text {
font-size: 16px;
line-height: 22px;
}
.only-blog-nav__icon svg,
.only-blog-nav__icon--grid svg {
width: 24px;
height: 24px;
}
/* Share row - Tablet: tighter spacing around the divider */
.only-blog-share {
margin: 64px 0 48px;
}
.only-blog-detail__article > .only-blog-share::before {
top: -32px;
}
.only-blog-share__buttons {
gap: 8px;
flex-wrap: wrap;
}
/* Breadcrumb - single line, matching the mobile design: the trail never
wraps; the current-page item shrinks and truncates with an ellipsis. */
.only-blog-detail .only-breadcrumb-wrapper {
width: 100%;
max-width: 100%;
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;
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 {
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 {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.only-blog-detail .woocommerce-breadcrumb > span:first-child a,
.only-blog-detail .woocommerce-breadcrumb > a:first-child {
flex-shrink: 0;
}
}
/* ==========================================================================
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: 24px 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: auto;
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 10px 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: 18px 0 8px 0;
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: 14px 0 8px 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: 14px 0 8px 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 10px 0;
padding-left: 24px;
}
.only-blog-detail__content li {
margin-bottom: 8px;
font-size: 16px;
line-height: 24px;
}
.only-blog-detail__content img {
width: 100%;
max-width: 100%;
margin: 10px 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 - Mobile: layout comes from the max-width 768px block */
/* Product Showcase - Mobile: hide arrows, reduce fade */
.only-blog-detail__content .only-edu-products-section {
margin: 16px 0 24px;
}
.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%;
}
/* Small 200px cards so one and a half fit on screen (Figma mobile) */
.only-blog-detail__content .only-edu-products-section .ksq-product-slider__track {
gap: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
gap: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__link {
gap: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__image {
width: 200px;
height: 200px;
border-radius: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__badge-bestseller {
top: 10px;
left: 10px;
height: 20px;
padding: 4px 8px;
gap: 4px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__badge-bestseller,
.only-blog-detail__content .only-edu-products-section .ksq-product-card__badge-bestseller span {
font-size: 10px;
line-height: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__badge-bestseller svg {
width: 12px;
height: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__wishlist {
top: 10px;
right: 10px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__mobile-cart {
right: 12px;
bottom: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__content {
gap: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__info {
gap: 6px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__reviews {
gap: 8px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__star {
width: 14px;
height: 14px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__review-text {
font-size: 12px;
line-height: 14px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__title {
font-size: 14px;
line-height: 16px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__prices {
gap: 12px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__price-row {
gap: 6px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__price-row,
.only-blog-detail__content .only-edu-products-section .ksq-product-card__price-row * {
font-size: 16px;
line-height: 19px;
}
.only-blog-detail__content .only-edu-products-section .ksq-product-card__discount {
padding: 3px 8px;
font-size: 10px;
line-height: 12px;
}
/* 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: 40px 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 {
top: -20px;
}
/* Blog Navigation Section - Mobile - 100% width */
.only-blog-nav {
width: 100%;
height: 107px;
min-height: 0;
padding: 0;
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: 24px;
height: 24px;
}
.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: 40px 0;
margin-top: 0;
background: #FFFFFF;
}
.only-related-articles__container {
width: 100%;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
/* Extra class: related-articles.css loads later and resets this margin to 0 */
.only-blog-detail .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;
}
.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
. 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
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 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;
}