@media (max-width: 768px) {
    .mainStructure .dp-v2-wrapper .dp-ai-analysis {
    padding-top: 29px;
    padding-bottom: 29px;
    margin-bottom: 29px;
}
    span#dp-v2-deal-percent {
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: 12px;
}

.dp-v2-price-card-label {
    font-size: 12px;
}

a.dp-v2-price-card-link {
    font-size: 12px;
}
    /* Layout adjustments */
    .price-grid {
        flex-direction: column;
    }

    .price-index-container {
        width: 100%;
    }

    .mainStructure section {
        padding: 145px 20px;
    }

    /* Hide desktop table on mobile */
    table.price-index-table.desktop-only {
        display: none;
    }

    /* Show mobile cards */
    .mobile-price-cards.mobile-only {
        display: flex;
    }

    /* Snapshot container adjustments */
    .snapshot-container {
        padding: 0;
    }

    .snapshot-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
    }

    .snapshot-header h4 {
        font-size: 1.3rem;
    }

    .update-date {
        font-size: 0.85rem;
    }

    /* Section headings */
    section.section.diamond-guides h2,
    section.section.diamond-faq h2 {
        font-size: 1.8rem;
        text-align: left;
    }

    section.section.diamond-guides {
        margin-top: 30px;
        padding: 40px 20px;
    }

    /* Hero section mobile */
    .diamond-prices-hero {
        padding: 100px 20px 20px 20px !important;
    }

    .diamond-prices-hero h1 {
        font-size: 1.8rem;
    }

    .diamond-prices-hero .lead {
        font-size: 1rem;
    }

    /* Breadcrumb mobile */
    .breadcrumb-nav {
        padding: 12px 0;
        padding-top: 91px; /* Adjust for mobile hero section */
    }

    .breadcrumb {
        font-size: 0.85rem;
        padding: 0 20px;
    }

    .breadcrumb-item:not(:last-child)::after {
        margin-left: 6px;
        font-size: 1rem;
    }

    /* Shape hero content mobile */
    .shape-hero-content {
        padding: 24px 0;
    }

    /* FAQ mobile */
    section.section.diamond-faq {
        padding: 40px 20px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .faq-item {
        padding: 20px;
    }

    .faq-item h4 {
        font-size: 1.1rem;
    }

    .faq-item p {
        font-size: 0.95rem;
    }

    /* Guides grid mobile */
    .guides-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .guide-item {
        padding: 24px;
    }

    .guide-item h4 {
        font-size: 1.3rem;
    }

    /* FAQ mobile */
    .faq-item {
        padding: 20px;
    }

    /* Price cards mobile */
    .price-card {
        padding: 20px;
    }

    .price-value {
        font-size: 1.8em;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .mainStructure section {
        padding: 171px 16px;
    }
.section.price-charts{
        padding: 0px 16px 0px 16px!important;
}
    .section.shape-hero-content{
        padding: 170px 0px 0px 0px!important;
}
    
    .snapshot-header h4 {
        font-size: 1.1rem;
    }

    .diamond-prices-hero h1 {
        font-size: 1.5rem;
    }

    .card-header-mobile h4 {
        font-size: 1.1rem;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 0.9rem;
        padding: 10px 16px;
    }

    section.section.diamond-guides h2,
    section.section.diamond-faq h2 {
        font-size: 1.5rem;
    }

    /* Breadcrumb extra small */
    .breadcrumb-nav {
        padding-top: 91px;
    }

    .breadcrumb {
        font-size: 0.8rem;
        padding: 0 16px;
    }

    /* FAQ extra small */
    .faq-item {
        padding: 16px;
    }

    .faq-item h4 {
        font-size: 1rem;
    }

    .faq-item p {
        font-size: 0.9rem;
    }
}
/* ============================================================================
   1.7.19 - mobile section-gap fix (2026-07-26)
   BUG: the generic `.mainStructure section` mobile padding is a header-clearance
   value (171px at ≤480, 145px at ≤768) that lands on EVERY <section>, so each
   dp-v2 price-page section stacked ~340px of empty top+bottom padding -
   producing huge blank gaps between sections on mobile.
   FIX: give dp-v2 sections normal vertical rhythm. Scoped to .dp-v2-wrapper so
   legacy /diamond-prices/{shape}/ pages are untouched; specificity (0,2,1) beats
   the generic (0,1,1) at every mobile width. The hero keeps its own clearance
   via a higher-specificity rule, so it is unaffected.
   ========================================================================== */
@media (max-width: 768px) {
    .mainStructure .dp-v2-wrapper section {
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
    /* The guide/FAQ blocks read better with a touch more breathing room. */
    .mainStructure .dp-v2-wrapper section.dp-v2-guide-section,
    .mainStructure .dp-v2-wrapper section.dp-v2-faq-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

/* ============================================================================
   1.7.20 - align blog-section content to the FAQ column (2026-07-26)
   The blog section (shared blog-top-articles.php) keeps its full-width #f9f9f9
   background, but on dp-v2 price pages its content ran edge-to-edge while the
   FAQ content sits inside .dp-v2-container (max-width 1280px, centered). Constrain
   the blog content to the same column so the two sections line up.
   Scoped to .dp-v2-wrapper - the ~10 other pages using blog-top-articles.php are
   untouched. Section background stays full-width; only the content is columned.
   ========================================================================== */
.dp-v2-wrapper section.blog-section > .title,
.dp-v2-wrapper section.blog-section > .blog-article-structure {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}