/* ============================================================
   Imagereview Affiliate Engine
   Consumer-facing brand page styling v0.6
   ============================================================
   Editorial review magazine in Image Review huisstijl:
   donker forest green met vibrant oranje accent.
   ============================================================ */

:root {
    /* Huisstijl */
    --irae-dark:         #0E3D38;
    --irae-dark-deep:    #0A2E2A;
    --irae-dark-deeper:  #061F1C;

    --irae-bg:           #FFFFFF;
    --irae-bg-soft:      #F7F5F0;
    --irae-bg-warm:      #EFEAE0;

    --irae-ink:          #0A2E2A;
    --irae-ink-soft:     #3A5550;
    --irae-ink-muted:    #6B7F7C;
    --irae-ink-light:    #B8C5C3;

    --irae-on-dark:      #FFFFFF;
    --irae-on-dark-soft: #C8D4D2;
    --irae-on-dark-muted:#8FA3A0;

    --irae-accent:       #F26522;
    --irae-accent-hover: #E55815;
    --irae-accent-soft:  #FF8A52;
    --irae-accent-bg:    #FFF1E8;

    --irae-border:       #E5E0D5;
    --irae-border-dark:  rgba(255, 255, 255, 0.12);
    --irae-border-soft:  #EFE9DC;

    --irae-score-strong: #4CAF50;

    /* Spacing - compacter op alle niveaus, padding halveerd */
    --irae-s-1: 0.25rem;
    --irae-s-2: 0.5rem;
    --irae-s-3: 0.75rem;
    --irae-s-4: 1rem;
    --irae-s-5: 1.5rem;
    --irae-s-6: 2rem;
    --irae-s-7: 3rem;
    --irae-s-8: 4rem;

    /* Section spacing: gehalveerd van 6rem naar 3rem desktop */
    --irae-sec-y: 3rem;
    --irae-sec-y-sm: 1.75rem;

    /* Fonts */
    --irae-font-display: 'Fraunces', Georgia, serif;
    --irae-font-body:    'Manrope', system-ui, sans-serif;
}

/* Reset op het echte body element, niet alleen .irae-body, zodat
   thema-margins die een witte strook tussen header en hero veroorzaken
   worden weggehaald. We laten html met rust zodat de WordPress admin-bar
   offset (html margin-top) voor ingelogde gebruikers blijft werken. */
body.irae-body {
    margin: 0 !important;
}

/* Smooth scrolling for in-page anchors like the #review-form CTA. */
html {
    scroll-behavior: smooth;
}

.irae-body {
    margin: 0;
    padding: 0;
    background: var(--irae-bg);
    color: var(--irae-ink);
    font-family: var(--irae-font-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* The header is position: fixed (see below), so it is out of normal flow.
       That means we can safely use a flexbox sticky footer on the body without
       affecting the header: the footer sits at the bottom on short pages and
       directly after the content otherwise, with no forced 100vh gap. The
       padding-top clears the fixed header. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--irae-header-h, 64px);
}

/* Main grows to fill the remaining space so the footer reaches the bottom on
   short pages, but only the remaining space, so there is no excessive gap. */
.irae-main {
    min-width: 0;
    flex: 1 0 auto;
}

.irae-footer {
    flex-shrink: 0;
}

/* Header en main sluiten naadloos aan, geen marges ertussen */
.irae-header { margin: 0; }
.irae-main { margin-top: 0; }
.irae-main > .irae-hero-cold:first-child { margin-top: 0; }

.irae-body * { box-sizing: border-box; }

.irae-body a {
    color: var(--irae-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.irae-body a:hover { color: var(--irae-accent); }

.irae-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--irae-s-5);
}

/* ============================================================
   HEADER
   ============================================================ */
.irae-header {
    background: var(--irae-dark);
    color: var(--irae-on-dark);
    /* Fixed, not sticky: independent of ancestor contexts so it always stays
       pinned to the top on scroll. The body padding-top compensates. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(14, 61, 56, 0.18);
}

/* When the WordPress admin bar is present, push the fixed header below it. */
body.admin-bar .irae-header {
    top: 32px;
}
/* On mobile (<=782px) the WP admin bar is position: absolute and scrolls away
   with the page, so a fixed header offset by 46px would float below the top
   once scrolled. Pin it to the very top instead. Consumers have no admin bar,
   so this is the correct position for them in all cases. */
@media screen and (max-width: 782px) {
    body.admin-bar .irae-header {
        top: 0;
    }
}

.irae-header a {
    color: var(--irae-on-dark);
}

.irae-header a:hover { color: var(--irae-accent-soft); }

.irae-header-inner {
    display: flex;
    align-items: center;
    gap: var(--irae-s-4);
    padding: var(--irae-s-3) var(--irae-s-5);
}

.irae-logo-wrap {
    display: flex;
    align-items: center;
    gap: var(--irae-s-3);
    flex-shrink: 0;
}

.irae-logo {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
}

.irae-logo-spark {
    width: 30px;
    height: 30px;
    fill: var(--irae-accent);
}

.irae-logo-text {
    font-family: var(--irae-font-body);
    font-weight: 400;
    font-size: 1.2rem;
    color: #FFFFFF;
}

.irae-logo-text strong { font-weight: 700; }

.irae-logo-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
}

.irae-header-tagline {
    font-size: 0.82rem;
    color: var(--irae-on-dark-soft);
    font-weight: 500;
    line-height: 1.3;
    max-width: 120px;
}

.irae-nav {
    display: flex;
    gap: var(--irae-s-5);
    margin: 0 auto;
}

.irae-nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: #FFFFFF;
    padding: var(--irae-s-2) 0;
    position: relative;
}

.irae-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--irae-accent);
}

.irae-header-actions {
    display: flex;
    gap: var(--irae-s-2);
    align-items: center;
    flex-shrink: 0;
}

.irae-header-cta {
    background: var(--irae-accent);
    color: #FFFFFF !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.irae-header-cta:hover {
    background: var(--irae-accent-hover);
    color: #FFFFFF !important;
}

/* ============================================================
   BUTTONS: alle CTAs expliciet, geen variabele lookups
   ============================================================ */
.irae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--irae-s-2);
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    font-family: inherit;
    white-space: nowrap;
}

.irae-btn:hover { transform: translateY(-1px); }

/* Primary: oranje */
.irae-btn-primary,
.irae-btn-primary:link,
.irae-btn-primary:visited {
    background: var(--irae-accent);
    color: #FFFFFF;
    border-color: var(--irae-accent);
}

.irae-btn-primary:hover,
.irae-btn-primary:focus {
    background: var(--irae-accent-hover);
    border-color: var(--irae-accent-hover);
    color: #FFFFFF;
}

/* Outline op donker: forced white tekst */
.irae-btn-outline-light,
.irae-btn-outline-light:link,
.irae-btn-outline-light:visited {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.45);
}

.irae-btn-outline-light:hover,
.irae-btn-outline-light:focus {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

/* Outline op licht */
.irae-btn-outline,
.irae-btn-outline:link,
.irae-btn-outline:visited {
    background: transparent;
    color: var(--irae-ink);
    border-color: var(--irae-border);
}

.irae-btn-outline:hover { border-color: var(--irae-ink); color: var(--irae-ink); }

.irae-btn-dark,
.irae-btn-dark:link,
.irae-btn-dark:visited {
    background: var(--irae-dark);
    color: #FFFFFF;
    border-color: var(--irae-dark);
}

.irae-btn-dark:hover { background: var(--irae-dark-deep); color: #FFFFFF; }

/* ============================================================
   HERO COLD-START
   ============================================================ */
.irae-hero-cold {
    background: var(--irae-dark);
    color: var(--irae-on-dark);
    padding: var(--irae-s-6) 0 var(--irae-s-7);
    position: relative;
    overflow: hidden;
}

.irae-hero-cold::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(242, 101, 34, 0.08) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(242, 101, 34, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.irae-hero-cold > .irae-container { position: relative; z-index: 1; }

.irae-breadcrumbs-inline {
    font-size: 0.82rem;
    color: var(--irae-on-dark-muted);
    margin-bottom: var(--irae-s-5);
}

.irae-breadcrumbs-inline a {
    color: var(--irae-on-dark-muted);
}

.irae-breadcrumbs-inline a:hover { color: var(--irae-accent-soft); }

.irae-breadcrumbs-inline span {
    margin: 0 var(--irae-s-2);
    color: rgba(255, 255, 255, 0.25);
}

.irae-breadcrumbs-inline .irae-breadcrumb-current {
    color: var(--irae-on-dark-soft);
    margin-left: 0;
}

/* Breadcrumbs op archief en categorieen pagina's */
.irae-breadcrumbs {
    font-size: 0.82rem;
    color: var(--irae-on-dark-muted);
    margin-bottom: var(--irae-s-4);
}
.irae-breadcrumbs a { color: var(--irae-on-dark-muted); }
.irae-breadcrumbs a:hover { color: var(--irae-accent-soft); }
.irae-breadcrumbs span {
    margin: 0 var(--irae-s-2);
    color: rgba(255, 255, 255, 0.25);
}
.irae-breadcrumbs .irae-breadcrumbs-current {
    color: var(--irae-on-dark-soft);
    margin-left: 0;
}

.irae-hero-cold-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--irae-s-7);
    align-items: start;
}

.irae-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
    margin-bottom: var(--irae-s-4);
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    /* On mobile the three pills wrap; give them more row spacing and a small
       top margin so the claim button's corner info badge is never clipped and
       the rows do not look cramped. */
    .irae-hero-meta {
        gap: 8px 8px;
        row-gap: 12px;
        margin-top: 6px;
    }
    .irae-pill {
        font-size: 0.7rem;
        padding: 5px 11px;
    }
    .irae-claim-btn {
        font-size: 0.78rem;
        padding: 7px 24px 7px 12px;
    }
}

.irae-pill {
    display: inline-block;
    padding: 4px 12px;
    background: #f2b922;
    color: #1a2e2b;
    border: 1px solid #f2b922;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.irae-pill-muted {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.irae-hero-title {
    font-family: var(--irae-font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--irae-s-3);
    color: #FFFFFF;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}

.irae-hero-tagline {
    font-size: 1.05rem;
    color: var(--irae-on-dark-soft);
    margin: 0 0 var(--irae-s-5);
    max-width: 520px;
    line-height: 1.55;
}

.irae-hero-ctas {
    display: flex;
    gap: var(--irae-s-3);
    flex-wrap: wrap;
}

/* Empty scores card rechts in de hero */
.irae-hero-scores {
    background: #FFFFFF;
    color: var(--irae-ink);
    border-radius: 16px;
    padding: var(--irae-s-5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.irae-hero-scores-heading {
    font-family: var(--irae-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 var(--irae-s-4);
    color: var(--irae-ink);
    line-height: 1.3;
}

.irae-hero-scores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--irae-s-2);
    margin-bottom: var(--irae-s-4);
}

.irae-score-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.irae-score-circle {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: var(--irae-s-2);
}

.irae-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.irae-score-circle-bg {
    fill: none;
    stroke: var(--irae-bg-warm);
    stroke-width: 7;
}

.irae-score-circle-fill {
    fill: none;
    stroke: var(--irae-accent);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 25 240;
    opacity: 0.4;
}

.irae-score-circle-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--irae-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--irae-ink-light);
}

.irae-score-gauge-label {
    font-size: 0.72rem;
    color: var(--irae-ink-soft);
    font-weight: 500;
}

.irae-hero-total {
    background: var(--irae-bg-soft);
    border-radius: 10px;
    padding: var(--irae-s-3) var(--irae-s-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--irae-s-3);
}

.irae-hero-total-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--irae-ink-soft);
}

.irae-hero-total-value {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
}

.irae-hero-total-num {
    font-family: var(--irae-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--irae-ink-light);
}

.irae-hero-total-count {
    font-size: 0.82rem;
    color: var(--irae-ink-muted);
}

.irae-hero-empty-cta {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
    padding: var(--irae-s-3) var(--irae-s-3);
    background: var(--irae-accent-bg);
    color: var(--irae-accent);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.irae-hero-empty-cta a {
    color: var(--irae-accent);
    text-decoration: underline;
    font-weight: 700;
}

/* ============================================================
   SECTION CHROME (compacter)
   ============================================================ */
.irae-section {
    padding: var(--irae-sec-y) 0;
}

.irae-section-soft { background: var(--irae-bg-soft); }
.irae-section-photos { background: var(--irae-bg-soft); }
.irae-news-section { background: var(--irae-bg); }
.irae-faq-section { background: var(--irae-bg-soft); }

.irae-section-header {
    margin-bottom: var(--irae-s-5);
    max-width: 700px;
}

.irae-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--irae-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--irae-s-2);
}

.irae-section-title {
    font-family: var(--irae-font-display);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    font-variation-settings: "opsz" 96;
}

.irae-section-title em {
    color: var(--irae-accent);
    font-style: normal;
}

.irae-section-sub {
    margin: var(--irae-s-3) 0 0;
    color: var(--irae-ink-soft);
    font-size: 1rem;
    line-height: 1.55;
}

/* ============================================================
   FACTS GRID
   ============================================================ */
.irae-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--irae-bg);
    border: 1px solid var(--irae-border-soft);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(10, 46, 42, 0.04);
}

.irae-fact {
    padding: var(--irae-s-4);
    border-right: 1px solid var(--irae-border-soft);
    border-bottom: 1px solid var(--irae-border-soft);
}

.irae-fact:nth-child(4n) { border-right: none; }
.irae-fact:nth-last-child(-n+4) { border-bottom: none; }

.irae-fact-label {
    font-size: 0.72rem;
    color: var(--irae-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--irae-s-2);
    font-weight: 600;
}

.irae-fact-value {
    font-family: var(--irae-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--irae-ink);
    line-height: 1.3;
    font-variation-settings: "opsz" 24;
}

.irae-about {
    margin-top: var(--irae-s-5);
    max-width: 760px;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--irae-ink-soft);
}

/* ============================================================
   NEWS
   ============================================================ */
.irae-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--irae-s-4);
}

.irae-news-card {
    position: relative;
    background: var(--irae-bg-soft);
    border: 1px solid var(--irae-border-soft);
    border-radius: 12px;
    padding: var(--irae-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-3);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.irae-news-card:hover {
    transform: translateY(-3px);
    border-color: var(--irae-accent);
    box-shadow: 0 10px 28px rgba(14, 61, 56, 0.12);
}

/* Full-card click target. Sits above the card body but below the title link
   (when that links to a separate article) so both remain usable. */
.irae-news-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
    text-indent: -9999px;
    overflow: hidden;
}

/* Keep the article-title link clickable on top of the overlay. */
.irae-news-card-title a {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}
.irae-news-card-title a:hover {
    text-decoration: underline;
}

.irae-news-card-meta {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
    font-size: 0.78rem;
    flex-wrap: wrap;
}

.irae-news-card-date {
    color: var(--irae-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.irae-news-card-source {
    padding: 2px 8px;
    background: var(--irae-dark);
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.irae-news-card-title {
    position: relative;
    z-index: 2;
    pointer-events: none;
    font-family: var(--irae-font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--irae-ink);
    line-height: 1.3;
    margin: 0;
}
/* The title text itself shouldn't block the overlay, but its inner link must. */
.irae-news-card-title a {
    pointer-events: auto;
}

.irae-news-card-summary {
    position: relative;
    z-index: 2;
    pointer-events: none;
    color: var(--irae-ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.irae-news-card-link {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: inline-block;
    margin-top: var(--irae-s-3);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--irae-accent);
    text-decoration: none;
    transition: gap 0.2s ease;
}
.irae-news-card:hover .irae-news-card-link {
    text-decoration: underline;
}

.irae-news-disclosure {
    margin-top: var(--irae-s-4);
    font-size: 0.78rem;
    color: var(--irae-ink-muted);
    font-style: italic;
}

/* ============================================================
   FAQ
   ============================================================ */
.irae-faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.irae-faq-item {
    padding: var(--irae-s-5) 0;
    border-bottom: 1px solid var(--irae-border-soft);
}

.irae-faq-item:last-child { border-bottom: none; }

.irae-faq-question {
    font-family: var(--irae-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--irae-ink);
    margin: 0 0 var(--irae-s-3);
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: var(--irae-s-3);
}

.irae-faq-question::before {
    content: '?';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--irae-accent);
    color: #FFFFFF;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--irae-font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1px;
}

.irae-faq-answer {
    color: var(--irae-ink-soft);
    line-height: 1.6;
    font-size: 0.98rem;
    margin: 0 0 0 calc(28px + var(--irae-s-3));
}

/* ============================================================
   PROMOTIONS
   ============================================================ */
.irae-promos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--irae-s-4);
}

.irae-promo {
    display: flex;
    gap: var(--irae-s-4);
    align-items: center;
    padding: var(--irae-s-4);
    background: var(--irae-bg);
    border: 1px solid var(--irae-border-soft);
    border-radius: 12px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.irae-promo:hover {
    border-color: var(--irae-accent);
    transform: translateY(-2px);
}

.irae-promo-discount {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    background: var(--irae-accent);
    color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--irae-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
    padding: var(--irae-s-2);
}

.irae-promo-body { flex: 1; min-width: 0; }

.irae-promo-description {
    font-size: 1rem;
    font-weight: 600;
    color: var(--irae-ink);
    margin-bottom: var(--irae-s-2);
}

.irae-promo-meta {
    display: flex;
    gap: var(--irae-s-3);
    align-items: center;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.irae-promo-code {
    background: var(--irae-dark);
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'SFMono-Regular', 'Menlo', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.irae-promo-valid { color: var(--irae-ink-muted); }

/* ============================================================
   FOTO GALLERY: blurred placeholders
   ============================================================ */
.irae-photo-empty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: var(--irae-s-2);
    position: relative;
}

.irae-photo-empty-tile {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: var(--irae-bg-warm);
}

.irae-photo-empty-tile:nth-child(1) { grid-row: span 2; }
.irae-photo-empty-tile:nth-child(4) { grid-row: span 2; }
.irae-photo-empty-tile:nth-child(7) { grid-column: span 2; }

.irae-photo-empty-bg {
    position: absolute;
    inset: 0;
    filter: blur(18px);
    opacity: 0.6;
}

.irae-photo-empty-tile:nth-child(1) .irae-photo-empty-bg { background: linear-gradient(135deg, #0E3D38, #2A6B5F); }
.irae-photo-empty-tile:nth-child(2) .irae-photo-empty-bg { background: linear-gradient(135deg, #F2B380, #F26522); }
.irae-photo-empty-tile:nth-child(3) .irae-photo-empty-bg { background: linear-gradient(135deg, #C8D4D2, #6B7F7C); }
.irae-photo-empty-tile:nth-child(4) .irae-photo-empty-bg { background: linear-gradient(135deg, #2A6B5F, #0E3D38); }
.irae-photo-empty-tile:nth-child(5) .irae-photo-empty-bg { background: linear-gradient(135deg, #FFB97B, #FF8A52); }
.irae-photo-empty-tile:nth-child(6) .irae-photo-empty-bg { background: linear-gradient(135deg, #0A2E2A, #2A6B5F); }
.irae-photo-empty-tile:nth-child(7) .irae-photo-empty-bg { background: linear-gradient(135deg, #F26522, #FFB97B, #0E3D38); }
.irae-photo-empty-tile:nth-child(8) .irae-photo-empty-bg { background: linear-gradient(135deg, #E5E0D5, #B8C5C3); }
.irae-photo-empty-tile:nth-child(9) .irae-photo-empty-bg { background: linear-gradient(135deg, #F2B380, #C8D4D2); }

.irae-photo-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-align: center;
    padding: var(--irae-s-3);
    background: rgba(10, 46, 42, 0.4);
    backdrop-filter: blur(2px);
}

.irae-photo-empty-icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--irae-s-2);
    opacity: 0.7;
}

.irae-photo-empty-label {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.9;
}

.irae-photo-empty-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 14px;
    padding: var(--irae-s-5) var(--irae-s-4);
    text-align: center;
    box-shadow: 0 12px 32px rgba(10, 46, 42, 0.22);
    max-width: 300px;
    z-index: 10;
}

.irae-photo-empty-cta-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--irae-s-3);
    background: var(--irae-accent);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.irae-photo-empty-cta-title {
    font-family: var(--irae-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 var(--irae-s-2);
    color: var(--irae-ink);
}

.irae-photo-empty-cta-sub {
    font-size: 0.9rem;
    color: var(--irae-ink-soft);
    margin: 0 0 var(--irae-s-3);
    line-height: 1.5;
}

/* ============================================================
   EXPERIENCE CTA blok
   ============================================================ */
.irae-experience-cta {
    background: var(--irae-bg);
    padding: var(--irae-s-5) 0;
}

.irae-experience-block {
    background: var(--irae-dark);
    color: var(--irae-on-dark);
    border-radius: 20px;
    padding: var(--irae-s-6);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--irae-s-6);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.irae-experience-block::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.16) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.irae-experience-text {
    position: relative;
    z-index: 2;
}

.irae-experience-title {
    font-family: var(--irae-font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: var(--irae-s-2) 0 var(--irae-s-3);
    color: #FFFFFF;
}

.irae-experience-title em {
    color: var(--irae-accent);
    font-style: normal;
}

.irae-experience-sub {
    color: var(--irae-on-dark-soft);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 var(--irae-s-4);
    max-width: 460px;
}

.irae-experience-actions {
    display: flex;
    gap: var(--irae-s-3);
    flex-wrap: wrap;
}

.irae-experience-prize {
    position: relative;
    z-index: 2;
    background: var(--irae-accent);
    border-radius: 16px;
    padding: var(--irae-s-5);
    text-align: center;
}

.irae-experience-prize-amount {
    font-family: var(--irae-font-display);
    font-size: 3rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: var(--irae-s-2);
    letter-spacing: -0.03em;
}

.irae-experience-prize-amount span {
    font-size: 1.4rem;
    vertical-align: super;
    font-weight: 700;
}

.irae-experience-prize-label {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: var(--irae-s-2);
}

.irae-experience-prize-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* ============================================================
   REVIEW FORM (met 4 sub-scores)
   ============================================================ */
.irae-review-form-section {
    background: var(--irae-dark);
    color: var(--irae-on-dark);
    padding: var(--irae-sec-y) 0;
    /* Offset for the fixed header so the section top is not hidden under it
       when scrolled to via the #review-form anchor. */
    scroll-margin-top: var(--irae-header-h, 64px);
}

.irae-mini-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--irae-s-3);
    margin-bottom: var(--irae-s-6);
}

.irae-mini-step {
    display: flex;
    align-items: center;
    gap: var(--irae-s-3);
    padding: var(--irae-s-3) var(--irae-s-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--irae-border-dark);
    border-radius: 10px;
}

.irae-mini-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--irae-accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--irae-font-display);
    font-weight: 700;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.irae-mini-step-text {
    font-size: 0.85rem;
    color: var(--irae-on-dark-soft);
    line-height: 1.35;
}

.irae-mini-step-text strong {
    display: block;
    color: #FFFFFF;
    font-weight: 600;
    margin-bottom: 1px;
}

.irae-review-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--irae-s-6);
    align-items: start;
}

.irae-review-form-intro h2 {
    font-family: var(--irae-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: var(--irae-s-2) 0 var(--irae-s-3);
    color: #FFFFFF;
}

.irae-review-form-intro h2 em {
    color: var(--irae-accent);
    font-style: normal;
}

.irae-review-form-intro p {
    color: var(--irae-on-dark-soft);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 var(--irae-s-4);
}

.irae-review-form-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-2);
}

.irae-review-form-perks li {
    display: flex;
    align-items: flex-start;
    gap: var(--irae-s-3);
    color: var(--irae-on-dark-soft);
    font-size: 0.92rem;
    line-height: 1.4;
}

.irae-review-form-perks li::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--irae-accent);
    color: #FFFFFF;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 1px;
}

.irae-review-form-card {
    background: #FFFFFF;
    color: var(--irae-ink);
    border-radius: 16px;
    padding: var(--irae-s-5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.irae-review-form-card-title {
    font-family: var(--irae-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 var(--irae-s-4);
    color: var(--irae-ink);
}

.irae-form-photo-upload {
    border: 2px dashed var(--irae-border);
    border-radius: 12px;
    padding: var(--irae-s-5) var(--irae-s-3);
    text-align: center;
    background: var(--irae-bg-soft);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    margin-bottom: var(--irae-s-4);
}

.irae-form-photo-upload:hover {
    border-color: var(--irae-accent);
    background: var(--irae-accent-bg);
}

.irae-form-photo-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto var(--irae-s-2);
    background: var(--irae-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.irae-form-photo-icon svg { width: 24px; height: 24px; }

.irae-form-photo-label {
    font-family: var(--irae-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--irae-ink);
    margin-bottom: var(--irae-s-1);
}

.irae-form-photo-hint {
    color: var(--irae-ink-muted);
    font-size: 0.85rem;
}

.irae-form-row {
    margin-bottom: var(--irae-s-3);
}

.irae-form-row-section {
    margin-bottom: var(--irae-s-4);
}

.irae-form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--irae-ink);
    margin-bottom: var(--irae-s-2);
}

.irae-form-label-optional {
    color: var(--irae-ink-muted);
    font-weight: 400;
    font-size: 0.82rem;
    margin-left: 5px;
}

.irae-form-required {
    color: var(--irae-accent);
    font-weight: 700;
    margin-left: 2px;
}

.irae-form-photo-input {
    display: none;
}
.irae-form-photo-filename {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--irae-accent);
    font-weight: 600;
    word-break: break-all;
}
.irae-form-photo-upload {
    cursor: pointer;
}

.irae-form-textarea,
.irae-form-input {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--irae-border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--irae-ink);
    background: #FFFFFF;
    transition: border-color 0.2s ease;
}

.irae-form-textarea:focus,
.irae-form-input:focus {
    outline: none;
    border-color: var(--irae-accent);
}

.irae-form-textarea { min-height: 88px; resize: vertical; }

/* Sub-scores: vier rijen Bestellen/Service/Prijs/Levering met 1-10 */
.irae-subscores-input {
    background: var(--irae-bg-soft);
    border-radius: 10px;
    padding: var(--irae-s-4);
    margin-bottom: var(--irae-s-4);
}

.irae-subscore-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: var(--irae-s-3);
    margin-bottom: var(--irae-s-3);
}

.irae-subscore-row:last-child { margin-bottom: 0; }

.irae-subscore-row-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--irae-ink);
}

.irae-subscore-buttons {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
}

.irae-subscore-btn {
    height: 30px;
    background: #FFFFFF;
    border: 1.5px solid var(--irae-border);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--irae-ink-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.15s ease;
    padding: 0;
}

.irae-subscore-btn:hover {
    border-color: var(--irae-accent);
}

.irae-subscore-btn.active {
    background: var(--irae-accent);
    border-color: var(--irae-accent);
    color: #FFFFFF;
}

.irae-form-submit {
    width: 100%;
    padding: 14px;
    background: var(--irae-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    margin-top: var(--irae-s-2);
}

.irae-form-submit:hover {
    background: var(--irae-accent-hover);
    transform: translateY(-1px);
}

.irae-form-trust {
    margin-top: var(--irae-s-3);
    font-size: 0.78rem;
    color: var(--irae-ink-muted);
    text-align: center;
    line-height: 1.45;
}

/* ============================================================
   RELATED BRANDS
   ============================================================ */
.irae-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--irae-s-4);
}

.irae-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-3);
    padding: var(--irae-s-4);
    background: var(--irae-bg);
    border: 1px solid var(--irae-border-soft);
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Coloured glow that lights up on hover, tinted per brand. */
.irae-related-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 80% at 50% -20%, hsl(var(--irae-card-hue, 200) 70% 96%) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.irae-related-card:hover {
    transform: translateY(-6px);
    border-color: hsl(var(--irae-card-hue, 200) 55% 60%);
    color: var(--irae-ink);
    box-shadow: 0 18px 40px -12px hsl(var(--irae-card-hue, 200) 50% 45% / 0.35);
}
.irae-related-card:hover::before { opacity: 1; }

.irae-related-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--irae-s-2);
}

.irae-related-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--irae-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    background: linear-gradient(135deg, hsl(var(--irae-card-hue, 200) 65% 52%) 0%, hsl(calc(var(--irae-card-hue, 200) + 35) 70% 45%) 100%);
    box-shadow: 0 6px 16px -4px hsl(var(--irae-card-hue, 200) 60% 45% / 0.5);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.irae-related-card:hover .irae-related-logo {
    transform: scale(1.08) rotate(-3deg);
}

.irae-related-scorebox {
    display: flex;
    align-items: baseline;
    gap: 1px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--irae-dark);
    color: #FFFFFF;
}
.irae-related-scorenum {
    font-family: var(--irae-font-display);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
}
.irae-related-scoremax {
    font-size: 0.7rem;
    opacity: 0.7;
}

.irae-related-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.irae-related-name {
    font-family: var(--irae-font-display);
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--irae-ink);
}

.irae-related-branche {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: hsl(var(--irae-card-hue, 200) 60% 95%);
    color: hsl(var(--irae-card-hue, 200) 55% 32%);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.irae-related-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: var(--irae-s-3);
    border-top: 1px solid var(--irae-border-soft);
}

.irae-related-count {
    font-size: 0.8rem;
    color: var(--irae-ink-muted);
}
.irae-related-count-empty { opacity: 0.7; }

.irae-related-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: hsl(var(--irae-card-hue, 200) 55% 42%);
}
.irae-related-arrow {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.irae-related-card:hover .irae-related-arrow {
    transform: translateX(5px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.irae-footer {
    background: var(--irae-dark-deeper);
    color: var(--irae-on-dark);
    padding: var(--irae-s-7) 0 var(--irae-s-4);
}

.irae-footer a { color: var(--irae-on-dark-soft); }
.irae-footer a:hover { color: var(--irae-accent-soft); }

.irae-footer-top {
    padding-bottom: var(--irae-s-5);
    border-bottom: 1px solid var(--irae-border-dark);
}

.irae-footer-brand {
    margin-bottom: var(--irae-s-5);
}

.irae-footer-logo img {
    height: 34px;
    width: auto;
    display: block;
}

.irae-footer-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--irae-s-4);
}

.irae-footer-col h4 {
    font-family: var(--irae-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    margin: 0 0 var(--irae-s-3);
}

.irae-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-2);
}

.irae-footer-col a { font-size: 0.9rem; }

.irae-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--irae-s-4);
    font-size: 0.82rem;
    color: var(--irae-on-dark-muted);
    flex-wrap: wrap;
    gap: var(--irae-s-3);
}

.irae-footer-legal {
    display: flex;
    gap: var(--irae-s-4);
}

.irae-footer-disclosure {
    max-width: 460px;
    text-align: right;
}

/* ============================================================
   BRANCHE ARCHIVE (categorie pagina)
   ============================================================ */
.irae-archive-hero {
    background: var(--irae-dark);
    color: var(--irae-on-dark);
    padding: var(--irae-s-5) 0 var(--irae-s-6);
}

.irae-archive-hero .irae-eyebrow {
    color: var(--irae-accent-soft);
}

.irae-archive-title {
    font-family: var(--irae-font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.05;
    margin: var(--irae-s-2) 0 var(--irae-s-3);
    color: #FFFFFF;
}

.irae-archive-title em {
    font-style: italic;
    color: var(--irae-accent);
}

.irae-archive-intro {
    color: var(--irae-on-dark-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 var(--irae-s-3);
}

.irae-archive-count {
    font-size: 0.85rem;
    color: var(--irae-on-dark-muted);
    margin: 0;
}

.irae-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--irae-s-4);
}

@media (max-width: 900px) {
    .irae-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

.irae-archive-card {
    display: flex;
    align-items: center;
    gap: var(--irae-s-3);
    background: #FFFFFF;
    border: 1px solid var(--irae-border);
    border-radius: var(--irae-radius);
    padding: var(--irae-s-4);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.irae-archive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 61, 56, 0.12);
    border-color: var(--irae-accent);
}

.irae-archive-card-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--irae-dark);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--irae-font-display);
    font-weight: 700;
    font-size: 1.4rem;
}

.irae-archive-card-body {
    flex: 1;
    min-width: 0;
}

.irae-archive-card-name {
    font-family: var(--irae-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--irae-ink);
    margin: 0 0 2px;
}

.irae-archive-card-domain {
    font-size: 0.8rem;
    color: var(--irae-ink-muted);
    display: block;
    margin-bottom: 6px;
}

.irae-archive-card-meta {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
}

.irae-archive-card-score {
    background: var(--irae-accent);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 6px;
}

.irae-archive-card-count {
    font-size: 0.82rem;
    color: var(--irae-ink-soft);
}

.irae-archive-card-arrow {
    color: var(--irae-ink-muted);
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}

.irae-archive-card:hover .irae-archive-card-arrow {
    color: var(--irae-accent);
    transform: translateX(3px);
}

.irae-archive-empty {
    text-align: center;
    padding: var(--irae-s-7) 0;
    color: var(--irae-ink-soft);
}

.irae-archive-empty p {
    margin-bottom: var(--irae-s-4);
}

@media (max-width: 600px) {
    .irae-archive-grid { grid-template-columns: 1fr; }
}

/* Zoekformulier op branche archief */
.irae-archive-search {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--irae-radius);
    padding: 6px 6px 6px 14px;
    max-width: 480px;
    margin: var(--irae-s-4) 0 var(--irae-s-3);
}

.irae-archive-search-icon {
    color: var(--irae-on-dark-muted);
    flex-shrink: 0;
}

.irae-archive-search input[type="search"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: var(--irae-font-body);
    font-size: 0.95rem;
    padding: 6px 4px;
    min-width: 0;
}

.irae-archive-search input[type="search"]::placeholder {
    color: var(--irae-on-dark-muted);
}

.irae-archive-search-btn {
    flex-shrink: 0;
    background: var(--irae-accent);
    color: #FFFFFF;
    border: none;
    border-radius: calc(var(--irae-radius) - 4px);
    padding: 8px 18px;
    font-family: var(--irae-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.18s ease;
}

.irae-archive-search-btn:hover {
    background: var(--irae-accent-hover, #d9551a);
}

.irae-archive-search-clear {
    flex-shrink: 0;
    color: var(--irae-on-dark-muted);
    font-size: 0.85rem;
    padding: 0 8px;
    text-decoration: none;
}

.irae-archive-search-clear:hover {
    color: var(--irae-accent-soft);
}

/* Paginering met nummers en pijlen */
.irae-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--irae-s-2);
    margin-top: var(--irae-s-6);
}

.irae-pagination-item .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--irae-border);
    background: #FFFFFF;
    color: var(--irae-ink);
    font-family: var(--irae-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.18s ease;
}

.irae-pagination-item .page-numbers:hover {
    border-color: var(--irae-accent);
    color: var(--irae-accent);
}

.irae-pagination-item .page-numbers.current {
    background: var(--irae-dark);
    border-color: var(--irae-dark);
    color: #FFFFFF;
}

.irae-pagination-item .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

.irae-pagination-item .page-numbers.prev,
.irae-pagination-item .page-numbers.next {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--irae-dark);
}

@media (max-width: 600px) {
    /* Stack as: [icon + input] on one row, button full width below. The icon
       and input share a flexible row; the button and clear link wrap under. */
    .irae-archive-search {
        flex-wrap: wrap;
        max-width: 100%;
        padding: 10px 12px;
        gap: 10px;
    }
    .irae-archive-search-icon {
        order: 1;
    }
    .irae-archive-search input[type="search"] {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        padding: 4px 0;
        font-size: 1rem;
    }
    .irae-archive-search-btn {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        padding: 12px 18px;
        font-size: 0.95rem;
    }
    .irae-archive-search-clear {
        order: 4;
        flex: 1 1 100%;
        text-align: center;
        padding: 4px 0;
    }
}

/* ============================================================
   CATEGORIEEN OVERZICHT
   ============================================================ */
.irae-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--irae-s-4);
}

.irae-cat-card {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
    background: #FFFFFF;
    border: 1px solid var(--irae-border);
    border-radius: var(--irae-radius);
    padding: var(--irae-s-4) var(--irae-s-5);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.irae-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 61, 56, 0.12);
    border-color: var(--irae-accent);
}

.irae-cat-card-name {
    flex: 1;
    font-family: var(--irae-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--irae-ink);
    margin: 0;
}

.irae-cat-card-count {
    font-size: 0.82rem;
    color: var(--irae-ink-muted);
    white-space: nowrap;
}

.irae-cat-card-arrow {
    color: var(--irae-ink-muted);
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}

.irae-cat-card:hover .irae-cat-card-arrow {
    color: var(--irae-accent);
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .irae-cat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
    .irae-hero-cold-grid {
        grid-template-columns: 1fr;
        gap: var(--irae-s-5);
    }

    .irae-facts-grid { grid-template-columns: repeat(2, 1fr); }
    .irae-fact:nth-child(4n) { border-right: 1px solid var(--irae-border-soft); }
    .irae-fact:nth-child(2n) { border-right: none; }

    .irae-promos-grid { grid-template-columns: 1fr; }
    .irae-news-grid { grid-template-columns: 1fr; gap: var(--irae-s-3); }
    .irae-related-grid { grid-template-columns: repeat(2, 1fr); }

    .irae-experience-block {
        grid-template-columns: 1fr;
        padding: var(--irae-s-5);
    }

    .irae-review-form-grid {
        grid-template-columns: 1fr;
        gap: var(--irae-s-5);
    }

    .irae-mini-steps {
        grid-template-columns: 1fr;
        gap: var(--irae-s-2);
        margin-bottom: var(--irae-s-4);
    }

    .irae-footer-cols { grid-template-columns: repeat(3, 1fr); gap: var(--irae-s-5); }
}

@media (max-width: 768px) {
    :root {
        --irae-sec-y: var(--irae-sec-y-sm);
    }

    .irae-container { padding: 0 var(--irae-s-4); }

    /* Header mobiel: tagline weg, nav onder */
    .irae-header-inner {
        flex-wrap: wrap;
        gap: var(--irae-s-2);
        padding: var(--irae-s-2) var(--irae-s-4);
    }

    .irae-logo-divider { display: none; }
    .irae-header-tagline { display: none; }
    .irae-nav {
        order: 4;
        width: 100%;
        margin: 0;
        justify-content: flex-start;
        gap: var(--irae-s-4);
        overflow-x: auto;
        padding-bottom: var(--irae-s-1);
    }
    .irae-nav-link { font-size: 0.88rem; white-space: nowrap; }

    /* Hero compacter */
    .irae-hero-cold { padding: var(--irae-s-4) 0 var(--irae-s-5); }
    .irae-hero-title { font-size: 2rem; }
    .irae-hero-tagline { font-size: 0.98rem; margin-bottom: var(--irae-s-4); }

    /* Buttons full-width op mobiel voor betere tap targets */
    .irae-hero-ctas { flex-direction: column; align-items: stretch; }
    .irae-hero-ctas .irae-btn { justify-content: center; width: 100%; }

    .irae-experience-actions { flex-direction: column; align-items: stretch; }
    .irae-experience-actions .irae-btn { justify-content: center; width: 100%; }

    /* Hero scores: 4 columns blijven, kleinere gauges */
    .irae-hero-scores { padding: var(--irae-s-4); }
    .irae-hero-scores-grid { grid-template-columns: repeat(4, 1fr); gap: var(--irae-s-1); }
    .irae-score-circle { width: 50px; height: 50px; }
    .irae-score-circle-value { font-size: 0.85rem; }
    .irae-score-gauge-label { font-size: 0.66rem; }

    /* Photo gallery 2 kolom op mobiel */
    .irae-photo-empty-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }
    .irae-photo-empty-tile:nth-child(7) { grid-column: span 1; }
    .irae-photo-empty-cta {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: 100%;
        grid-column: span 2;
        margin: var(--irae-s-2) 0;
    }

    /* Facts 1 kolom */
    .irae-facts-grid { grid-template-columns: 1fr; }
    .irae-fact:nth-child(2n) { border-right: none; }

    /* Promotions */
    .irae-promo { flex-direction: column; align-items: flex-start; text-align: left; }
    .irae-promo-discount { width: 100%; height: 56px; }

    /* News */
    .irae-news-card-title { font-size: 1rem; }

    /* FAQ */
    .irae-faq-question { font-size: 1.05rem; }
    .irae-faq-answer { margin-left: 0; font-size: 0.95rem; }

    /* Experience block */
    .irae-experience-block { padding: var(--irae-s-4); border-radius: 16px; }
    .irae-experience-title { font-size: 1.5rem; }
    .irae-experience-prize { padding: var(--irae-s-4); }
    .irae-experience-prize-amount { font-size: 2.4rem; }

    /* Review form */
    .irae-review-form-card { padding: var(--irae-s-4); }
    .irae-form-photo-upload { padding: var(--irae-s-4) var(--irae-s-2); }

    /* Sub-scores op mobiel: label boven de buttons */
    .irae-subscores-input { padding: var(--irae-s-3); }
    .irae-subscore-row { grid-template-columns: 1fr; gap: var(--irae-s-2); }
    .irae-subscore-btn { height: 32px; font-size: 0.78rem; }

    /* Footer */
    .irae-footer { padding: var(--irae-s-5) 0 var(--irae-s-3); }
    .irae-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--irae-s-4); }
    .irae-footer-bottom { flex-direction: column; align-items: flex-start; }
    .irae-footer-disclosure { text-align: left; }
    .irae-footer-legal { flex-direction: column; gap: var(--irae-s-2); }

    /* Related brands */
    .irae-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .irae-hero-title { font-size: 1.7rem; }
    .irae-section-title { font-size: 1.4rem; }
    .irae-hero-scores-grid { grid-template-columns: repeat(2, 1fr); gap: var(--irae-s-3); }
    .irae-score-circle { width: 64px; height: 64px; }
    .irae-score-circle-value { font-size: 1rem; }
    .irae-score-gauge-label { font-size: 0.78rem; }
}

/* ============================================================
   V0.7 ADDITIONS
   ============================================================ */

/* Safety net tegen horizontale scroll.
   BELANGRIJK: de overflow staat op .irae-main en NIET op html/body. Elke vorm
   van overflow (ook overflow-x: hidden of clip) op een ancestor van een sticky
   element maakt die ancestor de scroll-container, waardoor position: sticky op
   de header stopt met werken. De header staat buiten .irae-main, dus die houdt
   een schone sticky-context ten opzichte van body. */
html, body {
    max-width: 100%;
}

.irae-main {
    overflow-x: clip;
}

/* Brand name als affiliate link in de hero */
.irae-hero-title a {
    color: inherit;
    position: relative;
    transition: color 0.2s ease;
}

.irae-hero-title a:hover {
    color: var(--irae-accent-soft);
}

.irae-hero-title a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.irae-hero-title a:hover::after {
    opacity: 0.5;
}

/* Geblurde kortingscode: gehele promo card als affiliate link */
a.irae-promo-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.irae-promo-link:hover { color: inherit; }

.irae-promo {
    cursor: pointer;
    position: relative;
}

.irae-promo-code-blurred {
    filter: blur(4px);
    user-select: none;
    transition: filter 0.25s ease;
}

a.irae-promo-link:hover .irae-promo-code-blurred {
    filter: blur(3px);
}

.irae-promo-reveal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--irae-accent);
    font-weight: 700;
    font-size: 0.82rem;
}

.irae-promo-reveal svg {
    width: 13px;
    height: 13px;
}

/* Akkoord checkbox in formulier */
.irae-form-consent {
    display: flex;
    gap: var(--irae-s-3);
    align-items: flex-start;
    padding: var(--irae-s-3);
    background: var(--irae-bg-soft);
    border-radius: 8px;
    margin-bottom: var(--irae-s-3);
}

.irae-form-consent input[type="checkbox"] {
    flex-shrink: 0;
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    accent-color: var(--irae-accent);
    cursor: pointer;
}

.irae-form-consent label {
    font-size: 0.85rem;
    color: var(--irae-ink-soft);
    line-height: 1.45;
    cursor: pointer;
}

.irae-form-consent label a {
    color: var(--irae-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* E-mail hint */
.irae-form-hint {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--irae-ink-muted);
    line-height: 1.4;
}

/* Submit subtekst */
.irae-form-submit-sub {
    margin-top: var(--irae-s-2);
    font-size: 0.78rem;
    color: var(--irae-ink-muted);
    text-align: center;
}

/* Mobile photo gallery: reset alle spans */
@media (max-width: 768px) {
    .irae-photo-empty-tile:nth-child(1),
    .irae-photo-empty-tile:nth-child(4),
    .irae-photo-empty-tile:nth-child(7) {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }

    .irae-photo-empty-cta {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: 100% !important;
        grid-column: span 2 !important;
        grid-row: span 1 !important;
        margin: 0 !important;
        order: 5;
    }

    /* Sub-score buttons compacter op smalle schermen */
    .irae-subscore-btn {
        height: 28px;
        font-size: 0.72rem;
        min-width: 0;
    }

    .irae-subscore-buttons { gap: 3px; }
}

@media (max-width: 480px) {
    .irae-subscore-btn {
        height: 26px;
        font-size: 0.68rem;
    }

    .irae-photo-empty-grid {
        grid-auto-rows: 120px;
    }
}

/* ============================================================
   V0.8 ADDITIONS
   ============================================================ */

/* ============================================================
   HAMBURGER MENU (native details, no JS needed)
   ============================================================ */
.irae-mobile-menu {
    display: none;
    margin-left: auto;
}

.irae-mobile-menu summary {
    list-style: none;
    cursor: pointer;
    padding: var(--irae-s-2);
    border-radius: 6px;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.irae-mobile-menu summary::-webkit-details-marker { display: none; }
.irae-mobile-menu summary::marker { display: none; }

.irae-mobile-menu summary svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
}

.irae-mobile-menu summary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.irae-mobile-menu-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--irae-dark);
    border-top: 1px solid var(--irae-border-dark);
    padding: var(--irae-s-3) var(--irae-s-4);
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-1);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.irae-mobile-menu-content a {
    color: #FFFFFF;
    padding: var(--irae-s-3) 0;
    font-size: 0.98rem;
    font-weight: 500;
    border-bottom: 1px solid var(--irae-border-dark);
}

.irae-mobile-menu-content a:last-child { border-bottom: none; }
.irae-mobile-menu-content a:hover { color: var(--irae-accent-soft); }

/* Indicator voor de open state */
.irae-mobile-menu[open] summary {
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   EXPERIENCE PRIZE: subtieler, niet meer solid oranje
   ============================================================ */
.irae-experience-prize {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(242, 101, 34, 0.35);
    border-radius: 16px;
    padding: var(--irae-s-5);
    text-align: center;
}

.irae-experience-prize-amount {
    font-family: var(--irae-font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--irae-accent);
    line-height: 1;
    margin-bottom: var(--irae-s-2);
    letter-spacing: -0.03em;
}

.irae-experience-prize-amount span {
    font-size: 1.4rem;
    vertical-align: super;
    font-weight: 700;
}

.irae-experience-prize-label {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: var(--irae-s-2);
}

.irae-experience-prize-sub {
    color: var(--irae-on-dark-soft);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* ============================================================
   SUBSCORE BUTTONS: alle states expliciet, tekst altijd zichtbaar
   ============================================================ */
.irae-subscore-btn,
.irae-subscore-btn:link,
.irae-subscore-btn:visited {
    height: 30px;
    background: #FFFFFF;
    border: 1.5px solid var(--irae-border);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--irae-ink-soft) !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.irae-subscore-btn:hover {
    border-color: var(--irae-accent);
    background: var(--irae-bg-soft);
    color: var(--irae-ink) !important;
}

.irae-subscore-btn:focus {
    outline: none;
    border-color: var(--irae-accent);
    color: var(--irae-ink) !important;
}

.irae-subscore-btn:active {
    transform: scale(0.95);
    color: var(--irae-ink) !important;
}

/* Active state ALTIJD wit, op alle interaction states */
.irae-subscore-btn.active,
.irae-subscore-btn.active:link,
.irae-subscore-btn.active:visited,
.irae-subscore-btn.active:hover,
.irae-subscore-btn.active:focus,
.irae-subscore-btn.active:active {
    background: var(--irae-accent) !important;
    border-color: var(--irae-accent) !important;
    color: #FFFFFF !important;
}

/* ============================================================
   ALLE BUTTONS: states expliciet houden voor tekst zichtbaarheid
   ============================================================ */
.irae-btn:focus,
.irae-btn:active {
    outline: none;
}

.irae-btn-primary:focus,
.irae-btn-primary:active {
    background: var(--irae-accent-hover);
    border-color: var(--irae-accent-hover);
    color: #FFFFFF !important;
}

.irae-btn-outline-light:focus,
.irae-btn-outline-light:active {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
}

.irae-header-cta:focus,
.irae-header-cta:active {
    background: var(--irae-accent-hover);
    color: #FFFFFF !important;
}

.irae-form-submit:focus,
.irae-form-submit:active {
    outline: none;
    background: var(--irae-accent-hover);
    color: #FFFFFF !important;
}

/* ============================================================
   MOBILE: hamburger tonen, nav verbergen, gallery vereenvoudigen
   ============================================================ */
@media (max-width: 768px) {
    .irae-header-inner {
        flex-wrap: nowrap;
        padding: var(--irae-s-3) var(--irae-s-4);
    }

    /* Verberg desktop nav */
    .irae-nav { display: none; }

    /* Verberg header CTA, zit nu in mobile menu */
    .irae-header-actions { display: none; }

    /* Toon hamburger */
    .irae-mobile-menu { display: block; }

    /* Photo gallery: max 4 tegels op mobiel, daarna CTA full-width */
    .irae-photo-empty-grid > .irae-photo-empty-tile:nth-child(n+5) {
        display: none;
    }

    .irae-photo-empty-cta {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: 100% !important;
        grid-column: span 2 !important;
        margin: 0 !important;
    }

    .irae-experience-prize-amount { font-size: 2.4rem; }
    .irae-experience-prize { padding: var(--irae-s-4); }
}

/* ============================================================
   V0.9 ADDITIONS
   ============================================================ */

/* Header blijft position: fixed op mobiel (net als desktop). We zetten hier
   niets dat de fixed-positionering overschrijft. De hamburger dropdown is
   absolute gepositioneerd ten opzichte van de fixed header. */
@media (max-width: 768px) {
    .irae-mobile-menu-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }
}

/* Photo gallery CTA: auto height op mobiel zodat button niet uitsteekt */
@media (max-width: 768px) {
    .irae-photo-empty-grid {
        grid-auto-rows: minmax(120px, auto);
    }

    .irae-photo-empty-cta {
        min-height: auto;
        padding: var(--irae-s-5) var(--irae-s-4) !important;
    }
}

/* Hamburger CTA: laatste link als oranje button */
.irae-mobile-menu-cta {
    background: var(--irae-accent);
    color: #FFFFFF !important;
    padding: 14px 16px !important;
    border-radius: 8px;
    text-align: center;
    font-weight: 700 !important;
    margin-top: var(--irae-s-3);
    border-bottom: none !important;
    transition: background 0.2s ease;
}

.irae-mobile-menu-cta:hover {
    background: var(--irae-accent-hover);
    color: #FFFFFF !important;
}

/* ============================================================
   STARS RATING (5 sterren per dimensie, vervangt 1-10 knoppen)
   ============================================================ */
.irae-stars-block {
    background: var(--irae-bg-soft);
    border-radius: 10px;
    padding: var(--irae-s-4);
    margin-bottom: var(--irae-s-4);
}

.irae-stars-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--irae-s-3);
    padding: var(--irae-s-2) 0;
    border-bottom: 1px solid var(--irae-border-soft);
}

.irae-stars-row:last-child { border-bottom: none; }

.irae-stars-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--irae-ink);
}

.irae-stars-buttons {
    display: flex;
    gap: 4px;
}

.irae-star {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--irae-border);
    transition: color 0.12s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.irae-star svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.irae-star:hover { transform: scale(1.08); }
.irae-star:focus { outline: none; }

.irae-star.active {
    color: var(--irae-accent);
}

@media (max-width: 480px) {
    .irae-star {
        width: 28px;
        height: 28px;
    }
    .irae-star svg {
        width: 22px;
        height: 22px;
    }
    .irae-stars-row {
        grid-template-columns: 1fr;
        gap: var(--irae-s-1);
    }
    .irae-stars-label { font-size: 0.85rem; }
}

/* ============================================================
   ADD YOUR BRAND CTA (review page)
   ============================================================ */
.irae-add-brand {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--irae-s-6);
    align-items: center;
    background: var(--irae-dark);
    color: var(--irae-on-dark);
    border-radius: var(--irae-radius-lg, 18px);
    padding: var(--irae-s-7, 40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.irae-add-brand-text .irae-eyebrow {
    color: var(--irae-accent);
}

.irae-add-brand-text h2 {
    font-family: var(--irae-font-display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.1;
    margin: var(--irae-s-2) 0 var(--irae-s-3);
    color: #FFFFFF;
}

.irae-add-brand-text h2 em {
    color: var(--irae-accent);
    font-style: normal;
}

.irae-add-brand-text p {
    color: var(--irae-on-dark-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.irae-add-brand-form {
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-3);
}

.irae-add-brand-inputwrap {
    display: flex;
    align-items: center;
    gap: var(--irae-s-2);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--irae-radius);
    padding: 4px 14px;
}

.irae-add-brand-inputwrap svg {
    color: var(--irae-on-dark-muted);
    flex-shrink: 0;
}

.irae-add-brand-inputwrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: var(--irae-font-body);
    font-size: 1rem;
    padding: 14px 4px;
    min-width: 0;
}

.irae-add-brand-inputwrap input::placeholder {
    color: var(--irae-on-dark-muted);
}

.irae-add-brand-form .irae-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 1rem;
}

.irae-add-brand-msg {
    display: none;
    color: #ffd5c4;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 768px) {
    .irae-add-brand {
        grid-template-columns: 1fr;
        padding: var(--irae-s-5);
        gap: var(--irae-s-4);
    }
}

/* ============================================================
   BUILDING POPUP (engagement timer)
   ============================================================ */
.irae-building-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(14, 61, 56, 0.92);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--irae-s-4);
}

.irae-building-overlay[hidden] {
    display: none;
}

.irae-building-modal {
    background: var(--irae-dark);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--irae-radius-lg, 18px);
    padding: var(--irae-s-7, 40px);
    max-width: 440px;
    width: 100%;
    text-align: center;
    color: var(--irae-on-dark);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

.irae-building-spinner {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--irae-s-4);
}

.irae-building-spinner svg {
    transform: rotate(-90deg);
}

.irae-building-track {
    stroke: rgba(255, 255, 255, 0.15);
}

.irae-building-progress {
    stroke: var(--irae-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear;
}

.irae-building-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFFFFF;
}

.irae-building-title {
    font-family: var(--irae-font-display);
    font-size: 1.5rem;
    margin: 0 0 var(--irae-s-4);
    color: #FFFFFF;
}

.irae-building-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-2);
}

.irae-building-steps li {
    position: relative;
    padding-left: 30px;
    color: var(--irae-on-dark-muted);
    font-size: 0.95rem;
    opacity: 0.5;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.irae-building-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
}

.irae-building-steps li.active {
    opacity: 1;
    color: #FFFFFF;
}

.irae-building-steps li.active::before {
    border-color: var(--irae-accent);
    border-top-color: transparent;
    animation: irae-spin 0.8s linear infinite;
}

.irae-building-steps li.done {
    opacity: 1;
    color: var(--irae-on-dark-muted);
}

.irae-building-steps li.done::before {
    border-color: var(--irae-accent);
    background: var(--irae-accent);
}

.irae-building-steps li.done::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@keyframes irae-spin {
    to { transform: rotate(360deg); }
}

.irae-building-ready {
    margin: var(--irae-s-4) 0 0;
    color: var(--irae-accent-soft, #ffb59a);
    font-weight: 600;
}

/* ============================================================
   STICKY SIDE TAB (add your brand)
   ============================================================ */
/* Desktop: a vertical tab pinned to the left edge, text reading bottom-to-top.
   Unobtrusive but always visible while scrolling. */
.irae-side-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--irae-accent);
    color: #FFFFFF !important;
    padding: 16px 8px;
    border-radius: 0 var(--irae-radius) var(--irae-radius) 0;
    box-shadow: 0 4px 18px rgba(14, 61, 56, 0.28);
    font-family: var(--irae-font-body);
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease;
}

.irae-side-tab:hover,
.irae-side-tab:focus-visible {
    background: var(--irae-accent-hover, #d9551a);
    color: #FFFFFF !important;
    box-shadow: 0 6px 22px rgba(14, 61, 56, 0.34);
    padding-left: 12px;
    padding-right: 12px;
}

.irae-side-tab-icon {
    flex-shrink: 0;
}

.irae-side-tab-text {
    /* Vertical text reading from bottom to top */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Mobile: a compact circular floating button in the bottom-right corner so it
   never covers content. It only shows the plus icon; the label is hidden to
   keep it tiny and out of the way. */
@media (max-width: 768px) {
    .irae-side-tab {
        left: auto;
        right: 16px;
        top: auto;
        bottom: 16px;
        transform: none;
        flex-direction: row;
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .irae-side-tab:hover,
    .irae-side-tab:focus-visible {
        padding: 0;
    }
    .irae-side-tab-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .irae-side-tab-icon {
        width: 20px;
        height: 20px;
    }
}

/* Scroll target offset so the add-brand section is not hidden under the
   fixed header when reached via the #add-brand anchor. */
#add-brand {
    scroll-margin-top: var(--irae-header-h, 64px);
}

/* ============================================================
   CLAIM PROFILE (verified profile via subscription)
   ============================================================ */
.irae-pill-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(212, 175, 55, 0.16);
    color: #FFFFFF;
    border: 1px solid rgba(212, 175, 55, 0.55);
}
.irae-pill-verified svg {
    color: #e8c659;
}

/* Verified wrapper: badge plus an info button sitting next to it (not on the
   corner like the claim button, since the badge is informational). */
.irae-verified-wrap {
    gap: 6px;
}
.irae-verified-info-btn {
    position: static;
    top: auto;
    right: auto;
    width: 22px;
    height: 22px;
    border: none;
    background: #2563eb;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(14, 61, 56, 0.25);
}
.irae-verified-info-btn:hover,
.irae-verified-info-btn[aria-expanded="true"] {
    background: #1d4ed8;
    transform: scale(1.08);
}

.irae-claim {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Eye-catching claim button: filled accent with a subtle attention pulse.
   Extra right padding leaves room for the info button that sits on the edge. */
.irae-claim-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--irae-accent);
    color: #FFFFFF !important;
    font-family: var(--irae-font-body);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
    padding: 8px 26px 8px 14px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 0 0 0 rgba(242, 101, 34, 0.5);
    animation: irae-claim-pulse 2.4s ease-out infinite;
    transition: background 0.18s ease, transform 0.18s ease;
}
.irae-claim-btn:hover {
    background: var(--irae-accent-hover, #d9551a);
    transform: translateY(-1px);
    animation: none;
}
.irae-claim-btn svg {
    color: #FFFFFF;
}

@keyframes irae-claim-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(242, 101, 34, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(242, 101, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 101, 34, 0); }
}

/* Blue info badge sitting on the top-right edge of the claim button, half in
   and half out, so it stands out and never overlaps the button text. */
.irae-claim-info-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: #2563eb;
    color: #FFFFFF;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(14, 61, 56, 0.3);
    transition: background 0.18s ease, transform 0.18s ease;
}
.irae-claim-info-btn:hover,
.irae-claim-info-btn[aria-expanded="true"] {
    background: #1d4ed8;
    transform: scale(1.08);
}

.irae-claim-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 290px;
    max-width: 80vw;
    background: #FFFFFF;
    color: var(--irae-dark);
    border-radius: var(--irae-radius);
    padding: 16px 18px;
    box-shadow: 0 16px 50px rgba(14, 61, 56, 0.28);
}
.irae-claim-popover[hidden] {
    display: none;
}
.irae-claim-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 22px;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    transform: rotate(45deg);
    box-shadow: -3px -3px 8px rgba(14, 61, 56, 0.06);
}
.irae-claim-popover-title {
    font-family: var(--irae-font-display);
    font-size: 1rem;
    color: var(--irae-dark);
}
.irae-claim-popover-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #45635e;
}
.irae-claim-popover-cta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--irae-accent);
    text-decoration: none;
}
.irae-claim-popover-cta:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .irae-claim-popover {
        left: auto;
        right: 0;
    }
    .irae-claim-popover::before {
        left: auto;
        right: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .irae-claim-btn { animation: none; }
}

/* Clickable category pill (links to the branche archive) */
.irae-pill-link {
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.irae-pill-link:hover {
    background: #ffce4d;
    border-color: #ffce4d;
    color: #1a2e2b;
}

/* ============================================================
   CLAIM PAGE (form)
   ============================================================ */
.irae-claim-for {
    color: var(--irae-on-dark-muted);
    font-size: 0.95rem;
    margin-top: var(--irae-s-2);
}
.irae-claim-for strong {
    color: #FFFFFF;
}

.irae-claim-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--irae-s-5);
    align-items: stretch;
}

/* Left: benefits panel in the house style */
.irae-claim-benefits {
    background: linear-gradient(160deg, #0E3D38 0%, #0a2e2a 100%);
    color: var(--irae-on-dark);
    border-radius: var(--irae-radius-lg, 18px);
    padding: var(--irae-s-6, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.irae-claim-benefits-eyebrow {
    color: var(--irae-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.irae-claim-benefits-title {
    font-family: var(--irae-font-display);
    font-size: 1.7rem;
    line-height: 1.15;
    color: #FFFFFF;
    margin: 0 0 var(--irae-s-2);
}
.irae-claim-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-3);
}
.irae-claim-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.98rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}
.irae-claim-benefits-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--irae-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.irae-claim-badge-preview {
    margin-top: auto;
    padding-top: var(--irae-s-4);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.irae-claim-badge-caption {
    font-size: 0.82rem;
    color: var(--irae-on-dark-muted);
}

/* Right: the form card */
.irae-claim-form-wrap {
    background: #FFFFFF;
    border: 1px solid #e7eceb;
    border-radius: var(--irae-radius-lg, 18px);
    padding: var(--irae-s-7, 40px);
    box-shadow: 0 16px 50px rgba(14, 61, 56, 0.08);
}
.irae-claim-form-heading {
    font-family: var(--irae-font-display);
    font-size: 1.5rem;
    color: var(--irae-dark);
    margin: 0 0 6px;
}
.irae-claim-form-sub {
    color: #5a716c;
    font-size: 0.95rem;
    margin: 0 0 var(--irae-s-4);
}
.irae-claim-reassure {
    font-size: 0.85rem;
    color: #5a716c;
    margin: 4px 0 0;
}

.irae-claim-form {
    display: flex;
    flex-direction: column;
    gap: var(--irae-s-4);
}

.irae-claim-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--irae-s-4);
}

.irae-claim-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--irae-font-body);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--irae-dark);
}

.irae-claim-label input,
.irae-claim-label textarea {
    font-family: var(--irae-font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--irae-dark);
    background: #f7faf9;
    border: 1px solid #d7e0de;
    border-radius: var(--irae-radius);
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.irae-claim-label input:focus,
.irae-claim-label textarea:focus {
    border-color: var(--irae-accent);
    box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.12);
}

.irae-claim-form .irae-btn {
    align-self: flex-start;
    padding: 14px 28px;
    font-size: 1rem;
}

.irae-claim-msg {
    display: none;
    color: #c0392b;
    font-size: 0.9rem;
    margin: 0;
}

.irae-claim-success {
    text-align: center;
    padding: var(--irae-s-5) 0;
}
.irae-claim-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--irae-s-3);
    border-radius: 50%;
    background: #e7f7ef;
    color: #1a9c63;
    display: flex;
    align-items: center;
    justify-content: center;
}
.irae-claim-success h2 {
    font-family: var(--irae-font-display);
    color: var(--irae-dark);
    margin: 0 0 var(--irae-s-2);
}
.irae-claim-success p {
    color: #45635e;
    margin: 0;
}

@media (max-width: 900px) {
    .irae-claim-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .irae-claim-row {
        grid-template-columns: 1fr;
    }
    .irae-claim-form-wrap {
        padding: var(--irae-s-5);
    }
    .irae-claim-benefits {
        padding: var(--irae-s-5);
    }
}

/* Empty-category invitation text above the inline add-brand box */
.irae-archive-empty-cta {
    color: var(--irae-on-dark-muted);
    font-size: 1rem;
    margin: 0 0 var(--irae-s-4);
}

/* Compact add-brand box used inside the empty-category state */
.irae-add-brand-compact {
    text-align: left;
    margin-top: var(--irae-s-4);
}

/* "Brand not listed?" hint under the archive search bar */
.irae-archive-add-hint {
    margin: var(--irae-s-2) 0 0;
}
.irae-archive-add-hint a {
    color: var(--irae-accent);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}
.irae-archive-add-hint a:hover {
    text-decoration: underline;
}

/* Reusable add-brand box: scroll target offset under the fixed header */
.irae-add-brand[id="add-brand"] {
    scroll-margin-top: var(--irae-header-h, 64px);
}

/* Subtle "example" label on AI-generated promotions, so visitors understand
   these are indicative and not a guaranteed working code. Kept low-key. */
.irae-promo-example-label {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--irae-ink-muted);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    vertical-align: middle;
}
.irae-promo-example .irae-promo-discount {
    opacity: 0.85;
}

/* Inline info button on example promotions, sitting right after the last
   sentence of the description. Reuses the claim popover behaviour. */
.irae-promo-info {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
}
.irae-promo-info-btn {
    position: static;
    top: auto;
    right: auto;
    width: 18px;
    height: 18px;
    border: none;
    background: #2563eb;
    color: #FFFFFF;
    box-shadow: none;
}
.irae-promo-info-btn:hover,
.irae-promo-info-btn[aria-expanded="true"] {
    background: #1d4ed8;
    transform: scale(1.08);
}
.irae-promo-meta-link {
    text-decoration: none;
    cursor: pointer;
}