/**
 * Homepage Styles
 *
 * @package Kamagra_Kopen
 */

/* ==========================================================================
   SHARED HOMEPAGE PRIMITIVES
   ========================================================================== */

.section-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--spacing-2xl);
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

.section-heading + .section-intro {
    margin-top: 0;
}

.section-disclaimer {
    text-align: center;
    margin-top: var(--spacing-xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.section-cta-row {
    text-align: center;
    margin-top: var(--spacing-2xl);
}

.section-cta-row .btn {
    padding: 12px 28px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.container--narrow {
    max-width: 1080px;
    margin: 0 auto;
}

.container--narrow.container--text {
    max-width: 860px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* Shared wrapper around hero + showcase — single continuous background */
.hero-showcase-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #eaf6f8 0%, #ffffff 55%, #cbe7ea 100%);
}

.hero-showcase-wrap .hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 20%, rgba(0, 115, 133, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(203, 231, 234, 0.6) 0%, transparent 50%);
}

.section-hero {
    position: relative;
    padding: var(--spacing-3xl) 0;
    background: transparent;
}

/* Legacy: keep overlay rule for any page still using the old standalone hero markup */
.hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.hero-title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md);
    letter-spacing: -0.01em;
    position: relative;
    padding-bottom: 24px;
}

/* "Pin + tapered tail" divider — same as FAQ, reviews subheading, slider heading. */
.hero-title::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 6px;
    width: 130px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-primary) 0%, rgba(0, 115, 133, 0.15) 100%);
}

.hero-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 115, 133, 0.12);
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    line-height: 1.65;
    color: var(--color-text);
    margin: 0 0 var(--spacing-lg);
    max-width: 520px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 14px;
    border-radius: 999px;
    background-color: var(--color-white);
    border: 1px solid var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hero-badge i {
    color: var(--color-primary);
    font-size: 0.95rem;
}

.hero-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.hero-cta .btn-lg {
    padding: 16px 32px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    box-shadow: 0 6px 16px rgba(0, 115, 133, 0.25);
}

.hero-link,
.hero-link:hover,
.hero-link:focus,
.hero-link:active,
.hero-link:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-link {
    color: var(--color-primary);
}

.hero-link:hover,
.hero-link:focus {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-dark);
}

.hero-link i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.hero-link:hover i {
    transform: translateX(3px);
}

.hero-image {
    position: relative;
    text-align: center;
}

.hero-image::before {
    content: '';
    position: absolute;
    inset: 10% 5%;
    background: radial-gradient(circle at center, rgba(0, 115, 133, 0.18) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
}

.hero-image__link {
    position: relative;
    z-index: 1;
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.hero-image__link:hover {
    transform: translateY(-3px);
}

.hero-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: var(--border-radius-lg);
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   FEATURED — COMPACT VARIANT (less visual dominance)
   ========================================================================== */

.section-featured--compact {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    background-color: var(--color-white);
}

.section-featured--compact .featured-grid {
    padding: 0;
    gap: var(--spacing-xl);
}

.section-featured--compact .section-heading {
    margin-bottom: var(--spacing-xl);
}

/* Inline header — heading on the left, CTA on the right (used by row 3 today
   via the section-featured--with-header-cta modifier).
   max-width + horizontal padding mirror the grid's exactly so the heading's
   left edge lines up with the first card and the CTA's right edge with the
   last card. */
.section-featured--with-header-cta .section-featured__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto var(--spacing-2xl);
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 115, 133, 0.12);
}

.section-featured--with-header-cta .section-featured__header .section-heading {
    text-align: left;
    margin: 0;
    flex: 1 1 auto;
}

.section-featured__cta {
    flex: 0 0 auto;
    padding: 12px 28px;
    white-space: nowrap;
}

/* ==========================================================================
   INFO SPLIT SECTIONS (50/50, reusable component)
   ========================================================================== */

.section-info-split {
    padding: var(--spacing-3xl) 0;
    background-color: #ffffff;
}

/* The second info-split picks up the teal tint slot in the rhythm */
.section-info-split + .section-info-split {
    background-color: #eef7f8;
}

.info-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.info-split-content {
    max-width: 540px;
}

.info-split-content .section-heading {
    text-align: left;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
    color: var(--color-primary);
    position: relative;
    padding-bottom: 24px;
}

/* Dual-bar divider — same as blog / dosage / safety / compare sections. */
.info-split-content .section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 100px;
    height: 4px;
    border-radius: 99px;
    background: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 115, 133, 0.22);
}

.info-split-content .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 99px;
    background: var(--color-primary);
    opacity: 0.4;
}

.info-split-text {
    font-size: var(--font-size-base);
    line-height: 1.75;
    color: var(--color-text);
}

.info-split-text p {
    margin: 0 0 var(--spacing-md);
}

.info-split-text p:last-child {
    margin-bottom: 0;
}

.info-split-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.info-split-text a:hover {
    color: var(--color-primary-dark);
}

.info-split-text ul {
    padding-left: var(--spacing-lg);
    margin: var(--spacing-md) 0;
}

.info-split-text li {
    margin-bottom: var(--spacing-xs);
}

.info-split-timeline {
    list-style: none;
    margin: var(--spacing-xl) 0 0;
    padding: 0;
    position: relative;
    counter-reset: timeline;
}

.info-split-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-secondary) 0%, var(--color-secondary) 100%);
    border-radius: 2px;
}

.info-split-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-md);
}

.info-split-timeline__item:last-child {
    padding-bottom: 0;
}

.info-split-timeline__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--color-white);
}

.section-info-split + .section-info-split .info-split-timeline__icon {
    box-shadow: 0 0 0 4px var(--color-background);
}

.info-split-timeline__body {
    padding-top: 6px;
}

.info-split-timeline__label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: 2px;
}

.info-split-timeline__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-light);
}

.info-split-image {
    position: relative;
}

.info-split-image__link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.info-split-image__link:hover {
    transform: translateY(-3px);
}

.info-split-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px -20px rgba(0, 115, 133, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
    display: block;
    background-color: var(--color-secondary);
}

.section-info-split--reversed .info-split-grid > .info-split-image {
    order: 0;
}

.section-info-split--reversed .info-split-grid > .info-split-content {
    order: 1;
    margin-left: auto;
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.section-compare {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-white);
}

/* Left-aligned heading + dual-bar divider (same pattern as dosage/safety). */
.section-compare .section-heading {
    text-align: left;
    position: relative;
    padding-bottom: 24px;
}

.section-compare .section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 100px;
    height: 4px;
    border-radius: 99px;
    background: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 115, 133, 0.22);
}

.section-compare .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 99px;
    background: var(--color-primary);
    opacity: 0.4;
}

.section-compare .section-intro {
    max-width: 880px;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    padding-right: var(--spacing-2xl, 64px);
}

/* Combined 2-col layout: comparison table on the left, reviews stacked vertically on the right.
   align-items: stretch makes the right column fill the same vertical height as the left, so the
   reviews area visually balances the table area. */
.compare-reviews-grid {
    display: grid;
    grid-template-columns: 73fr 27fr;
    gap: var(--spacing-2xl);
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.compare-reviews-grid__main {
    min-width: 0; /* allows the table-wrap to size to the column instead of forcing overflow */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.compare-reviews-grid__side {
    display: flex;
    flex-direction: column;
}

/* Left-aligned, slightly smaller heading + intro inside the 70% column */
.compare-reviews-grid__main .section-heading {
    text-align: left;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-md);
}

.compare-reviews-grid__main .section-intro {
    text-align: left;
    font-size: var(--font-size-base);
    line-height: 1.75;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--spacing-xl);
}

.compare-reviews-grid__side .trust-reviews-heading {
    text-align: right;
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.trust-reviews-heading__top,
.trust-reviews-heading__bot {
    display: block;
}

/* New divider design — a row of three teal dots, anchored to the right
   so it aligns with the right-aligned heading lines above and below. */
.trust-reviews-heading__divider {
    position: relative;
    display: block;
    height: 6px;
    margin: 14px 0;
}

.trust-reviews-heading__divider::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow:
        -14px 0 0 var(--color-primary),
        -28px 0 0 var(--color-primary);
}

/* Vertical stack of testimonial cards inside the right column.
   flex: 1 fills the available height of the (stretched) side column, and
   justify-content: space-between distributes the empty space evenly between
   the cards instead of collapsing them all to the top. Cards keep their
   natural height — only the gap grows. */
.testimonials-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    justify-content: space-between;
}

.testimonials-stack .testimonial-card {
    padding: 12px var(--spacing-md) 12px 12px;
    gap: 4px;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.testimonials-stack .testimonial-card__quote {
    color: var(--color-white);
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 4px;
}

/* Tapered white divider between quote and author — mirrors the pin+tail
   style but scaled down + white so it reads on the teal card bg. */
.testimonials-stack .testimonial-card__quote::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 1px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
}

.testimonials-stack .testimonial-card__quote::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
}

.testimonials-stack .testimonial-card__author {
    color: rgba(255, 255, 255, 0.85);
}

/* Decorative quote mark — keep visible on the dark bg */
.testimonials-stack .testimonial-card::before {
    color: var(--color-white);
}

.testimonials-stack .testimonial-card::before {
    font-size: 2.25rem;
    top: 2px;
    right: 12px;
}

.testimonials-stack .testimonial-card__quote {
    font-size: 15px;
    line-height: 1.45;
}

.testimonials-stack .testimonial-card__author {
    font-size: 12px;
}

/* Anchor variant — when testimonials_link is set, each .testimonial-card is
   rendered as <a class="testimonial-card testimonial-card--link">. Same
   belt-and-suspenders pattern as the dosage / safety / trust / blog cards:
   kill underline on the anchor itself AND every descendant in every state
   while keeping each descendant's own colors. */
a.testimonial-card--link,
a.testimonial-card--link:hover,
a.testimonial-card--link:focus,
a.testimonial-card--link:active,
a.testimonial-card--link:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.testimonial-card--link .testimonial-card__quote,
a.testimonial-card--link .testimonial-card__author,
a.testimonial-card--link .testimonial-stars,
a.testimonial-card--link .testimonial-stars i,
a.testimonial-card--link:hover .testimonial-card__quote,
a.testimonial-card--link:hover .testimonial-card__author,
a.testimonial-card--link:hover .testimonial-stars,
a.testimonial-card--link:hover .testimonial-stars i,
a.testimonial-card--link:focus .testimonial-card__quote,
a.testimonial-card--link:focus .testimonial-card__author,
a.testimonial-card--link:focus .testimonial-stars,
a.testimonial-card--link:focus .testimonial-stars i {
    text-decoration: none;
}

a.testimonial-card--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* Anchor wrapper around the table — makes the entire table clickable.
   display: block + color inherit + no underline keeps the original look;
   the cursor + subtle hover lift signal interactivity. */
.compare-table-link,
.compare-table-link:hover,
.compare-table-link:focus,
.compare-table-link:active,
.compare-table-link:visited {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.compare-table-link .compare-table-wrap {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.compare-table-link:hover .compare-table-wrap,
.compare-table-link:focus-visible .compare-table-wrap {
    box-shadow: 0 12px 28px rgba(0, 115, 133, 0.16), 0 1px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.compare-table-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 16px;
}

.compare-table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 115, 133, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    background: var(--color-white);
    -webkit-overflow-scrolling: touch;
}

/* Mobile/tablet alternative: one mini-table per product, label/value rows.
   Hidden on desktop; revealed at <=991px while the desktop table is hidden. */
.compare-table-mobile { display: none; }

/* Subtle SEO/info note placed under the comparison table.
   Same effective width as the table (fills the column), left-aligned, soft
   teal-tinted background with a thin accent border so it reads as an info
   callout rather than a marketing block. */
.compare-seo-note {
    margin: 27px 0 0;
    padding: 12px var(--spacing-md);
    background: rgba(0, 115, 133, 0.04);
    border-left: 3px solid var(--color-secondary);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-light);
}

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

.compare-table th,
.compare-table td {
    padding: var(--spacing-md) 10px var(--spacing-md) 36px;
    text-align: left;
    border-bottom: 1px solid #eef2f3;
    vertical-align: middle;
    font-size: 12px;
}

/* Body data cells use a slightly larger 15px for readability while keeping
   thead headers at the smaller uppercase 12px set by the base rule above. */
.compare-table tbody td {
    font-size: 15px;
}

/* Column width hints — Product column gets a comfortable 18%, middle columns
   sized for typical 2-3 word phrases like "verschilt per persoon" so they
   stay on a single line on desktop. "Opmerking" gets the rest. */
.compare-table th:nth-child(1),
.compare-table td:nth-child(1) { width: 18%; white-space: nowrap; }
.compare-table th:nth-child(2),
.compare-table td:nth-child(2) { width: 13%; white-space: nowrap; }
.compare-table th:nth-child(3),
.compare-table td:nth-child(3) { width: 21%; }
.compare-table th:nth-child(4),
.compare-table td:nth-child(4) { width: 21%; }
.compare-table th:nth-child(5),
.compare-table td:nth-child(5) { width: 27%; }

.compare-table thead th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.compare-table thead th:first-child {
    background-color: var(--color-primary-dark);
}

.compare-table tbody tr {
    transition: background-color 0.15s ease;
}

.compare-table tbody tr:nth-child(even) {
    background-color: #fafcfd;
}

.compare-table tbody tr:hover {
    background-color: #eaf6f8;
}

.compare-table tbody th.compare-table__product {
    background-color: var(--color-secondary);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.compare-table tbody td {
    color: var(--color-text);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   HOEVEEL EN WANNEER (info cards)
   ========================================================================== */

.section-dosage {
    padding: var(--spacing-3xl) 0;
    background-color: #eef7f8;
}

.section-dosage .section-heading {
    margin-bottom: var(--spacing-md);
    text-align: left;
    position: relative;
    padding-bottom: 24px;
}

/* Stacked dual-bar divider — long solid teal bar on top, shorter softer
   teal bar beneath. Architectural, asymmetric, on-brand. */
.section-dosage .section-heading::after,
.section-safety .section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 100px;
    height: 4px;
    border-radius: 99px;
    background: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 115, 133, 0.22);
}

.section-dosage .section-heading::before,
.section-safety .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 99px;
    background: var(--color-primary);
    opacity: 0.4;
}

/* Subtitle matches the info-split body type ("Hoe werkt het?" subtitle). */
.section-dosage .section-intro {
    max-width: 960px;
    font-size: var(--font-size-base);
    line-height: 1.75;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.dosage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.dosage-card {
    background: var(--color-white);
    border-radius: 16px;
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 115, 133, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eef2f3;
}

.dosage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 115, 133, 0.20), 0 4px 12px rgba(0, 0, 0, 0.07);
    border-color: var(--color-secondary);
}

/* Anchor variant — when the card has a link, render it as an <a class="dosage-card dosage-card--link">.
   Reset default link styling so the card looks identical to the static variant, while keeping
   the cursor + hover/focus signals for interactivity. */
a.dosage-card--link,
a.dosage-card--link:hover,
a.dosage-card--link:focus,
a.dosage-card--link:active,
a.dosage-card--link:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: block;
}

/* Belt-and-suspenders: kill any inherited or descendant-applied underline on
   the title, body text, and icon — even if the global theme has a more
   aggressive a:hover rule, these explicit overrides win on specificity.
   We deliberately do NOT touch `color` here so each descendant keeps its
   own color (icon stays teal, title keeps its original color, etc.). */
a.dosage-card--link .dosage-card__title,
a.dosage-card--link .dosage-card__text,
a.dosage-card--link .dosage-card__icon,
a.dosage-card--link .dosage-card__icon i,
a.dosage-card--link:hover .dosage-card__title,
a.dosage-card--link:hover .dosage-card__text,
a.dosage-card--link:hover .dosage-card__icon,
a.dosage-card--link:hover .dosage-card__icon i,
a.dosage-card--link:focus .dosage-card__title,
a.dosage-card--link:focus .dosage-card__text,
a.dosage-card--link:focus .dosage-card__icon,
a.dosage-card--link:focus .dosage-card__icon i {
    text-decoration: none;
}

a.dosage-card--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.dosage-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--spacing-lg);
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
}

.dosage-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm);
}

.dosage-card__text {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

/* ==========================================================================
   SAFETY / ECHT OF NEP?
   ========================================================================== */

.section-safety {
    padding: var(--spacing-3xl) 0;
    background-color: #eef7f8;
}

.section-safety .section-heading {
    margin-bottom: var(--spacing-md);
    text-align: left;
    position: relative;
    padding-bottom: 24px;
}

.section-safety .section-intro {
    max-width: 960px;
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: var(--spacing-2xl);
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.safety-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

/* Cards match the dosage-card visual pattern: white bg, soft border, small
   shadow at rest, lift + stronger shadow + teal border on hover. */
.safety-feature {
    background: var(--color-white);
    border: 1px solid #eef2f3;
    border-radius: 16px;
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 115, 133, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.safety-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 115, 133, 0.20), 0 4px 12px rgba(0, 0, 0, 0.07);
    border-color: var(--color-secondary);
}

.safety-feature__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--spacing-lg);
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
}

.safety-feature__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm);
}

/* Anchor variant — when the safety card has a link, render it as an
   <a class="safety-feature safety-feature--link">. Reset link styling on
   the card itself AND every descendant so the global a:hover underline
   never bleeds through, while preserving each descendant's own colors. */
a.safety-feature--link,
a.safety-feature--link:hover,
a.safety-feature--link:focus,
a.safety-feature--link:active,
a.safety-feature--link:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: flex;
}

a.safety-feature--link .safety-feature__title,
a.safety-feature--link .safety-feature__text,
a.safety-feature--link .safety-feature__icon,
a.safety-feature--link .safety-feature__icon i,
a.safety-feature--link:hover .safety-feature__title,
a.safety-feature--link:hover .safety-feature__text,
a.safety-feature--link:hover .safety-feature__icon,
a.safety-feature--link:hover .safety-feature__icon i,
a.safety-feature--link:focus .safety-feature__title,
a.safety-feature--link:focus .safety-feature__text,
a.safety-feature--link:focus .safety-feature__icon,
a.safety-feature--link:focus .safety-feature__icon i {
    text-decoration: none;
}

a.safety-feature--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.safety-feature__text {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: 15px;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.section-faq {
    position: relative;
    padding: var(--spacing-3xl) 0;
    background-color: #ffffff;
}

/* Subtle teal accent blob in the top-right so the white section feels alive. */
.section-faq::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 115, 133, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section-faq .container {
    max-width: 1080px;
    position: relative;
    z-index: 1;
}

/* Left-aligned heading with a new "pin + tail" divider:
   small filled circle anchor on the left, thin tapering line trailing right. */
.section-faq .section-heading {
    text-align: left;
    position: relative;
    padding-bottom: 24px;
    margin-bottom: var(--spacing-xl);
}

.section-faq .section-heading::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 6px;
    width: 130px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-primary) 0%, rgba(0, 115, 133, 0.15) 100%);
}

.section-faq .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 115, 133, 0.12);
}

/* 2-column FAQ grid (unchanged structure). */
.faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-lg);
    align-items: start;
}

.faq-list__col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Card-style item: previous hover is now the default look. */
.faq-item {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 115, 133, 0.06);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Teal accent stripe — collapsed by default, slides in when open. */
.faq-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    transition: width 0.25s ease;
}

.faq-item:hover {
    box-shadow: 0 14px 32px rgba(0, 115, 133, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

.faq-item[open] {
    background: linear-gradient(180deg, #f4fbfc 0%, #ffffff 60%);
    box-shadow: 0 22px 50px rgba(0, 115, 133, 0.20), 0 4px 12px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}

.faq-item[open]::before {
    width: 6px;
}

.faq-question {
    list-style: none;
    cursor: pointer;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.35;
    transition: color 0.2s ease;
    user-select: none;
}

.faq-question:hover,
.faq-item[open] .faq-question {
    color: var(--color-primary);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 16px;
}

.faq-question__text {
    flex: 1;
}

.faq-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 115, 133, 0.10);
}

.faq-item:hover .faq-icon {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: rotate(90deg);
}

.faq-item[open] .faq-icon {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: rotate(0);
    box-shadow: 0 4px 12px rgba(0, 115, 133, 0.25);
}

.faq-icon__plus,
.faq-icon__minus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-icon__minus { opacity: 0; }
.faq-item[open] .faq-icon__plus { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon__minus { opacity: 1; }

.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.28s ease;
    color: var(--color-text-light);
    line-height: 1.7;
}

.faq-item[open] .faq-answer {
    height: auto;
}

.faq-answer__inner {
    padding: 0 var(--spacing-lg) var(--spacing-md);
}

.faq-answer p {
    margin: 0 0 var(--spacing-sm);
}

.faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   INFO SECTION (legacy — kept for back-compat)
   ========================================================================== */

.section-info {
    padding: var(--spacing-3xl) 0;
}

.info-grid {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.info-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-md);
    display: block;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.info-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.info-content p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text);
    margin: 0;
}

.info-delivery {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary) !important;
}

.info-delivery i {
    margin-right: var(--spacing-xs);
}

.info-content .btn {
    align-self: flex-start;
    margin-top: var(--spacing-sm);
}

/* ==========================================================================
   FEATURED PRODUCTS SECTION
   ========================================================================== */

.section-featured {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-background);
}

.section-heading {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

.featured-grid {
    --featured-cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--featured-cols), 1fr);
    gap: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.featured-grid--cols-4 { --featured-cols: 4; }

.featured-grid--cols-3 {
    --featured-cols: 3;
    max-width: 1100px;
}

/* ==========================================================================
   TRUST + REVIEWS SECTION
   ========================================================================== */

.section-trust {
    padding: var(--spacing-3xl) 0;
    background-color: #eef7f8;
}

.section-trust .section-heading {
    margin-bottom: var(--spacing-2xl);
    text-align: left;
    position: relative;
    padding-bottom: 24px;
}

/* Dual-bar divider — same as Wat is Kamagra? / Hoe werkt het? */
.section-trust .section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 100px;
    height: 4px;
    border-radius: 99px;
    background: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 115, 133, 0.22);
}

.section-trust .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 99px;
    background: var(--color-primary);
    opacity: 0.4;
}

/* Trust cards row */
.trust-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
}

/* Trust cards — visually identical to .safety-feature so the section reads as
   part of the same design system. */
.trust-card {
    background: var(--color-white);
    border: 1px solid #eef2f3;
    border-radius: 16px;
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 115, 133, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 115, 133, 0.20), 0 4px 12px rgba(0, 0, 0, 0.07);
    border-color: var(--color-secondary);
}

.trust-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--spacing-lg);
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
}

.trust-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm);
}

.trust-card__text {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: 15px;
}

/* Anchor variant — when the card has a link, render it as
   <a class="trust-card trust-card--link">. Same belt-and-suspenders pattern
   as the dosage and safety cards: kill underline on the anchor itself AND
   every descendant in every interaction state, while keeping each
   descendant's own color. */
a.trust-card--link,
a.trust-card--link:hover,
a.trust-card--link:focus,
a.trust-card--link:active,
a.trust-card--link:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: flex;
}

a.trust-card--link .trust-card__title,
a.trust-card--link .trust-card__text,
a.trust-card--link .trust-card__icon,
a.trust-card--link .trust-card__icon i,
a.trust-card--link:hover .trust-card__title,
a.trust-card--link:hover .trust-card__text,
a.trust-card--link:hover .trust-card__icon,
a.trust-card--link:hover .trust-card__icon i,
a.trust-card--link:focus .trust-card__title,
a.trust-card--link:focus .trust-card__text,
a.trust-card--link:focus .trust-card__icon,
a.trust-card--link:focus .trust-card__icon i {
    text-decoration: none;
}

a.trust-card--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* Reviews subheading */
.trust-reviews-heading {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xl);
}

/* Reviews grid (cleaner — 3-up, no brands card mixed in) */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.testimonial-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid #eef2f3;
    border-radius: 16px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: 0 8px 24px rgba(0, 115, 133, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.testimonial-card:hover {
    box-shadow: 0 16px 40px rgba(0, 115, 133, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-6px);
    border-color: var(--color-secondary);
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 8px;
    right: 20px;
    font-size: 4rem;
    line-height: 1;
    color: var(--color-secondary);
    font-family: Georgia, serif;
    pointer-events: none;
}

.testimonial-stars {
    color: #f5a623;
    font-size: var(--font-size-sm);
}

.testimonial-stars i {
    margin-right: 2px;
}

.testimonial-card__quote {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    flex: 1;
}

.testimonial-card__author {
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

/* Footer strip — brands logo + TrustProfile widget */
.trust-footer {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid #eef2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.trust-footer__brands {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.trust-footer__label {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.trust-footer__brands img {
    max-height: 60px;
    width: auto;
    display: block;
}

.trust-footer__widget {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   BLOG SECTION
   ========================================================================== */

.section-blog {
    padding: var(--spacing-3xl) 0;
    background-color: #ffffff;
}

/* Heading on top, then a flex row holding the subtitle on the left and the
   "Bekijk alle artikelen" CTA on the right. The CTA bottom-aligns with the
   subtitle's last line (align-items: end). */
.section-blog .section-heading {
    text-align: left;
    margin: 0 0 var(--spacing-md);
    position: relative;
    padding-bottom: 24px;
}

/* "Pin + tapered tail" divider — same as hero / FAQ / reviews subheading / slider heading. */
.section-blog .section-heading::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 6px;
    width: 130px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-primary) 0%, rgba(0, 115, 133, 0.15) 100%);
}

.section-blog .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 115, 133, 0.12);
}

.section-blog__intro-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 115, 133, 0.12);
}

.section-blog .section-intro {
    text-align: left;
    max-width: 720px;
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--font-size-base);
    line-height: 1.75;
}

.section-blog__cta {
    flex: 0 0 auto;
    padding: 12px 24px;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Note: .blog-grid + .result-card--post styles live in assets/css/blog.css
   (shared between the homepage section and the standalone blog/archive
   pages). The CSS is enqueued on every page that uses the blog grid. */

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */

.section-newsletter {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.newsletter-content .trustpilot-widget {
    margin-bottom: var(--spacing-md);
}

.newsletter-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #fff;
    margin-bottom: var(--spacing-sm);
}

.newsletter-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin: 0;
}

.newsletter-content p em {
    text-decoration: underline;
}

.newsletter-input-group {
    display: flex;
    gap: 0;
}

.newsletter-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
    font-size: var(--font-size-base);
    outline: none;
}

.newsletter-input-group .btn {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    padding: var(--spacing-md) var(--spacing-xl);
    white-space: nowrap;
}

.newsletter-message {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
}

.newsletter-success {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.newsletter-error {
    background: rgba(220, 53, 69, 0.3);
    color: #fff;
}

/* =====================================================================
 * Homepage product showcase — premium bento gallery with mesh-gradient
 * background, decorative blobs, hero image with overlay, one "featured"
 * wide card, and 10 standard product tiles. Scoped to .section-showcase.
 * ===================================================================== */

.section-showcase {
    position: relative;
    padding: var(--spacing-2xl) 0;
    background: transparent;
    overflow: hidden;
}

.showcase-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.showcase-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}

.showcase-blob--b {
    width: 420px; height: 420px;
    bottom: -120px; right: -80px;
    background: radial-gradient(circle, rgba(192, 24, 90, 0.22), transparent 70%);
}

.showcase-blob--c {
    width: 320px; height: 320px;
    top: 45%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 100, 0.16), transparent 70%);
}

.section-showcase > .container {
    position: relative;
    z-index: 1;
}

.showcase-header {
    text-align: right;
    margin-bottom: 18px;
}

.showcase-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    font-weight: 800;
    color: var(--color-primary);
    background: rgba(0, 160, 184, 0.10);
    padding: 10px 20px;
    border-radius: 99px;
    margin-bottom: 32px;
}

.showcase-eyebrow .fa-bolt { color: #ffb800; }

.showcase-header .section-heading {
    margin-bottom: 0;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
    max-width: 1200px;
    margin-inline: auto;
}

/* ----- Cards (standard) ----- */
.showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    padding: 12px 12px 28px;
    text-decoration: none;
    color: inherit;
    overflow: visible;
    box-shadow: 0 4px 14px rgba(0, 115, 133, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(.4, 1.4, .6, 1), box-shadow 0.3s ease;
    border: 0;
}

.showcase-card:hover,
.showcase-card:focus-visible {
    box-shadow: 0 14px 36px rgba(0, 115, 133, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

.showcase-card,
.showcase-card:hover,
.showcase-card:focus,
.showcase-card:focus-visible,
.showcase-card .showcase-card__title,
.showcase-card .showcase-card__price,
.showcase-card:hover .showcase-card__title,
.showcase-card:hover .showcase-card__price {
    text-decoration: none;
}

.showcase-card__ribbon {
    position: absolute;
    top: 22px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: linear-gradient(135deg, #c0185a, #ff5b8d);
    color: #fff;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(192, 24, 90, 0.35);
}

.showcase-card__image {
    flex: 1;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: transparent;
    padding: 10px;
    margin-bottom: 10px;
    overflow: visible;
}

.showcase-card__img,
.showcase-card__image img {
    max-width: 84%;
    max-height: 84%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transform: scale(1.16);
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(.4, 1.4, .6, 1);
}

.showcase-card:hover .showcase-card__img,
.showcase-card:focus-visible .showcase-card__img {
    transform: scale(1.24);
}

.showcase-card__body {
    text-align: center;
    padding: 0 4px;
}

.showcase-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
    color: var(--color-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.showcase-card__price {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #c0185a;
    padding: 4px 12px;
    background: rgba(192, 24, 90, 0.08);
    border-radius: 99px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.showcase-card__price .woocommerce-Price-amount,
.showcase-card__price bdi {
    color: inherit;
}

.showcase-card__price del {
    color: #999;
    font-weight: 500;
    margin-right: 0;
}

.showcase-card__price ins {
    text-decoration: none;
    background: transparent;
    color: inherit;
}

/* Stacked price ↔ "Bekijk product" swap on hover (standard cards only).
   Price fades + slides up out, CTA fades + slides up into its place. */
.showcase-card__price-area {
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}

.showcase-card__price-area > .showcase-card__price,
.showcase-card__price-area > .showcase-card__hover-cta {
    grid-column: 1;
    grid-row: 1;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.showcase-card__price-area > .showcase-card__price {
    margin-bottom: 0;
}

.showcase-card__hover-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c0185a;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.showcase-card:hover .showcase-card__price-area .showcase-card__price,
.showcase-card:focus-visible .showcase-card__price-area .showcase-card__price {
    opacity: 0;
    transform: translateY(-10px);
}

.showcase-card:hover .showcase-card__hover-cta,
.showcase-card:focus-visible .showcase-card__hover-cta {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Featured (wide) card ----- */
.showcase-card--featured {
    grid-column: span 2;
    flex-direction: row;
    align-items: stretch;
    padding: 16px;
    gap: 16px;
    // background: linear-gradient(135deg, #ffffff 0%, #f3fafb 100%);
    border: 0;
}

.showcase-card--featured .showcase-card__image {
    flex: 0 0 45%;
    min-height: 0;
    margin-bottom: 0;
    background: transparent;
}

.showcase-card--featured .showcase-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 6px 4px;
    gap: 16px;
}

.showcase-card--featured .showcase-card__title {
    font-size: 20px;
    -webkit-line-clamp: 3;
    margin: 0 0 12px;
    padding-top: 18px; /* clears ribbon */
}

.showcase-card--featured .showcase-card__price {
    align-self: flex-start;
    font-size: 16px;
    padding: 6px 16px;
}

.showcase-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    align-self: flex-start;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: gap 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.showcase-card--featured:hover .showcase-card__cta {
    gap: 12px;
    color: #c0185a;
    transform: translateX(6px);
}

.showcase-card--missing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-md, 16px);
    background: #fff5f5;
    color: #a02929;
    border: 1px dashed #d97777;
    border-radius: var(--radius-md, 12px);
    font-size: var(--font-size-sm, 14px);
}

/* ==========================================================================
   PRODUCT SLIDER (between Dosage and Safety sections)
   ========================================================================== */

.section-product-slider {
    padding: calc(var(--spacing-2xl, 48px) * 2) 0 0;
    background-color: var(--color-white);
    /* Contain the slider's asymmetric leftward bleed so it can't cause a
       horizontal page scroll on viewports narrower than (container + bleed). */
    overflow-x: clip;
}

/* Header row: heading on the left, [nav group] + [CTA] on the right. */
.section-product-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl, 32px);
}

.section-product-slider .section-heading {
    text-align: left;
    margin: 0;
    position: relative;
    padding-bottom: 24px;
}

/* "Pin + tapered tail" divider — same as FAQ + reviews subheading. */
.section-product-slider .section-heading::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 6px;
    width: 130px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-primary) 0%, rgba(0, 115, 133, 0.15) 100%);
}

.section-product-slider .section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 115, 133, 0.12);
}

.section-product-slider__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.product-slider-nav-group {
    display: flex;
    gap: 10px;
}

.section-product-slider__cta {
    padding: 12px 24px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.product-slider-wrap {
    position: relative;
}

.product-slider {
    display: flex;
    gap: 72px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Extra top/bottom padding so the product card's box-shadow has room to
       render inside the scrolling box. `overflow-x: auto` implicitly clips
       the other axis too (per CSS spec), so without this the card's drop
       shadow gets cut. Sized to fit BOTH the resting and the hover shadow
       (hover is the larger one: 0 28px 64px, so it reaches ~36px above /
       92px below the card). */
    padding: 40px 0 96px;
    /* Asymmetric horizontal bleed — LEFT ONLY. The scroll box extends 64px
       past the container's inner edge on the left (negative margin) and the
       cards are pushed back inward by 64px of padding-left, so the first
       card's visual position is unchanged but the hover shadow (blur 64px)
       has full room to render before the scroll-container's clip.
       The RIGHT side is intentionally NOT bled outward — keeping it flush
       with the container's inner edge means the slider's own overflow-x: auto
       continues to clip off-screen cards (4th onward) at the visual edge.
       scroll-padding-left aligns scroll-snap so swipe/scrollBy lands cards
       at their visible position rather than at the underlying scroll-box
       edge. .section-product-slider has overflow-x: clip to contain this
       leftward bleed on narrow viewports. */
    margin-left: -64px;
    padding-left: 64px;
    scroll-padding-left: 64px;
}

.product-slider::-webkit-scrollbar {
    display: none;
}

/* Slider card width matches the shop grid: 3 visible cards on desktop. */
.product-slider__card {
    flex: 0 0 calc((100% - 2 * 72px) / 3);
    scroll-snap-align: start;
    min-width: 0;
}

.product-slider__nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid #eef2f3;
    box-shadow: 0 4px 12px rgba(0, 115, 133, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--color-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.product-slider__nav:hover,
.product-slider__nav:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.product-slider__nav-icon {
    pointer-events: none;
    display: block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   RESPONSIVE — consolidated media queries
   All @media rules merged from throughout the file. Order matters: smaller
   max-width queries come LATER so they override the larger ones at the
   intersecting viewport widths.
   ========================================================================== */

/* --- TABLET+DESKTOP UP (≥768px) --- */
@media (min-width: 768px) {
    /* === originally at L2565 === */
    /* Desktop preservation: the featured card now uses the same .showcase-card__price-area
       markup as the standard cards (so mobile can do the hover/tap "Bekijk product" swap),
       but on desktop we don't want that swap or center alignment — the desktop layout
       keeps its left-aligned price + standalone CTA arrow. */
    .showcase-card--featured .showcase-card__price-area {
        display: block;
        place-items: start;
        align-self: flex-start;
        margin-bottom: 0;
    }
    .showcase-card--featured .showcase-card__hover-cta {
        display: none;
    }
    .showcase-card--featured:hover .showcase-card__price-area .showcase-card__price,
    .showcase-card--featured:focus-visible .showcase-card__price-area .showcase-card__price {
        opacity: 1;
        transform: none;
    }

    /* === originally at L3028 === */
    /* Drop the gap between the product image and the title on desktop/tablet.
       The shared .result-card__content has padding: var(--spacing-xl) (32px),
       which creates a visible gap between the image bottom and the title. We
       zero out only the top padding here — left/right/bottom padding remain
       intact so the title's side gutters and the content's bottom spacing are
       unchanged. Scoped to .product-slider so the shop archive's same card
       markup is unaffected. */
    .product-slider .result-card--product .result-card__content {
        padding-top: 0;
    }

    /* Scale the whole card down to 85% of its slot on desktop/tablet.
       transform-origin: center keeps the scaled card centered within its
       flex slot. The card's hover transform is overridden below so the
       lift animation continues to work alongside the scale. */
    .product-slider .result-card--product {
        transform: scale(0.85);
        transform-origin: center;
    }
    .product-slider .result-card--product:hover {
        transform: scale(0.85) translateY(-6px);
    }

    /* Standard (non-featured) showcase cards: nudge the image 20px down on
       desktop/tablet to balance the visual mass with the ribbon up top. */
    .showcase-card:not(.showcase-card--featured) .showcase-card__image {
        transform: translateY(20px);
    }
}

/* --- TABLET + MOBILE (≤991px) --- */
@media (max-width: 991px) {
    /* === originally at L254 === */
    .hero-title { font-size: 2.25rem; }
    .section-hero { padding: var(--spacing-2xl) 0; }

    /* === originally at L541 === */
    .section-info-split { padding: var(--spacing-2xl) 0; }
    .info-split-grid { gap: var(--spacing-2xl); }
    .info-split-content .section-heading { font-size: var(--font-size-2xl); }

    /* === originally at L805 === */
    .compare-reviews-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    /* Restore centered headings + intro when the layout stacks */
    .compare-reviews-grid__main .section-heading {
        text-align: center;
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-lg);
    }

    .compare-reviews-grid__main .section-intro {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 720px;
    }

    .compare-reviews-grid__side .trust-reviews-heading {
        text-align: center;
        font-size: var(--font-size-2xl);
    }

    .testimonials-stack {
        max-width: 540px;
        margin: 0 auto;
    }

    /* === originally at L922 === */
    /* Re-impose a minimum width below the desktop breakpoint so cells stay readable
       when the wrap activates horizontal scroll on tablet/mobile. */
    .compare-table {
        min-width: 720px;
    }

    /* === originally at L1002 === */
    .section-compare { padding: var(--spacing-2xl) 0; }

    /* Swap desktop comparison table for the mobile/tablet card stack */
    .compare-table-wrap { display: none; }
    .compare-table-mobile {
        display: block;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .compare-seo-note {
        margin-left: var(--spacing-md);
        margin-right: var(--spacing-md);
    }

    .compare-table-mobile__card {
        width: 100%;
        margin: 0 0 var(--spacing-md);
        border-collapse: separate;
        border-spacing: 0;
        background: var(--color-white);
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 115, 133, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .compare-table-mobile__card:last-child { margin-bottom: 0; }

    .compare-table-mobile__title {
        caption-side: top;
        background: var(--color-primary, #007385);
        color: #fff;
        padding: 12px 16px;
        font-weight: 600;
        font-size: 15px;
        text-align: left;
        letter-spacing: 0.01em;
    }

    .compare-table-mobile__card th,
    .compare-table-mobile__card td {
        padding: 10px 14px;
        font-size: 13px;
        line-height: 1.45;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid #f1f5f9;
    }
    .compare-table-mobile__card th {
        background: #f8fafc;
        font-weight: 600;
        color: var(--color-text, #1f2937);
        width: 40%;
        white-space: normal;
    }
    .compare-table-mobile__card td {
        color: #475569;
    }
    .compare-table-mobile__card tr:last-child th,
    .compare-table-mobile__card tr:last-child td {
        border-bottom: 0;
    }

    /* === originally at L1231 === */
    .dosage-grid { grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 540px; margin-left: auto; margin-right: auto; }
    .section-dosage { padding: var(--spacing-2xl) 0; }

    /* === originally at L1381 === */
    .section-safety { padding: var(--spacing-2xl) 0; }
    .safety-features { grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 540px; margin: 0 auto; }

    /* === originally at L1623 === */
    .section-faq { padding: var(--spacing-2xl) 0; }

    /* === originally at L1712 === */
    /* Tablet */
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .section-info {
        padding: var(--spacing-2xl) 0;
    }

    /* === originally at L1780 === */
    /* Tablet */
    .featured-grid {
        --featured-cols: 2;
        gap: var(--spacing-lg);
    }

    .section-featured {
        padding: var(--spacing-2xl) 0;
    }

    /* === originally at L2049 === */
    .trust-cards { grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 540px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-2xl); }
    .testimonials-grid { grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 540px; margin-left: auto; margin-right: auto; }
    .section-trust { padding: var(--spacing-2xl) 0; }

    /* === originally at L2156 === */
    /* Tablet */
    .section-blog {
        padding: var(--spacing-2xl) 0;
    }

    /* === originally at L2286 === */
    /* Tablet */
    .section-newsletter {
        padding: var(--spacing-2xl) 0;
    }

    /* === originally at L2661 === */
    /* Tablet — 2 columns; featured card spans both columns */
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .showcase-card--featured {
        grid-column: 1 / -1;
    }

    /* === originally at L3086 === */
    .product-slider { gap: 16px; }
    .product-slider__card { flex: 0 0 calc((100% - 16px) / 2); } /* 2 visible — matches shop tablet */
}

/* --- MOBILE ONLY (≤767px) --- */
@media (max-width: 767px) {
    /* === originally at L51 === */
    .container {
        padding: 10px;
    }

    /* === originally at L259 === */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: left;
    }
    .hero-image { order: 1; }
    .hero-content {
        order: 2;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .hero-title { font-size: 1.85rem; padding-right: 10%; }
    .hero-subtitle { margin-left: 0; margin-right: 0; }
    .hero-badges { justify-content: flex-start; }
    .hero-cta {
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-md);
    }
    .hero-cta .hero-link { order: 1; }
    .hero-cta .btn { order: 2; }
    .hero-cta .btn-lg {
        padding: 12px 20px;
        font-size: var(--font-size-base);
    }
    .section-hero { padding: var(--spacing-xl) 0; }

    /* === originally at L547 === */
    .info-split-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    .info-split-content {
        max-width: none;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .section-info-split--reversed .info-split-grid > .info-split-image,
    .section-info-split--reversed .info-split-grid > .info-split-content {
        order: initial;
        margin-left: 0;
    }
    .section-info-split:not(.section-info-split--reversed) .info-split-image { order: 1; }
    .section-info-split:not(.section-info-split--reversed) .info-split-content {
        order: 2;
    }
    .section-info-split { padding: var(--spacing-xl) 0; }

    /* === originally at L836 === */
    /* Klantenbeoordelingen: heading + dot divider switch from centered to
       left-aligned, with the same inner padding the rest of the mobile
       sections use, and the testimonial cards fill the column width. */
    .compare-reviews-grid__side .trust-reviews-heading {
        text-align: left;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .compare-reviews-grid__side .trust-reviews-heading__divider::before {
        right: auto;
        left: 0;
        box-shadow:
            14px 0 0 var(--color-primary),
            28px 0 0 var(--color-primary);
    }
    .testimonials-stack {
        max-width: none;
        margin: 0;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* === originally at L1066 === */
    .section-compare { padding: var(--spacing-xl) 0; }

    /* Heading + intro left-aligned with container padding (mobile table is full-width) */
    .compare-reviews-grid__main .section-heading {
        text-align: left;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .section-compare .section-heading::after,
    .section-compare .section-heading::before {
        left: var(--spacing-md);
    }
    .compare-reviews-grid__main .section-intro {
        margin-left: 0;
        margin-right: 0;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* === originally at L1236 === */
    .section-dosage { padding: var(--spacing-xl) 0; }
    .dosage-card { padding: var(--spacing-lg); }
    .dosage-card__icon { width: 60px; height: 60px; font-size: 1.4rem; }

    /* Heading + subtitle inner padding — matches the rest of the mobile
       homepage rhythm */
    .section-dosage .section-heading,
    .section-dosage .section-intro {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    /* Shift the dual-bar dividers in by the same amount so they align with the
       padded heading text rather than the section's outer edge */
    .section-dosage .section-heading::after,
    .section-dosage .section-heading::before {
        left: var(--spacing-md);
    }

    /* Card column aligned to the same inner edge as the heading text */
    .dosage-grid {
        max-width: none;
        margin: var(--spacing-xl) 0 0;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* === originally at L1386 === */
    .section-safety { padding: var(--spacing-xl) 0; }
    .safety-feature { padding: var(--spacing-md); }
    .safety-feature__icon { width: 64px; height: 64px; font-size: 1.5rem; }

    /* Echt of nep? heading + subtitle inner padding */
    .section-safety .section-heading,
    .section-safety .section-intro {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .section-safety .section-heading::after,
    .section-safety .section-heading::before {
        left: var(--spacing-md);
    }

    /* Card column aligned to the same inner edge as the heading text */
    .safety-features {
        max-width: none;
        margin: 0;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* === originally at L1627 === */
    .section-faq { padding: var(--spacing-xl) 0; }
    .faq-question { font-size: 15px; padding: var(--spacing-md); }
    .faq-answer__inner { padding: 0 var(--spacing-md) var(--spacing-md); }

    /* Korte antwoorden heading + accordion list inner padding */
    .section-faq .section-heading {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .section-faq .section-heading::before {
        left: var(--spacing-md);
    }
    .section-faq .section-heading::after {
        left: calc(14px + var(--spacing-md));
    }
    .faq-list {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* Collapse to a single column on mobile — both column wrappers stack. */
    .faq-list {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-sm);
    }

    /* === originally at L1723 === */
    /* Mobile */
    .info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .section-info {
        padding: var(--spacing-xl) 0;
    }

    .info-title {
        font-size: var(--font-size-xl);
    }

    /* === originally at L1757 === */
    .section-heading {
        font-size: var(--font-size-2xl);
    }

    /* === originally at L1792 === */
    /* Mobile */
    .featured-grid {
        --featured-cols: 1;
        gap: var(--spacing-md);
        max-width: 420px;
    }

    .section-featured {
        padding: var(--spacing-xl) 0;
    }

    .section-heading {
        font-size: var(--font-size-xl);
    }

    /* === originally at L2055 === */
    .section-trust { padding: var(--spacing-xl) 0 calc(var(--spacing-xl) * 0.05); }
    .trust-card { padding: var(--spacing-lg); }
    .trust-card__icon { width: 60px; height: 60px; font-size: 1.4rem; }
    .testimonial-card { padding: var(--spacing-lg); }
    .trust-footer { flex-direction: column; gap: var(--spacing-lg); }

    /* Waarom klanten voor ons kiezen heading inner padding */
    .section-trust .section-heading {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .section-trust .section-heading::after,
    .section-trust .section-heading::before {
        left: var(--spacing-md);
    }

    /* Trust cards + (legacy) testimonials grid aligned to the same inner edge */
    .trust-cards,
    .testimonials-grid {
        max-width: none;
        margin: 0 0 var(--spacing-2xl);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* === originally at L2163 === */
    /* Mobile */
    .section-blog {
        padding: var(--spacing-xl) 0;
    }

    /* Reorder on mobile: heading (title + divider) sits on top, then the
       blog grid, then the intro/CTA row at the bottom. Flipping the
       container to flex-column lets us use `order` for the swap while the
       desktop block-flow order stays untouched. */
    .section-blog .container {
        display: flex;
        flex-direction: column;
    }
    .section-blog .section-heading {
        order: 1;
    }
    .blog-grid {
        order: 2;
    }
    .section-blog__intro-row {
        order: 3;
        /* No more dividing border / spacer beneath — intro-row is now the
           last element in the section. */
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Title, subtitle row (subtitle + CTA), and pin+tail divider all shifted
       in by var(--spacing-md) to match the rest of the mobile rhythm */
    .section-blog .section-heading {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .section-blog .section-heading::before {
        left: var(--spacing-md);
    }
    .section-blog .section-heading::after {
        left: calc(14px + var(--spacing-md));
    }
    .section-blog__intro-row {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* === originally at L2293 === */
    /* Mobile */
    .newsletter-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .section-newsletter {
        padding: var(--spacing-xl) 0;
    }

    .newsletter-title {
        font-size: var(--font-size-xl);
    }

    /* === originally at L2783 === */
    /* Mobile (≤767px) — collapse the bento to a single-column stack. Each card
       (including the featured one) becomes its own vertical card: image on top,
       then title, then price line, all centered. Overrides the row-style 600px
       block above (which sat image/body side-by-side). */
    /* Match the hero's gutter: keep the default .container padding (20px) and
       add another var(--spacing-md) (16px) on the inner header + grid so the
       visible indent matches .hero-content. */
    .showcase-header,
    .showcase-grid {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .showcase-header {
        text-align: right;
        margin-bottom: 16px;
    }

    .showcase-grid {
        gap: 18px;
        max-width: 100%;
        margin-inline: 0;
    }

    .showcase-card,
    .showcase-card--featured {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 14px 14px 28px;
        gap: 16px;
    }

    .showcase-card--featured {
        order: 0;
        flex-wrap: nowrap;
    }

    /* Image panel — full-width but ~30% shorter than a square. The image
       inside is bumped to scale(1.2) so it still reads clearly without
       fully making up the lost height. */
    .showcase-card .showcase-card__image,
    .showcase-card--featured .showcase-card__image,
    .showcase-card:not(.showcase-card--featured) .showcase-card__image {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        margin-bottom: 0;
        border-radius: 16px;
    }

    .showcase-card .showcase-card__img,
    .showcase-card .showcase-card__image img,
    .showcase-card--featured .showcase-card__img,
    .showcase-card--featured .showcase-card__image img,
    .showcase-card:not(.showcase-card--featured) .showcase-card__img {
        transform: scale(1.2);
    }

    /* Featured ribbon stays as a corner badge on the image */
    .showcase-card__ribbon,
    .showcase-card--featured .showcase-card__ribbon {
        position: absolute;
        top: 22px;
        left: 22px;
        margin-bottom: 0;
        font-size: 10px;
        padding: 5px 11px;
    }

    /* Body — vertical stack, centered (title + price line) */
    .showcase-card__body,
    .showcase-card--featured .showcase-card__body,
    .showcase-card:not(.showcase-card--featured) .showcase-card__body {
        text-align: center;
        flex: 0 0 auto;
        padding: 0 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .showcase-card__title,
    .showcase-card--featured .showcase-card__title {
        font-size: 17px;
        margin: 0;
        padding-top: 0;
        -webkit-line-clamp: 2;
    }

    /* Price pill — sized to content, centered on its own line */
    .showcase-card:not(.showcase-card--featured) .showcase-card__price-area {
        width: 100%;
        place-items: center;
        margin-bottom: 0;
    }

    .showcase-card__price,
    .showcase-card:not(.showcase-card--featured) .showcase-card__price,
    .showcase-card--featured .showcase-card__price {
        align-self: center;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        padding: 10px;
        margin-bottom: 0;
    }


    .showcase-card__cta {
        font-size: 13px;
        margin-top: 0;
        align-self: center;
    }

    /* Featured card (Cenforce 200mg Combi) — drop the "Bekijk product" CTA
       on mobile; the whole card is already clickable. */
    .showcase-card--featured .showcase-card__cta {
        display: none;
    }

    /* === originally at L3091 === */
    .product-slider__card { flex: 0 0 100%; } /* 1 visible — matches shop mobile */

    /* Slider products aligned to the same inner edge as the heading text.
       Negative margin extends the scroll box past the container's inner edge
       on each side, and 2× padding pushes the cards back inward — so the
       first card still sits at the heading's alignment, but each card now
       has ≈16px of padded room inside the scroll box for its left/right
       box-shadow to render before the overflow clip kicks in.
       scroll-padding aligns scroll-snap so swipe/scrollBy lands the card at
       its visible position rather than at the underlying scroll-box edge. */
    .product-slider {
        gap: 48px;
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        padding-left: calc(var(--spacing-md) * 2);
        padding-right: calc(var(--spacing-md) * 2);
        scroll-padding-left: calc(var(--spacing-md) * 2);
        scroll-padding-right: calc(var(--spacing-md) * 2);
    }

    /* Header collapses to two rows on mobile:
       row 1 = heading, row 2 = [nav buttons] | [Bekijk alle producten CTA] */
    .section-product-slider__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    .section-product-slider .section-heading {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    /* Shift the pin+tail divider in by the same amount so it tracks with the
       padded heading text */
    .section-product-slider .section-heading::before {
        left: var(--spacing-md);
    }
    .section-product-slider .section-heading::after {
        left: calc(14px + var(--spacing-md));
    }

    .section-product-slider__controls {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-sm);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    /* DOM order is CTA then nav-group; visually swap so the nav buttons sit
       on the left and the CTA sits on the right */
    .product-slider-nav-group { order: 1; }
    .section-product-slider__cta { order: 2; }

    /* Resize so both fit comfortably on one row at narrow widths.
       Also harden the tap target: ≥44px is Apple/Google's recommended
       minimum, touch-action: manipulation removes the 300ms double-tap
       zoom delay that can swallow taps, and z-index keeps the buttons
       above any neighbouring stacking-context. */
    .product-slider__nav {
        width: 44px;
        height: 44px;
        position: relative;
        z-index: 2;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 115, 133, 0.18);
    }
    .product-slider__nav-icon { font-size: 16px; }

    .product-slider-nav-group { gap: 8px; }

    .section-product-slider__cta {
        padding: 9px 14px;
        font-size: var(--font-size-sm);
    }

    /* Slimmer image panel — shrink the square (1/1) to 10/6 so the card
       loses ~40% of its image-area height. The product image inside is
       scaled to 1.3× so it doesn't read as 40% smaller; net visual size
       lands ~10% under the original. Scoped to the slider only so shop
       pages keep their full square thumbnails. */
    .product-slider .result-card--product .result-card__image {
        aspect-ratio: 10 / 6;
    }

    .product-slider .result-card--product .result-card__image img {
        transform: scale(1.3);
        transform-origin: center;
    }
}

/* --- SMALL MOBILE (≤600px) --- */
@media (max-width: 600px) {
    /* === originally at L2673 === */
    /* Mobile — single column stack */
    .showcase-header { margin-bottom: 8px; text-align: left; }
    .showcase-eyebrow { margin-bottom: 16px; }

    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .showcase-card,
    .showcase-card--featured {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 12px 20px 12px 12px;
        gap: 14px;
    }

    .showcase-card--featured { order: -1; }

    .showcase-card--featured .showcase-card__ribbon {
        position: absolute;
        top: 16px;
        left: 16px;
        margin-bottom: 0;
    }

    .showcase-card__body,
    .showcase-card--featured .showcase-card__body {
        text-align: left;
        flex: 1;
        padding: 0;
    }

    .showcase-card__title,
    .showcase-card--featured .showcase-card__title {
        font-size: 15px;
        margin: 0 0 6px;
        padding-top: 0;
        -webkit-line-clamp: 2;
    }

    .showcase-card__ribbon {
        position: static;
        margin-bottom: 4px;
        font-size: 9px;
        padding: 3px 8px;
    }

    .showcase-card--featured {
        flex-wrap: wrap;
    }

    .showcase-card--featured .showcase-card__price {
        width: -moz-fit-content;
        width: fit-content;
        max-width: max-content;
    }

    .showcase-card:not(.showcase-card--featured) .showcase-card__body {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .showcase-card:not(.showcase-card--featured) .showcase-card__price-area {
        place-items: start;
        margin-bottom: 0;
    }

    .showcase-card:not(.showcase-card--featured) .showcase-card__price {
        width: -moz-fit-content;
        width: fit-content;
        max-width: max-content;
    }

    .showcase-card__cta {
        font-size: 12px;
    }
}

/* --- SMALL MOBILE (≤480px) --- */
@media (max-width: 480px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }

    /* Stack the card vertically (image on top, content below) — same
       behaviour as ≤320, applied earlier at the small-mobile breakpoint. */
    .showcase-card,
    .showcase-card--featured {
        flex-direction: column;
    }

    /* Image full-width for both featured and non-featured cards. */
    .showcase-card .showcase-card__image,
    .showcase-card--featured .showcase-card__image {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Pull the title out of the flex children's intrinsic-sizing dance
       (display: block) and hard-cap its width so long product names wrap
       cleanly within the content column. */
    .showcase-card__title,
    .showcase-card--featured .showcase-card__title {
        display: block;
        overflow-wrap: anywhere;
        max-width: 200px;
        text-align: left;
    }
}

/* --- ULTRA-SMALL MOBILE (≤320px) --- */
@media (max-width: 320px) {
    .section-showcase {
        padding: 0;
    }
    .showcase-card,
    .showcase-card--featured {
        flex-direction: column;
    }
    .showcase-card:not(.showcase-card--featured) .showcase-card__image {
        flex: 0 0 auto;
        width: 100%;
    }
}