/** Shopify CDN: Minification failed

Line 1884:0 Unexpected "}"

**/
/* ================================================================
   CRITICAL: SHOPIFY TEMPLATE OVERRIDES
================================================================ */
.artforframe-article .main-content,
.artforframe-article .wrapper,
.artforframe-article .rte,
.artforframe-article #MainContent,
.artforframe-article .article__content,
.artforframe-article .article__grid {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ================================================================
   ENHANCED BRAND COLOR SYSTEM - V6 SOPHISTICATED
================================================================ */
:root {
    --brand-black: #1a1a1a;
    --brand-charcoal: #2c2c2c;
    --brand-white: #fefefe;
    --brand-off-white: #fafafa;
    --brand-gray-light: #f5f5f5;
    --brand-gray-medium: #666666;
    --brand-accent: #333333;
    --brand-pink: #e91e63;
    --brand-pink-light: #f48fb1;
    --brand-pink-dark: #ad1457;
    --brand-pink-subtle: rgba(233, 30, 99, 0.06);
    
    /* Sophisticated additions */
    --golden-ratio: 1.618;
    --content-max-width: 720px;
    --hero-max-width: 900px;
    --transition-elegant: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 20px 40px rgba(0, 0, 0, 0.12);
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: -0.01em;
    --letter-spacing-wide: 0.08em;
}

/* ================================================================
   BASE RESET & ENHANCED TYPOGRAPHY
================================================================ */
.artforframe-article * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

.artforframe-article {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.75;
    color: var(--brand-black);
    background: var(--brand-white);
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    font-weight: 400;
    letter-spacing: var(--letter-spacing-normal);
}

/* Typography Scale - Golden Ratio */
.artforframe-article {
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1.0625rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;
    --font-5xl: 3rem;
    --font-6xl: 3.75rem;
}

/* ================================================================
   SOPHISTICATED HERO SECTION
================================================================ */
.artforframe-article .hero-section {
    background: linear-gradient(180deg, 
        var(--brand-white) 0%, 
        var(--brand-off-white) 50%,
        var(--brand-white) 100%);
    padding: 120px 40px 80px;
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0 0 60px 0;
    overflow: hidden;
}

/* Subtle animated gradient orbs */
.artforframe-article .hero-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center, 
        var(--brand-pink-subtle) 0%, 
        transparent 70%);
    top: -300px;
    left: -300px;
    animation: floatOrb 20s ease-in-out infinite;
    opacity: 0.5;
}

.artforframe-article .hero-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at center, 
        rgba(51, 51, 51, 0.02) 0%, 
        transparent 70%);
    bottom: -200px;
    right: -200px;
    animation: floatOrb 15s ease-in-out infinite reverse;
    opacity: 0.5;
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.artforframe-article h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 32px;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--brand-black);
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.8s ease-out;
}

/* Elegant underline accent */
.artforframe-article h1::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--brand-pink) 50%, 
        transparent 100%);
    opacity: 0.8;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.artforframe-article .opening-narrative {
    font-family: 'Crimson Text', serif;
    font-size: 1.25rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 40px auto 0;
    color: var(--brand-gray-medium);
    font-style: italic;
    font-weight: 400;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Decorative quotes */
.artforframe-article .opening-narrative::before,
.artforframe-article .opening-narrative::after {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--brand-pink);
    opacity: 0.15;
    position: absolute;
    font-weight: 900;
}

.artforframe-article .opening-narrative::before {
    content: '"';
    left: -40px;
    top: -20px;
}

.artforframe-article .opening-narrative::after {
    content: '"';
    right: -40px;
    bottom: -40px;
}

/* ================================================================
   REFINED CONTENT SECTIONS
================================================================ */
.artforframe-article .article-content {
    padding: 0 40px 80px;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.artforframe-article h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 80px 0 32px;
    color: var(--brand-black);
    letter-spacing: var(--letter-spacing-tight);
    position: relative;
    padding-bottom: 16px;
    transition: all 0.3s var(--transition-elegant);
}

/* Elegant side accent */
.artforframe-article h2::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 1px;
    background: var(--brand-pink);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.artforframe-article h2:hover::before {
    opacity: 1;
}

.artforframe-article h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-pink) 0%, transparent 100%);
}

.artforframe-article h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 48px 0 20px;
    color: var(--brand-charcoal);
    letter-spacing: var(--letter-spacing-normal);
}

.artforframe-article p {
    margin-bottom: 28px;
    line-height: 1.85;
    font-weight: 400;
    color: var(--brand-charcoal);
}

/* First letter drop cap for opening paragraphs */
.artforframe-article .article-content > p:first-of-type:first-letter {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    color: var(--brand-pink);
}

.artforframe-article strong {
    font-weight: 600;
    color: var(--brand-black);
    letter-spacing: var(--letter-spacing-normal);
}

/* ================================================================
   SOPHISTICATED QUICK ANSWER BOX
================================================================ */
.artforframe-article .quick-answer {
    background: linear-gradient(135deg, 
        var(--brand-white) 0%, 
        var(--brand-off-white) 100%);
    border-left: 3px solid var(--brand-pink);
    padding: 40px;
    margin: 60px 0;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--transition-elegant);
}

.artforframe-article .quick-answer::before {
    content: '✓';
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 120px;
    color: var(--brand-pink);
    opacity: 0.05;
    font-weight: 300;
}

.artforframe-article .quick-answer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.artforframe-article .quick-answer h3 {
    font-family: 'Inter', sans-serif;
    color: var(--brand-pink-dark);
    margin-top: 0;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-weight: 700;
}

/* ================================================================
   ELEGANT TABLE OF CONTENTS
================================================================ */
.artforframe-article .table-of-contents {
    background: linear-gradient(180deg, 
        var(--brand-white) 0%, 
        var(--brand-off-white) 100%);
    padding: 40px;
    margin: 60px 0;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-subtle);
    position: relative;
}

.artforframe-article .table-of-contents::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--brand-pink) 0%, 
        var(--brand-pink-light) 50%, 
        var(--brand-pink) 100%);
    border-radius: 16px 16px 0 0;
    opacity: 0.6;
}

.artforframe-article .table-of-contents h3 {
    font-family: 'Inter', sans-serif;
    margin-top: 0;
    color: var(--brand-black);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-weight: 700;
}

.artforframe-article .table-of-contents ol {
    list-style: none;
    counter-reset: toc-counter;
    padding-left: 0;
}

.artforframe-article .table-of-contents li {
    counter-increment: toc-counter;
    margin: 16px 0;
    padding-left: 40px;
    position: relative;
    transition: all 0.3s ease;
}

.artforframe-article .table-of-contents li:hover {
    transform: translateX(4px);
}

.artforframe-article .table-of-contents li::before {
    content: counter(toc-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-pink);
    font-size: 0.875rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.artforframe-article .table-of-contents a {
    color: var(--brand-charcoal);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    position: relative;
}

.artforframe-article .table-of-contents a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--brand-pink);
    transition: width 0.3s ease;
}

.artforframe-article .table-of-contents a:hover::after {
    width: 100%;
}

/* ================================================================
   REFINED PRODUCT SHOWCASE SECTION
================================================================ */
.artforframe-article .product-showcase {
    background: linear-gradient(135deg, 
        var(--brand-off-white) 0%, 
        var(--brand-white) 100%);
    padding: 80px 40px;
    margin: 80px -40px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.artforframe-article .product-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(233, 30, 99, 0.2) 50%, 
        transparent 100%);
}

.artforframe-article .product-showcase::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(233, 30, 99, 0.2) 50%, 
        transparent 100%);
}

.artforframe-article .product-showcase h3 {
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 16px;
    color: var(--brand-black);
    font-weight: 700;
}

.artforframe-article .product-showcase > p {
    text-align: center;
    max-width: 500px;
    margin: 0 auto 40px;
    color: var(--brand-gray-medium);
    font-style: italic;
}

.artforframe-article .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.artforframe-article .product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    transition: all 0.4s var(--transition-elegant);
    position: relative;
}

.artforframe-article .product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--brand-pink) 0%, 
        var(--brand-pink-light) 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.artforframe-article .product-card:hover::before {
    transform: scaleX(1);
}

.artforframe-article .product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-elevated);
}

.artforframe-article .product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.artforframe-article .product-card:hover img {
    transform: scale(1.05);
}

.artforframe-article .product-card-content {
    padding: 32px;
}

.artforframe-article .product-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--brand-black);
    font-weight: 600;
}

.artforframe-article .product-card p {
    font-size: 0.9375rem;
    color: var(--brand-gray-medium);
    margin-bottom: 20px;
    line-height: 1.6;
}
/* ===== Sharper bundle card images (desktop) ===== */
.artforframe-article .product-card img {
  /* helps Chrome/Safari keep downscaled images crisper */
  image-rendering: -webkit-optimize-contrast;
}

/* remove hover-zoom blur (keep the card lift, kill image resample) */
@media (hover: hover) and (pointer: fine) {
  .artforframe-article .product-card:hover img {
    transform: none !important;
  }
}
/* Product card images should NOT inherit global article img margins */
.artforframe-article .product-card img{
  display:block;
  margin:0 !important;
  width:100%;
  height:auto;
}

.artforframe-article .product-link {
    color: var(--brand-pink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.artforframe-article .product-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.artforframe-article .product-link:hover::after {
    transform: translateX(4px);
}

/* ================================================================
   SOPHISTICATED CTA SECTIONS
================================================================ */
.artforframe-article .early-cta {
    background: linear-gradient(135deg, 
        var(--brand-pink) 0%, 
        var(--brand-pink-dark) 100%);
    padding: 48px;
    margin: 60px 0;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-elevated);
    position: relative;
    overflow: hidden;
}

.artforframe-article .early-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.artforframe-article .early-cta p {
    color: white;
    font-size: 1.125rem;
    margin-bottom: 24px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Headings on colored backgrounds must be white */
.artforframe-article .early-cta h2,
.artforframe-article .early-cta h3 {
    color: white;
    position: relative;
    z-index: 1;
}

/* Override the default h2 underline accent on colored backgrounds */
.artforframe-article .early-cta h2::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
}

/* Links inside early-cta should be white with underline for contrast */
.artforframe-article .early-cta a.featured-art-link {
    color: white;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.artforframe-article .early-cta a.featured-art-link::after {
    display: none;
}

.artforframe-article .early-cta-button,
.artforframe-article .cta-button {
    display: inline-block;
    background: white;
    color: var(--brand-pink);
    padding: 16px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s var(--transition-elegant);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: 0.875rem;
}

.artforframe-article .early-cta-button:hover,
.artforframe-article .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.artforframe-article .cta-section {
    background: linear-gradient(180deg, 
        var(--brand-white) 0%, 
        var(--brand-off-white) 100%);
    padding: 60px;
    margin: 80px 0;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(233, 30, 99, 0.1);
    box-shadow: var(--shadow-medium);
    position: relative;
}

.artforframe-article .cta-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--brand-pink);
    border-radius: 2px;
}

.artforframe-article .cta-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 16px;
    color: var(--brand-black);
}

.artforframe-article .cta-section .cta-button {
    background: var(--brand-pink);
    color: white;
    margin: 8px;
}

.artforframe-article .cta-section .cta-button:hover {
    background: var(--brand-pink-dark);
}

/* ================================================================
   ELEGANT FAQ SECTION
================================================================ */
.artforframe-article .faq-section {
    margin: 80px 0;
    padding: 60px;
    background: linear-gradient(135deg, 
        var(--brand-off-white) 0%, 
        var(--brand-white) 100%);
    border-radius: 20px;
    box-shadow: var(--shadow-subtle);
}

.artforframe-article .faq-section h2 {
    font-family: 'Playfair Display', serif;
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    padding-bottom: 24px;
}

.artforframe-article .faq-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--brand-pink);
}

.artforframe-article .faq-item {
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 32px;
    transition: all 0.3s ease;
}

.artforframe-article .faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.artforframe-article .faq-item:hover {
    transform: translateX(8px);
}

.artforframe-article .faq-question {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--brand-black);
    cursor: pointer;
    padding-right: 48px;
    position: relative;
    margin-bottom: 16px;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.artforframe-article .faq-question:hover {
    color: var(--brand-pink);
}

.artforframe-article .faq-question::after {
    content: '−';
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, 
        var(--brand-pink) 0%, 
        var(--brand-pink-dark) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    transition: all 0.3s ease;
}

.artforframe-article .faq-question:hover::after {
    transform: rotate(180deg);
}

.artforframe-article .faq-answer {
    padding-top: 8px;
    color: var(--brand-gray-medium);
    line-height: 1.8;
    display: block;
    opacity: 1;
    font-size: 1rem;
    padding-left: 20px;
    border-left: 2px solid var(--brand-pink-subtle);
}

/* ================================================================
   REFINED PINTEREST SHARE
================================================================ */
.artforframe-article .pinterest-share {
    background: linear-gradient(135deg, 
        white 0%, 
        var(--brand-off-white) 100%);
    border: 1px solid rgba(233, 30, 99, 0.2);
    padding: 48px;
    margin: 80px 0;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-subtle);
    position: relative;
    overflow: hidden;
}

.artforframe-article .pinterest-share::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, 
        var(--brand-pink-subtle) 0%, 
        transparent 50%);
    animation: floatOrb 15s ease-in-out infinite;
    opacity: 0.5;
}

.artforframe-article .pinterest-share h3 {
    font-family: 'Playfair Display', serif;
    color: var(--brand-pink);
    margin-bottom: 8px;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.artforframe-article .pinterest-share p {
    position: relative;
    z-index: 1;
    color: var(--brand-gray-medium);
    font-style: italic;
}

.artforframe-article .pinterest-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, 
        var(--brand-pink) 0%, 
        var(--brand-pink-dark) 100%);
    color: white;
    padding: 14px 32px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 20px;
    transition: all 0.3s var(--transition-elegant);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size: 0.875rem;
    box-shadow: var(--shadow-medium);
}

.artforframe-article .pinterest-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-elevated);
}

/* ================================================================
   SOPHISTICATED LINKS & INTERACTIVE ELEMENTS
================================================================ */
.artforframe-article a.featured-art-link {
    color: var(--brand-pink);
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    font-weight: 500;
}

.artforframe-article a.featured-art-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        var(--brand-pink) 0%, 
        var(--brand-pink-light) 100%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.artforframe-article a.featured-art-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Blockquote styling for testimonials or featured quotes */
.artforframe-article blockquote {
    margin: 40px 0;
    padding: 32px;
    background: linear-gradient(135deg, 
        var(--brand-off-white) 0%, 
        var(--brand-white) 100%);
    border-left: 3px solid var(--brand-pink);
    border-radius: 8px;
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 1.125rem;
    color: var(--brand-charcoal);
    position: relative;
    box-shadow: var(--shadow-subtle);
}

.artforframe-article blockquote::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 80px;
    color: var(--brand-pink);
    opacity: 0.1;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
}

/* Enhanced list styling */
.artforframe-article ul,
.artforframe-article ol {
    margin: 24px 0;
    padding-left: 32px;
}

.artforframe-article li {
    margin: 12px 0;
    line-height: 1.8;
}

.artforframe-article ul li::marker {
    color: var(--brand-pink);
}

/* ================================================================
   RESPONSIVE DESIGN - ENHANCED
================================================================ */
@media (max-width: 768px) {
    .artforframe-article {
        font-size: 16px;
    }
    
    .artforframe-article .hero-section {
        padding: 80px 24px 60px;
    }
    
    .artforframe-article .article-content {
        padding: 0 24px 60px;
    }
    
    .artforframe-article h1 {
        font-size: 2rem;
    }
    
    .artforframe-article h2 {
        font-size: 1.75rem;
        margin: 60px 0 24px;
    }
    
    .artforframe-article h2::before {
        display: none;
    }
    
    .artforframe-article .opening-narrative::before,
    .artforframe-article .opening-narrative::after {
        display: none;
    }
    
    .artforframe-article .table-of-contents,
    .artforframe-article .quick-answer,
    .artforframe-article .cta-section,
    .artforframe-article .faq-section,
    .artforframe-article .pinterest-share {
        padding: 32px 24px;
    }
    
    .artforframe-article .product-showcase {
        padding: 60px 24px;
        margin: 60px -24px;
    }
    
    .artforframe-article .product-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .artforframe-article .article-content > p:first-of-type:first-letter {
        font-size: 3rem;
    }
    
    /* Mobile link resets — scoped to avoid nuking button classes */

    /* Inline featured-art-link: reset pseudo-elements, but NOT inside early-cta, cta-section, or cta-button-group */
    .artforframe-article a.featured-art-link {
        text-decoration: none !important;
        border-bottom: none !important;
        background-image: none !important;
    }

    .artforframe-article a.featured-art-link::after,
    .artforframe-article a.featured-art-link::before {
        display: none !important;
        content: none !important;
    }

    /* Restore link appearance inside early-cta */
    .artforframe-article .early-cta a.featured-art-link {
        color: white !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
        display: inline !important;
    }

    /* Restore link appearance inside cta-section (outside button group) */
    .artforframe-article .cta-section a.featured-art-link {
        color: var(--brand-pink) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
        display: inline !important;
    }

    .artforframe-article .table-of-contents a {
        text-decoration: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-block !important;
        line-height: inherit !important;
    }

    .artforframe-article .table-of-contents a::after,
    .artforframe-article .table-of-contents a::before {
        display: none !important;
        content: none !important;
    }

    .artforframe-article .faq-answer a {
        text-decoration: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        line-height: inherit !important;
    }

    .artforframe-article .faq-answer a::after,
    .artforframe-article .faq-answer a::before {
        display: none !important;
        content: none !important;
    }

    /* Body-text links only — exclude all button/CTA classes */
    .artforframe-article .article-content a:not(.cta-button):not(.early-cta-button):not(.product-link):not(.pinterest-btn):not(.featured-art-link) {
        text-decoration: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        line-height: inherit !important;
    }

    .artforframe-article .article-content a:not(.cta-button):not(.early-cta-button):not(.product-link):not(.pinterest-btn):not(.featured-art-link)::after,
    .artforframe-article .article-content a:not(.cta-button):not(.early-cta-button):not(.product-link):not(.pinterest-btn):not(.featured-art-link)::before {
        display: none !important;
        content: none !important;
    }

    /* ---- Mobile CTA button overrides (single-line text) ---- */

    .artforframe-article .cta-section .cta-button {
        background: var(--brand-pink) !important;
        color: white !important;
        padding: 14px 24px !important;
        display: inline-block !important;
        border-radius: 50px !important;
        margin: 6px 0 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: var(--letter-spacing-wide) !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    .artforframe-article .early-cta-button {
        background: white !important;
        color: var(--brand-pink) !important;
        padding: 14px 24px !important;
        display: inline-block !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
    }

    .artforframe-article .early-cta-button-outline {
        background: transparent !important;
        color: white !important;
        border: 2px solid white !important;
        padding: 14px 24px !important;
        display: inline-block !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
    }

    .artforframe-article .product-link {
        color: var(--brand-pink) !important;
        display: inline-flex !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: var(--letter-spacing-wide) !important;
        font-size: 0.875rem !important;
    }

    .artforframe-article .pinterest-btn {
        background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%) !important;
        color: white !important;
        padding: 14px 24px !important;
        display: inline-flex !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
    }

    /* CTA button group: center buttons, don't stretch full-width */
    .artforframe-article .cta-button-group {
        flex-direction: column !important;
        align-items: center !important;
    }

    .artforframe-article .cta-button-group .cta-button {
        width: auto !important;
        align-self: center !important;
    }
}

/* ================================================================
   PRINT STYLES - REFINED
================================================================ */
@media print {
    .artforframe-article {
        font-size: 11pt;
        line-height: 1.5;
    }
    
    .artforframe-article .early-cta,
    .artforframe-article .cta-section,
    .artforframe-article .pinterest-share,
    .artforframe-article .product-showcase {
        display: none;
    }
    
    .artforframe-article h1,
    .artforframe-article h2,
    .artforframe-article h3 {
        page-break-after: avoid;
    }
    
    .artforframe-article a {
        color: var(--brand-black);
        text-decoration: underline;
    }
}

/* ================================================================
   ACCESSIBILITY ENHANCEMENTS
================================================================ */
@media (prefers-reduced-motion: reduce) {
    .artforframe-article * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.artforframe-article *:focus {
    outline: 2px solid var(--brand-pink);
    outline-offset: 2px;
}

.artforframe-article .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ============================================================
   RECOMMENDED CSS ADDITIONS — March Hub Fixes
   Add these to Updated_BlogCss.txt
   ============================================================ */

/* FIX #4: Hero eyebrow (replaces inline styles) */
.artforframe-article .hero-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

/* FIX #4: Post meta row (replaces inline styles) */
.artforframe-article .post-meta-row {
  margin: 18px 0 0;
  font-size: 14px;
  opacity: .85;
}

/* FIX #4: Hero figure and caption (replaces inline styles) */
.artforframe-article .hero-figure {
  margin: 28px auto 0;
  max-width: 1100px;
}

.artforframe-article .hero-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.artforframe-article .hero-caption {
  margin-top: 10px;
  font-size: 13px;
  opacity: .75;
}

/* FIX #3: Comparison table (replaces inline table styles) */
.artforframe-article .comparison-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  -webkit-overflow-scrolling: touch;
}

.artforframe-article .comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.artforframe-article .comparison-table th {
  text-align: left;
  padding: 12px;
  font-weight: 600;
  border-bottom: 2px solid rgba(0, 0, 0, .12);
}

.artforframe-article .comparison-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* Zebra striping */
.artforframe-article .comparison-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, .02);
}

/* Column width distribution (4-col default) */
.artforframe-article .comparison-table th:first-child,
.artforframe-article .comparison-table td:first-child {
  width: 22%;
}

.artforframe-article .comparison-table th:nth-child(2),
.artforframe-article .comparison-table td:nth-child(2) {
  width: 24%;
}

.artforframe-article .comparison-table th:nth-child(3),
.artforframe-article .comparison-table td:nth-child(3) {
  width: 20%;
}

.artforframe-article .comparison-table th:last-child,
.artforframe-article .comparison-table td:last-child {
  width: 34%;
}

/* Mobile: allow horizontal scroll only on small screens */
@media (max-width: 600px) {
  .artforframe-article .comparison-table {
    table-layout: auto;
    min-width: 580px;
  }
}

/* FIX #5: CTA button group (replaces inline flex styles) */
.artforframe-article .cta-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* All links inside cta-button-group become pill buttons */
.artforframe-article .cta-button-group a {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  transition: all 0.3s var(--transition-elegant);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

/* Primary CTA pill (filled pink) — first link or .cta-button */
.artforframe-article .cta-button-group .cta-button {
  background: var(--brand-pink);
  color: white;
}

.artforframe-article .cta-button-group .cta-button:hover {
  background: var(--brand-pink-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Secondary CTA pills (outlined) — .product-link and .featured-art-link */
.artforframe-article .cta-button-group .product-link,
.artforframe-article .cta-button-group .featured-art-link {
  background: white;
  color: var(--brand-pink);
  border: 2px solid var(--brand-pink);
  box-shadow: none;
}

.artforframe-article .cta-button-group .product-link:hover,
.artforframe-article .cta-button-group .featured-art-link:hover {
  background: var(--brand-pink);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Remove the default ::after arrow on product-link inside button group */
.artforframe-article .cta-button-group .product-link::after {
  display: none;
}

/* Remove the default ::after underline on featured-art-link inside button group */
.artforframe-article .cta-button-group .featured-art-link::after {
  display: none;
}

@media (max-width: 600px) {
  .artforframe-article .cta-button-group {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* FIX #2: CTA section heading — support both h2 and h3 */
.artforframe-article .cta-section h2,
.artforframe-article .cta-section h3 {
  /* Inherit existing .cta-section h3 styles — 
     add h2 to the selector in your existing CSS 
     so templates can use either heading level */
}

/* FIX #6: Coming-soon text styling for unpublished spoke links */
.artforframe-article .coming-soon {
  opacity: .6;
  font-style: italic;
}

/* Secondary (outlined) early CTA button — for "Browse single pieces" or hub link */
.artforframe-article .early-cta-button-outline {
  display: inline-block;
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 16px 40px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s var(--transition-elegant);
  box-shadow: none;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-size: 0.875rem;
  margin-top: 8px;
}

.artforframe-article .early-cta-button-outline:hover {
  background: white;
  color: var(--brand-pink);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Body image (inside article-content sections) */
.artforframe-article .body-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin: 28px 0 8px;
}

/* Editor note */
.artforframe-article .editor-note {
  margin: 36px 0 0;
  font-size: 13px;
  opacity: .75;
}

/* ============================================================
   FINAL BLOG OPTIMIZATION OVERRIDES — mobile polish + readability
   ============================================================ */

/* Content readability: prevent inherited all-caps from theme-wide typography */
.artforframe-article .article-content,
.artforframe-article .article-content p,
.artforframe-article .article-content li,
.artforframe-article .article-content td,
.artforframe-article .article-content th,
.artforframe-article .article-content figcaption,
.artforframe-article .article-content blockquote,
.artforframe-article .post-meta-row,
.artforframe-article .rollout-list,
.artforframe-article .editor-note,
.artforframe-article .editor-note p {
  text-transform: none !important;
  letter-spacing: normal;
}

/* Preserve intentional uppercase treatments */
.artforframe-article .hero-eyebrow,
.artforframe-article .early-cta-button,
.artforframe-article .early-cta-button-outline,
.artforframe-article .cta-button {
  letter-spacing: inherit;
}

/* Hero image reliability (above the fold should not lazy-load late) */
.artforframe-article .hero-figure {
  background: #f7f5f3;
}
.artforframe-article .hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Post meta row refinement */
.artforframe-article .post-meta-row {
  margin-top: 16px;
  color: rgba(26, 26, 26, 0.68);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Rollout schedule: clear live vs upcoming hierarchy */
.artforframe-article .rollout-list {
  margin-top: 14px;
  padding-left: 1.1rem;
}
.artforframe-article .rollout-list li {
  margin: 10px 0;
  line-height: 1.7;
}
.artforframe-article .rollout-list li::marker {
  color: var(--brand-pink);
}
.artforframe-article .rollout-live {
  color: var(--brand-pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 30, 99, 0.24);
}
.artforframe-article .rollout-live:hover {
  border-bottom-color: var(--brand-pink);
}
.artforframe-article .rollout-coming {
  color: #7b7b7b;
  font-style: italic;
}

/* Paragraph alignment: long copy should read left, not centered */
.artforframe-article .rollout-schedule > p,
.artforframe-article .cta-section > p,
.artforframe-article .editor-note p,
.artforframe-article .product-showcase > p {
  text-align: left !important;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* CTA hierarchy: only direct children in group become pills */
.artforframe-article .cta-button-group {
  gap: 12px;
}
.artforframe-article .cta-button-group > a {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  transition: all 0.3s var(--transition-elegant);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.artforframe-article .cta-button-group > .cta-button {
  background: var(--brand-pink);
  color: #fff;
}
.artforframe-article .cta-button-group > .cta-button:hover {
  background: var(--brand-pink-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Inline editorial links under primary CTA */
.artforframe-article .cta-inline-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.artforframe-article .cta-inline-link {
  color: var(--brand-pink);
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.95rem;
  line-height: 1.35;
  border-bottom: 1px solid rgba(233, 30, 99, 0.28);
  padding-bottom: 1px;
}
.artforframe-article .cta-inline-link:hover {
  border-bottom-color: var(--brand-pink);
}
.artforframe-article .cta-inline-link::after {
  display: none !important;
  content: none !important;
}

/* Prevent inherited pill styling from generic rules lower in file */
.artforframe-article .cta-button-group .cta-inline-links a {
  background: transparent !important;
  color: var(--brand-pink) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Pinterest CTA should be an understated editorial text link */
.artforframe-article .pinterest-share {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 28px 0 10px !important;
  text-align: left;
}
.artforframe-article .pinterest-share::before,
.artforframe-article .pinterest-share::after {
  display: none !important;
  content: none !important;
}
.artforframe-article .pinterest-inline-link {
  color: var(--brand-pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 30, 99, 0.28);
  padding-bottom: 1px;
  font-size: 0.95rem;
  line-height: 1.4;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.artforframe-article .pinterest-inline-link:hover {
  border-bottom-color: var(--brand-pink);
}

/* Callout consistency: elevate editor note to match top callout treatment family */
.artforframe-article .editor-note {
  margin: 40px 0 0;
  padding: 22px 20px;
  background: linear-gradient(135deg, var(--brand-white) 0%, var(--brand-off-white) 100%);
  border-left: 3px solid var(--brand-pink);
  border-radius: 10px;
  box-shadow: var(--shadow-subtle);
  font-size: 0.95rem;
  opacity: 1;
}
.artforframe-article .editor-note p {
  color: var(--brand-charcoal);
  margin-bottom: 12px;
}
.artforframe-article .editor-note p:last-child {
  margin-bottom: 0;
}

/* Comparison table mobile: stacked cards instead of horizontal scroll */
@media (max-width: 768px) {
  .artforframe-article .comparison-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 24px 0;
  }

  .artforframe-article .comparison-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .artforframe-article .comparison-table thead {
    display: none;
  }

  .artforframe-article .comparison-table tbody,
  .artforframe-article .comparison-table tr,
  .artforframe-article .comparison-table td {
    display: block;
    width: 100%;
  }

  .artforframe-article .comparison-table tr {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 3px solid var(--brand-pink);
    border-radius: 12px;
    padding: 10px 12px 4px;
    margin: 0 0 14px;
    box-shadow: var(--shadow-subtle);
  }

  .artforframe-article .comparison-table td {
    width: 100% !important;
    border: 0;
    padding: 8px 0 10px;
    line-height: 1.55;
  }

  .artforframe-article .comparison-table td + td {
    border-top: 1px solid rgba(0,0,0,0.05);
  }

  .artforframe-article .comparison-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 0.74rem;
    line-height: 1.2;
    color: #666;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
  }
}

/* Drop cap can orphan on mobile — disable gracefully */
@media (max-width: 768px) {
  .artforframe-article .article-content > p:first-of-type:first-letter {
    float: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    color: inherit !important;
  }

  /* Tighten magenta early CTA block padding */
  .artforframe-article .early-cta {
    padding: 34px 24px;
    margin: 52px 0;
  }
  .artforframe-article .early-cta p {
    margin-bottom: 18px;
  }

  /* Where-to-go CTA section: less center-heavy */
  .artforframe-article .cta-section {
    padding: 36px 22px;
    text-align: left;
  }
  .artforframe-article .cta-section h2,
  .artforframe-article .cta-section h3 {
    text-align: center;
  }
  .artforframe-article .cta-button-group {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .artforframe-article .cta-inline-links {
    align-items: flex-start;
    width: 100%;
  }
}
/* ============================================================
   MOBILE TABLE HOTFIX — QUICK GUIDE COMPARISON TABLE
   Fixes nowrap + horizontal scroll + clipped card content
   ============================================================ */
@media (max-width: 768px) {
  /* Scope tightly to the quick guide table so we don't affect other tables */
  .artforframe-article #quick-guide .comparison-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 20px 0 28px !important;
    max-width: 100% !important;
  }

  /* Cancel theme-wide mobile table rule (display:block + nowrap + x-scroll) */
  .artforframe-article #quick-guide .comparison-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    background: transparent !important;
  }

  /* Kill inherited nowrap from theme rule */
  .artforframe-article #quick-guide .comparison-table,
  .artforframe-article #quick-guide .comparison-table * {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    box-sizing: border-box !important;
  }

  /* Hide the table header on mobile */
  .artforframe-article #quick-guide .comparison-table thead {
    display: none !important;
  }

  /* Turn rows/cells into stacked cards */
  .artforframe-article #quick-guide .comparison-table tbody,
  .artforframe-article #quick-guide .comparison-table tr,
  .artforframe-article #quick-guide .comparison-table td {
    display: block !important;
    width: 100% !important;
  }

  .artforframe-article #quick-guide .comparison-table tr {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: 4px solid var(--brand-pink) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
    overflow: hidden !important; /* prevents text from visually spilling out */
  }

  .artforframe-article #quick-guide .comparison-table td {
    padding: 12px 14px 13px !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 1.45 !important;
    font-size: 0.98rem !important;
    text-align: left !important;
  }

  .artforframe-article #quick-guide .comparison-table td + td {
    border-top: 1px solid rgba(0,0,0,0.06) !important;
  }

  /* Mobile labels (works even if data-label attrs are missing) */
  .artforframe-article #quick-guide .comparison-table td::before {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(26, 26, 26, 0.58) !important;
    content: "" !important;
  }

  .artforframe-article #quick-guide .comparison-table tr td:nth-child(1)::before { content: "If you want…" !important; }
.artforframe-article #quick-guide .comparison-table tr td:nth-child(2)::before { content: "Best pick" !important; }
.artforframe-article #quick-guide .comparison-table tr td:nth-child(3)::before { content: "Why it matters" !important; }
.artforframe-article #quick-guide .comparison-table tr td:nth-child(4)::before { content: "What to confirm" !important; }
  }

  /* Link styling inside the "Recommended bundle" row */
  .artforframe-article #quick-guide .comparison-table td a {
    color: var(--brand-pink) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(233, 30, 99, 0.25) !important;
    padding-bottom: 1px !important;
    font-weight: 500 !important;
    display: inline !important;
  }

  /* Slight emphasis on the challenge row */
  .artforframe-article #quick-guide .comparison-table tr td:first-child {
    font-weight: 500 !important;
    font-size: 1.02rem !important;
  }
}
/* HUB template intro strip (used when theme header renders the page title) */
.artforframe-article .hub-intro-strip {
  margin: 0 0 8px;
}

@media (max-width: 768px) {
  .artforframe-article .hub-intro-strip {
    margin: 0 0 6px;
  }

  .artforframe-article .hub-intro-strip .opening-narrative {
    margin-top: 0 !important;
  }
}
/* ============================
   Art For Frame - Polished HUB Intro
   (for posts where theme header renders the page H1/meta)
   ============================ */

.artforframe-article .aff-hub-intro,
.main-article .aff-hub-intro,
.article-template .aff-hub-intro {
  margin: 20px 0 18px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(233, 30, 99, 0.10);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.82) 100%
  );
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.artforframe-article .aff-hub-intro__kicker,
.main-article .aff-hub-intro__kicker,
.article-template .aff-hub-intro__kicker {
  margin: 0 0 10px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(44, 44, 44, 0.72);
}

.artforframe-article .aff-hub-intro__dek,
.main-article .aff-hub-intro__dek,
.article-template .aff-hub-intro__dek {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #3b3b3b;

  /* hard reset against legacy “hero/opening narrative” styles */
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  max-width: none;
}

.artforframe-article .aff-hub-intro__meta,
.main-article .aff-hub-intro__meta,
.article-template .aff-hub-intro__meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(44, 44, 44, 0.78);
}

.artforframe-article .aff-hub-intro__meta strong,
.main-article .aff-hub-intro__meta strong,
.article-template .aff-hub-intro__meta strong {
  color: #2c2c2c;
  font-weight: 600;
}

.artforframe-article .aff-hub-intro__dot,
.main-article .aff-hub-intro__dot,
.article-template .aff-hub-intro__dot {
  color: rgba(233, 30, 99, 0.45);
}

.artforframe-article .aff-hub-intro__note,
.main-article .aff-hub-intro__note,
.article-template .aff-hub-intro__note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(233, 30, 99, 0.03);
  border: 1px solid rgba(233, 30, 99, 0.10);
  border-left: 3px solid rgba(233, 30, 99, 0.85);
}

.artforframe-article .aff-hub-intro__note p,
.main-article .aff-hub-intro__note p,
.article-template .aff-hub-intro__note p {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #3b3b3b;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
}

/* ===== Top spacing cleanup so the intro doesn't float too far below the theme header ===== */
@media (max-width: 768px) {
  .artforframe-article .rte,
  .main-article .rte,
  .article-template .rte {
    margin-top: 0.5rem !important;
    padding-top: 0 !important;
  }

  .artforframe-article .rte > *:first-child,
  .main-article .rte > *:first-child,
  .article-template .rte > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .artforframe-article .aff-hub-intro,
  .main-article .aff-hub-intro,
  .article-template .aff-hub-intro {
    margin: 10px 0 14px !important;
    padding: 16px 14px 14px;
    border-radius: 14px;
  }

  .artforframe-article .aff-hub-intro__dek,
  .main-article .aff-hub-intro__dek,
  .article-template .aff-hub-intro__dek {
    font-size: 0.96rem;
    line-height: 1.68;
  }

  .artforframe-article .aff-hub-intro__meta,
  .main-article .aff-hub-intro__meta,
  .article-template .aff-hub-intro__meta {
    margin-top: 12px;
    gap: 6px;
    font-size: 0.88rem;
  }

  .artforframe-article .aff-hub-intro__note,
  .main-article .aff-hub-intro__note,
  .article-template .aff-hub-intro__note {
    margin-top: 12px;
    padding: 11px 12px;
  }

  .artforframe-article .aff-hub-intro__note p,
  .main-article .aff-hub-intro__note p,
  .article-template .aff-hub-intro__note p {
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

/* Clean out accidental empty paragraphs/spacers at top of article content */
.artforframe-article .rte p:empty,
.main-article .rte p:empty,
.article-template .rte p:empty {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}
/* ===== AFF HUB intro polish (mobile spacing + kicker line) ===== */
@media (max-width: 768px) {
  /* Reduce the dead space between header meta and the intro card */
  .artforframe-article .aff-hub-intro,
  .main-article .aff-hub-intro,
  .article-template .aff-hub-intro {
    margin-top: -6px !important;
  }

  /* If your article wrapper is still adding top spacing, tighten it */
  .artforframe-article .rte,
  .main-article .rte,
  .article-template .rte {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Kicker: one line, smaller, magenta */
  .artforframe-article .aff-hub-intro__kicker,
  .main-article .aff-hub-intro__kicker,
  .article-template .aff-hub-intro__kicker {
    margin: 0 0 10px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important; /* reduce tracking so it fits */
    color: #e91e63 !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* ============================================================
   In-article figure caption fix (prevents theme header caption overlay styles
   from hijacking body figcaptions)
   ============================================================ */

/* Figure spacing + layout */
.artforframe-article .article-content figure {
  margin: 28px 0 22px;
}

.artforframe-article .article-content figure img.article-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0;
}

/* Body figcaptions (works for legacy template class="image-caption") */
.artforframe-article .article-content figure > figcaption,
.artforframe-article .article-content figcaption.image-caption,
.artforframe-article .article-content figcaption.article-figcaption {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;

  margin: 10px 2px 0;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 13px;
  line-height: 1.45;
  color: rgba(26, 26, 26, 0.62);
  font-style: italic;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}

/* Optional tighter mobile spacing */
@media (max-width: 768px) {
  .artforframe-article .article-content figure {
    margin: 22px 0 18px;
  }

  .artforframe-article .article-content figure > figcaption,
  .artforframe-article .article-content figcaption.image-caption,
  .artforframe-article .article-content figcaption.article-figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.4;
  }
}
/* ============================================================
   Art For Frame — Polished in-article image captions
   (desktop + mobile)
   Supports legacy .image-caption and new .article-figcaption
   ============================================================ */

/* Figure wrapper spacing */
.artforframe-article .article-content figure,
.artforframe-article .article-content .article-figure {
  margin: 28px 0 24px;
}

/* Ensure image sits cleanly above caption */
.artforframe-article .article-content figure img,
.artforframe-article .article-content .article-figure img,
.artforframe-article .article-content img.article-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 0;
}

/* Caption base (legacy + future-safe selectors) */
.artforframe-article .article-content figure > figcaption,
.artforframe-article .article-content figcaption.image-caption,
.artforframe-article .article-content figcaption.article-figcaption,
.artforframe-article .article-content .hero-caption {
  /* layout reset (prevents theme overlay styles from leaking in) */
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: auto !important;

  /* visual styling */
  margin: 10px 2px 0;
  padding: 0 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  /* typography */
  font-family: Inter, sans-serif;
  font-size: 0.90rem;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(32, 32, 32, 0.62);
  font-style: italic;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-align: left;

  /* subtle editorial accent */
  border-left: 2px solid rgba(233, 30, 99, 0.28);
  max-width: 78ch;
}

/* If a caption contains links, keep them refined */
.artforframe-article .article-content figure > figcaption a,
.artforframe-article .article-content figcaption.image-caption a,
.artforframe-article .article-content figcaption.article-figcaption a {
  color: #e91e63;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Optional: slightly more elegant balance for wide desktop images */
@media (min-width: 992px) {
  .artforframe-article .article-content figure > figcaption,
  .artforframe-article .article-content figcaption.image-caption,
  .artforframe-article .article-content figcaption.article-figcaption,
  .artforframe-article .article-content .hero-caption {
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 72ch;
  }
}

/* Mobile polish */
@media (max-width: 768px) {
  .artforframe-article .article-content figure,
  .artforframe-article .article-content .article-figure {
    margin: 22px 0 18px;
  }

  .artforframe-article .article-content figure > figcaption,
  .artforframe-article .article-content figcaption.image-caption,
  .artforframe-article .article-content figcaption.article-figcaption,
  .artforframe-article .article-content .hero-caption {
    margin-top: 8px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px !important;
    font-size: 0.80rem;
    line-height: 1.45;
    color: rgba(32, 32, 32, 0.58);
    border-left-width: 2px;
    max-width: 100%;
  }
}
/* ============================================================
   Art For Frame — Luxe In-Article Captions (Desktop + Mobile)
   + Blog link arrow de-duplication fix
   ============================================================ */

/* ===== LUXE CAPTION STYLE ===== */

/* figure spacing */
.artforframe-article .article-content figure,
.artforframe-article .article-content .article-figure {
  margin: 28px 0 24px;
}

/* image presentation */
.artforframe-article .article-content figure img,
.artforframe-article .article-content .article-figure img,
.artforframe-article .article-content img.article-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 16px;
}

/* caption styling (legacy + future-safe selectors) */
.artforframe-article .article-content figure > figcaption,
.artforframe-article .article-content figcaption.image-caption,
.artforframe-article .article-content figcaption.article-figcaption,
.artforframe-article .article-content .hero-caption {
  /* hard reset against theme/header overlay caption styles */
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: auto !important;
  z-index: auto !important;

  /* luxe panel */
  margin: 12px 0 0;
  padding: 12px 14px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.84) 100%
  ) !important;
  border: 1px solid rgba(233, 30, 99, 0.10) !important;
  border-left: 2px solid rgba(233, 30, 99, 0.26) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.025) !important;
  backdrop-filter: none !important;

  /* typography */
  font-family: Inter, sans-serif !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: rgba(35, 35, 35, 0.68) !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-align: left !important;

  max-width: 78ch;
}

/* caption links (if used) */
.artforframe-article .article-content figure > figcaption a,
.artforframe-article .article-content figcaption.image-caption a,
.artforframe-article .article-content figcaption.article-figcaption a {
  color: #e91e63 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* desktop refinement */
@media (min-width: 992px) {
  .artforframe-article .article-content figure > figcaption,
  .artforframe-article .article-content figcaption.image-caption,
  .artforframe-article .article-content figcaption.article-figcaption,
  .artforframe-article .article-content .hero-caption {
    margin-top: 12px;
    padding: 12px 15px !important;
    font-size: 0.83rem !important;
    line-height: 1.5 !important;
    max-width: 72ch;
  }
}

/* mobile refinement */
@media (max-width: 768px) {
  .artforframe-article .article-content figure,
  .artforframe-article .article-content .article-figure {
    margin: 22px 0 18px;
  }

  .artforframe-article .article-content figure > figcaption,
  .artforframe-article .article-content figcaption.image-caption,
  .artforframe-article .article-content figcaption.article-figcaption,
  .artforframe-article .article-content .hero-caption {
    margin-top: 8px;
    padding: 10px 12px !important;
    font-size: 0.77rem !important;
    line-height: 1.42 !important;
    color: rgba(35, 35, 35, 0.64) !important;
    border-radius: 9px !important;
    border-left-width: 2px !important;
    max-width: 100%;
  }
}
/* Desktop: make in-article caption panel match image width */
@media (min-width: 769px) {
  .artforframe-article .article-content figure > figcaption,
  .artforframe-article .article-content figcaption.image-caption,
  .artforframe-article .article-content figcaption.article-figcaption,
  .artforframe-article .article-content .hero-caption {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Caption link guard: keep caption links inline + elegant (prevents block/stacking on mobile) */
.artforframe-article .article-content figcaption.image-caption a,
.artforframe-article .article-content figure > figcaption a {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ============================================================
   SPOKE Desktop alignment — unify intro card, quick answer, TOC
   ============================================================ */
@media (min-width: 992px) {
  /* Shared desktop content rail */
  .artforframe-article {
    --aff-spoke-rail: 860px; /* adjust to taste: 820–920px */
  }

  /* Intro card (outside .article-content) */
  .artforframe-article .aff-spoke-intro,
  .artforframe-article .aff-hub-intro.aff-spoke-intro {
    max-width: var(--aff-spoke-rail) !important;
    width: min(100%, var(--aff-spoke-rail)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Body wrapper should not create a second/narrower rail */
  .artforframe-article .article-content {
    max-width: none !important;
    width: 100% !important;
  }

  /* Key spoke blocks that should visually align with the intro */
  .artforframe-article .article-content > .quick-answer,
  .artforframe-article .article-content > .table-of-contents,
  .artforframe-article .article-content > .early-cta,
  .artforframe-article .article-content > .cta-section,
  .artforframe-article .article-content > .faq-section,
  .artforframe-article .article-content > .pinterest-share,
  .artforframe-article .article-content > .editor-note,
  .artforframe-article .article-content > section {
    max-width: var(--aff-spoke-rail) !important;
    width: min(100%, var(--aff-spoke-rail)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Optional: if quick answer / TOC have custom left offsets, neutralize them */
  .artforframe-article .quick-answer,
  .artforframe-article .table-of-contents {
    left: auto !important;
    transform: none !important;
  }
}
/* ============================================================
   SPOKE intro text width — let intro copy fill the card width (desktop)
   ============================================================ */
@media (min-width: 992px) {
  .artforframe-article .aff-spoke-intro .aff-hub-intro__dek,
  .artforframe-article .aff-hub-intro.aff-spoke-intro .aff-hub-intro__dek {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If your intro uses generic <p> styles that also cap width, neutralize them */
  .artforframe-article .aff-spoke-intro > p,
  .artforframe-article .aff-hub-intro.aff-spoke-intro > p {
    max-width: none;
  }
}

/* ===== BLOG ARTICLE LINK ARROW DE-DUPLICATION ===== */
/* Your template link text already includes arrows (e.g., "Shop bundle →").
   If a CSS pseudo-element also adds an arrow, you'll get "→ →". Disable pseudo arrows in blog post body UI. */

.artforframe-article .product-link::after,
.artforframe-article .featured-art-link::after,
.artforframe-article .early-cta-button::after,
.artforframe-article .early-cta-button-outline::after,
.artforframe-article .cta-button::after {
  content: none !important;
  display: none !important;
}

/* If any pseudo underline/line decoration is tied to ::before, remove it too (prevents doubled line effect) */
.artforframe-article .product-link::before,
.artforframe-article .featured-art-link::before,
.artforframe-article .early-cta-button::before,
.artforframe-article .early-cta-button-outline::before,
.artforframe-article .cta-button::before {
  content: none !important;
  display: none !important;
}
@media (max-width: 768px) {
  /* FIX: Inline links inside body text should NEVER get button-like padding */
  .artforframe-article .article-content p a.featured-art-link,
  .artforframe-article .article-content li a.featured-art-link,
  .main-article .article-content p a.featured-art-link,
  .main-article .article-content li a.featured-art-link,
  .article-template .rte p a.featured-art-link,
  .article-template .rte li a.featured-art-link {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    vertical-align: baseline !important;
  }
}
/* FIX: Add breathing room above stacked link groups (.cta-inline-links) */
.artforframe-article .cta-inline-links {
  margin-top: 16px;
}

/* More spacing when the link list follows the primary CTA button group */
.artforframe-article .cta-button-group + .cta-inline-links {
  margin-top: 22px;
}

/* Product showcase: add spacing after the "Browse…" label paragraph */
.artforframe-article .product-showcase p + .cta-inline-links {
  margin-top: 18px;
}

/* Mobile: slightly larger spacing so it doesn’t feel cramped */
@media (max-width: 768px) {
  .artforframe-article .cta-inline-links {
    margin-top: 18px;
  }
  .artforframe-article .cta-button-group + .cta-inline-links {
    margin-top: 26px;
  }
  .artforframe-article .product-showcase p + .cta-inline-links {
    margin-top: 20px;
  }
}
/* EDITORIAL LINK-LIST MODULE: subtle divider + padding for .cta-inline-links */
.artforframe-article .cta-inline-links {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  padding-top: 14px;
}

/* If the link list follows a button group, give it a touch more separation */
.artforframe-article .cta-button-group + .cta-inline-links {
  padding-top: 16px;
}

/* Product showcase: keep divider but balance spacing after label */
.artforframe-article .product-showcase p + .cta-inline-links {
  padding-top: 14px;
}

@media (max-width: 768px) {
  .artforframe-article .cta-inline-links {
    padding-top: 16px;
  }
  .artforframe-article .cta-button-group + .cta-inline-links {
    padding-top: 18px;
  }
}
/* Blog product cards: keep images crisp (no hover zoom) */
@media (hover: hover) and (pointer: fine) {
  .artforframe-article .product-card:hover img {
    transform: none !important;
  }
}
/* ============================================================
   MOBILE TABLE WRAP FIX — ALL COMPARISON TABLES
   Prevents nowrap inheritance so text never spills past cards
   ============================================================ */
@media (max-width: 768px) {
  /* kill any theme-wide nowrap/x-scroll rules */
  .artforframe-article .comparison-table,
  .artforframe-article .comparison-table * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* ensure cell boxes can shrink inside the card */
  .artforframe-article .comparison-table td,
  .artforframe-article .comparison-table th {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* prevent horizontal scrolling containers from reappearing */
  .artforframe-article .comparison-table-wrap {
    overflow-x: visible !important;
  }
}
@media (max-width: 768px) {
  /* Fix mobile pill buttons “pinching” */
  .artforframe-article .cta-button-group > a.cta-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
    padding: 14px 26px !important;

    line-height: 1.15 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.06em !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}
/* AFF: Keep card lift, remove image resample blur (desktop + mobile) */
.artforframe-article .product-card:hover img {
  transform: none !important;
}