/* ============================================================
   ASUS Level Up What Matters 2026 — DE-DE landing page
   Brand: ASUS Standard primary blue on dark navy background.
   Visual reference: international UWM microsite — DARK THEME.
     Screenshot 2026-05-12 at 17.08.01.png (Prizes section):
       - Dark navy/black with subtle grid pattern overlay
       - White bold all-caps section headlines (no gradient)
       - Bundle items as horizontal dark cards with product
         bullet-lists + product image, blue accent for cashback
       - Round filled blue primary buttons ("JOIN") + outline
         secondary
   Structural reference: ../proart-cashback-2026/es_es/
   Tokens cited in ../CLAUDE.md (ASUS Standard palette).
   ============================================================ */

:root {
    /* Brand tokens (ROG Level Up Cashback Promo 2026)
       Primary/secondary inherit from the ASUS palette; cyan is the
       neon hero-glow accent read from the supplied Key Visual
       (source-docs/ROG Level Up Cashback Promo 2000x720.png). */
    --asus-primary:        #006CE1;  /* deeper button blue */
    --asus-secondary:      #1442CC;  /* hover/active */
    --asus-secondary-1:    #ADCFF4;  /* runtime values, soft accents */
    --brand-cyan:          #1FB4FF;  /* hero glow / "300 € CASHBACK" */
    --brand-cyan-soft:     rgba(31, 180, 255, 0.30);
    --asus-error:          #FF3C45;
    --asus-success:        #00AD5D;

    /* Dark theme system colors (mirror UWM microsite) */
    --bg-base:        #0A1124;   /* deep navy */
    --bg-elevated:    #131C36;   /* slightly lighter for cards */
    --bg-elevated-2:  #1A2342;   /* hover */
    --bg-pattern:     rgba(255, 255, 255, 0.04);

    --text-on-dark:        #FFFFFF;
    --text-on-dark-soft:   #C8CFDC;
    --text-on-dark-muted:  #8A93A6;

    --border-soft:    rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.18);

    /* Derived */
    --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.4),
                      0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-hover:   0 0 0 1px var(--asus-primary),
                      0 6px 22px rgba(0, 108, 225, 0.30);
    --radius-card:    10px;
    --radius-pill:    999px;
    --radius-button:  3px;   /* near-square, matches HQ UWM page buttons */

    --main-font:     "Roboto", "Helvetica Neue", "Arial", sans-serif;
    --headline-font: "Roboto", "Helvetica Neue", "Arial", sans-serif;

    --main-font-size: 16px;
    --inner-content-width: 1120px;
    --inner-narrow: 880px;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Layout shell ---------- */

#lp-content {
    /* Base color — section-specific image backgrounds layered above */
    background: var(--bg-base);
    color: var(--text-on-dark);
    font-family: var(--main-font);
    font-size: var(--main-font-size);
    font-weight: 400;
    text-align: center;
    overflow: hidden;
}

/* Reusable section-background helpers.
   Source: asus.com/microsite/motherboard/upgrade-what-matters/v1/img/...
   Downloaded into ./img/ on 2026-05-13. Each section has a dark
   gradient overlay on top so foreground text stays readable. */
#lp-content .bg-prize {
    background:
        linear-gradient(180deg,
            rgba(10, 17, 36, 0.55) 0%,
            rgba(10, 17, 36, 0.75) 100%),
        url('../img/bg-prize-bg.jpg') center top / cover no-repeat,
        var(--bg-base);
}
#lp-content .bg-prize-special {
    background:
        linear-gradient(180deg,
            rgba(10, 17, 36, 0.65) 0%,
            rgba(10, 17, 36, 0.85) 100%),
        url('../img/bg-prize-bg-special.jpg') center top / cover no-repeat,
        var(--bg-base);
}
#lp-content .bg-rule {
    background:
        linear-gradient(180deg,
            rgba(10, 17, 36, 0.50) 0%,
            rgba(10, 17, 36, 0.85) 100%),
        url('../img/bg-rule-bg.jpg') center center / cover no-repeat,
        var(--bg-base);
}
#lp-content .bg-features {
    background:
        linear-gradient(180deg,
            rgba(10, 17, 36, 0.55) 0%,
            rgba(10, 17, 36, 0.80) 100%),
        url('../img/bg-features-bg-features.jpg') center top / cover no-repeat,
        var(--bg-base);
}
#lp-content .bg-media {
    background:
        linear-gradient(180deg,
            rgba(10, 17, 36, 0.60) 0%,
            rgba(10, 17, 36, 0.90) 100%),
        url('../img/bg-media-bg-media.jpg') center center / cover no-repeat,
        var(--bg-base);
}
#lp-content * {
    color: var(--text-on-dark-soft);
    font-family: var(--main-font);
    box-sizing: border-box;
}

#lp-content h1 { margin: 0; }
#lp-content h2 {
    color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-weight: 700;
    font-size: 2.5em;
    line-height: 1.1;
    margin: 0 0 0.5em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
#lp-content h3 {
    color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.3;
    margin: 1.3em 0 .4em;
    letter-spacing: 0.5px;
}
#lp-content h4 {
    color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-weight: 500;
    font-size: 1.05em;
    margin: .3em 0;
}
#lp-content p {
    color: var(--text-on-dark-soft);
    font-weight: 400;
    font-size: 1em;
    margin: .5em 1em;
    line-height: 1.6;
}
#lp-content p.legals,
#lp-content small {
    color: var(--text-on-dark-muted);
    font-size: 0.8em;
    line-height: 1.5;
}
#lp-content strong { color: var(--text-on-dark); font-weight: 600; }

/* Links */
#lp-content a:link,
#lp-content a:active,
#lp-content a:visited {
    color: var(--asus-primary);
    text-decoration: none;
    font-weight: 500;
}
#lp-content a:hover {
    color: var(--asus-secondary-1);
    text-decoration: underline;
}

/* ---------- lp-block primitives ---------- */

#lp-content .lp-block {
    width: var(--inner-content-width);
    max-width: 92%;
    margin: 2em auto;
    position: relative;
}
#lp-content .lp-block.narrow {
    width: var(--inner-narrow);
}
#lp-content .lp-block.wide {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

#lp-content hr {
    background: var(--border-soft);
    height: 1px;
    border: 0;
    margin: 3em auto;
    width: 90%;
    max-width: var(--inner-content-width);
}

/* ---------- Section 1: Hero ---------- */

#lp-content .hero {
    background: transparent;
    padding: 0;
}
/* Hero banner — <picture> swaps the crop by viewport; the <img>
   just needs to fill the width. */
#lp-content .headline picture,
#lp-content .headline img.header-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 800px) and (orientation: portrait) {
    #lp-content h2 { font-size: 1.8em; }
}

#lp-content .hero-info {
    background: transparent;
    padding: 32px 0 28px;
}
#lp-content .hero-info-inner {
    width: var(--inner-narrow);
    max-width: 92%;
    margin: 0 auto;
}
#lp-content .hero-info .subhead {
    color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-weight: 500;
    font-size: 1.4em;
    line-height: 1.4;
    margin: 0.6em auto;
}
#lp-content .hero-info .subhead .accent {
    color: var(--brand-cyan);
    font-weight: 700;
    text-shadow: 0 0 18px var(--brand-cyan-soft);
}

/* Hero tagline below the KV image */
#lp-content .hero-info .hero-tagline {
    color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 1em;
    opacity: 0.85;
}

#lp-content .hero-info .hero-intro {
    max-width: 760px;
    margin: 0 auto 0.4em;
    color: var(--text-on-dark);
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center;
}

#lp-content .runtimeInfo {
    max-width: 640px;
    margin: 1.8em auto 0.8em;
    text-align: left;
}
#lp-content .runtimeInfo .runtime-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0.75em 0;
    border-bottom: 1px solid var(--border-soft);
}
#lp-content .runtimeInfo .runtime-row:last-child { border-bottom: 0; }
#lp-content .runtimeInfo .runtime-label {
    color: var(--text-on-dark);
    font-weight: 500;
}
#lp-content .runtimeInfo .runtime-value {
    color: var(--asus-secondary-1);
    font-weight: 600;
}

@media (max-width: 800px) and (orientation: portrait) {
    #lp-content .runtimeInfo .runtime-row {
        flex-direction: column;
        gap: 2px;
        text-align: center;
    }
}

/* ---------- Section 2: Bundle Showcase ---------- */

/* The bundles/how-it-works/where-to-buy sections carry their
   vertical rhythm on the inner wrapper — section padding stays 0
   so the two don't stack. */
#lp-content .bundles {
    padding: 0;
}
#lp-content .bundles .bundles-intro {
    color: var(--text-on-dark-soft);
    max-width: 720px;
    margin: 0 auto 1.4em;
}

/* Sticky search bar above the grid */
/* Search field sits below the category tiles. Not sticky — an
   ancestor (#lp-content) has overflow:hidden, which disables
   position:sticky anyway, so it scrolls with the page. */
#lp-content .bundle-search {
    padding: 6px 0 18px;
    margin: 0 auto 18px;
}
#lp-content .bundle-search-inner {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}
#lp-content .bundle-search .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#lp-content .bundle-search input[type="search"] {
    width: 100%;
    padding: 0.85em 1em 0.85em 2.8em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    background: var(--bg-elevated);
    color: var(--text-on-dark);
    font-family: var(--main-font);
    font-size: 1em;
    line-height: 1.2;
    outline: none;
    transition: border-color 0.15s linear, box-shadow 0.15s linear;
}
#lp-content .bundle-search input[type="search"]:focus {
    border-color: var(--asus-primary);
    box-shadow: 0 0 0 3px rgba(0, 108, 225, 0.25);
}
#lp-content .bundle-search input[type="search"]::placeholder {
    color: var(--text-on-dark-muted);
}
#lp-content .bundle-search .search-icon {
    position: absolute;
    left: 1.1em;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-on-dark-muted);
    pointer-events: none;
}
#lp-content .bundle-search-count {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--text-on-dark-muted);
    text-align: center;
}

/* Tab bar — 6 categories. Near-square buttons, HQ UWM style:
   cyan fill on the active tab, black fill on the rest. Each tab
   stacks the two category pictograms above the label. */
#lp-content .bundle-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 1.4em auto 1.6em;
    padding: 0;
    max-width: 100%;
}
#lp-content .bundle-tab {
    appearance: none;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--text-on-dark);
    -webkit-text-fill-color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 1.1em 0.8em;
    border-radius: var(--radius-button);
    cursor: pointer;
    line-height: 1.25;
    transition: background-color 0.15s linear, color 0.15s linear,
                border-color 0.15s linear;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#lp-content .bundle-tab:hover {
    background: #15192a;
    border-color: var(--brand-cyan);
}
#lp-content .bundle-tab.is-active {
    background: var(--brand-cyan);
    border-color: rgba(255, 255, 255, 0.55);
    color: #0A1124;
    -webkit-text-fill-color: #0A1124;
}

/* Category pictograms — inline SVG, color follows the tab text */
#lp-content .bundle-tab .tab-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}
#lp-content .bundle-tab .tab-icon {
    display: block;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
/* Category pictograms are fully inline SVGs (one per tab — no <use>,
   no sprite, no shadow DOM) so plain CSS reaches every shape. The
   shapes are stroke-only outlines. The stroke colour is set EXPLICITLY
   per tab state below (not via currentColor inheritance, which proved
   unreliable across the <g stroke=…> presentation attribute):
     - inactive tab  -> white outline
     - active tab    -> near-black outline (on the cyan fill)
   non-scaling-stroke keeps the outline a constant 1.4 CSS px
   regardless of rendered size. */
#lp-content .tab-icon path,
#lp-content .tab-icon polyline,
#lp-content .tab-icon polygon,
#lp-content .tab-icon circle,
#lp-content .tab-icon line,
#lp-content .tab-icon rect,
#lp-content .tab-icon g {
    fill: none;
    stroke-width: 1.4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
/* Inactive tab — white outline */
#lp-content .bundle-tab .tab-icon path,
#lp-content .bundle-tab .tab-icon polyline,
#lp-content .bundle-tab .tab-icon polygon,
#lp-content .bundle-tab .tab-icon circle,
#lp-content .bundle-tab .tab-icon line,
#lp-content .bundle-tab .tab-icon rect,
#lp-content .bundle-tab .tab-icon g {
    stroke: #FFFFFF;
}
/* Active tab — near-black outline on the cyan fill */
#lp-content .bundle-tab.is-active .tab-icon path,
#lp-content .bundle-tab.is-active .tab-icon polyline,
#lp-content .bundle-tab.is-active .tab-icon polygon,
#lp-content .bundle-tab.is-active .tab-icon circle,
#lp-content .bundle-tab.is-active .tab-icon line,
#lp-content .bundle-tab.is-active .tab-icon rect,
#lp-content .bundle-tab.is-active .tab-icon g {
    stroke: #0A1124;
}
#lp-content .bundle-tab .tab-icon-plus {
    font-size: 1.5em;
    font-weight: 700;
    color: inherit;
    -webkit-text-fill-color: inherit;
    opacity: 0.7;
}
#lp-content .bundle-tab .tab-label {
    display: block;
    text-align: center;
}
#lp-content .bundle-tab .tab-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    -webkit-text-fill-color: inherit;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.5;
}
#lp-content .bundle-tab:not(.is-active) .tab-count {
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 700px) {
    #lp-content .bundle-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    #lp-content .bundle-tab .tab-icon { width: 52px; height: 52px; }
}
@media (max-width: 460px) {
    #lp-content .bundle-tabs {
        grid-template-columns: 1fr;
    }
    #lp-content .bundle-tab .tab-icon { width: 56px; height: 56px; }
}

/* Bundle category — one per tab, hidden by default */
#lp-content .bundle-category {
    display: none;
    margin-top: 0;
}
#lp-content .bundle-category.is-active { display: block; }

/* When a search filter is active, JS adds `is-searching` to the
   grid container; all categories are shown flat (no tabs) so
   matches across categories surface. */
#lp-content #bundle-grid.is-searching .bundle-category { display: block; }
#lp-content #bundle-grid.is-searching .bundle-category > h3 {
    display: inline-block;
    margin: 2em 0 1em;
}
#lp-content .bundle-category > h3 {
    display: none; /* hidden in tab mode — the tab IS the heading */
}

/* Bundle grid — UWM-style: horizontal cards with bullet list */
#lp-content .bundle-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
}

#lp-content .bundle-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 12px 20px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 20px;
    align-items: center;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.18s linear, transform 0.18s linear,
                background-color 0.18s linear;
}
#lp-content .bundle-card:hover {
    background: var(--bg-elevated-2);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}
#lp-content .bundle-card.is-hidden { display: none; }

#lp-content .bundle-card-id {
    grid-column: 1 / -1;
    color: var(--text-on-dark-muted);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

/* Product bullet list (left side) — compact two-row form: each product
   gets one row "KIND: Name (PN · EAN)" with the kind as an inline tag. */
#lp-content .bundle-products {
    list-style: none;
    margin: 0;
    padding: 0;
}
#lp-content .bundle-products li {
    position: relative;
    padding: 4px 0 4px 18px;
    line-height: 1.3;
}
#lp-content .bundle-products li + li {
    border-top: 1px dashed var(--border-soft);
}
#lp-content .bundle-products li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--asus-primary);
    background: transparent;
}
#lp-content .bundle-product-kind {
    display: inline-block;
    color: var(--asus-secondary-1);
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 6px 0 0;
    padding: 1px 6px;
    border: 1px solid var(--asus-secondary-1);
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: 1px;
}
#lp-content .bundle-product-name {
    display: inline;
    color: var(--text-on-dark);
    font-weight: 500;
    font-size: 0.95em;
    line-height: 1.3;
}
#lp-content .bundle-product-meta {
    display: block;
    color: var(--text-on-dark-muted);
    font-size: 0.72em;
    line-height: 1.3;
    margin-top: 1px;
}

/* Cashback badge (right side — supplied ROG cashback graphic,
   transparent PNG, one per amount: ./img/badge-cashback-{50,75,100,150}.png) */
#lp-content img.bundle-cashback-badge {
    display: block;
    width: 150px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/* Empty state */
#lp-content .bundle-empty {
    display: none;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
    padding: 36px 24px;
    margin: 0 auto;
    text-align: center;
}
#lp-content .bundle-empty.is-visible { display: block; }
#lp-content .bundle-empty h3 {
    color: var(--text-on-dark);
    margin: 0 0 0.4em;
    font-size: 1.2em;
}
#lp-content .bundle-empty p {
    color: var(--text-on-dark-soft);
    margin: 0 0 1.2em;
}

/* Stack vertically on narrower viewports */
@media (max-width: 700px) {
    #lp-content .bundle-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    #lp-content .bundle-card-id { text-align: left; }
    #lp-content .bundle-products li { text-align: left; }
    #lp-content img.bundle-cashback-badge {
        justify-self: center;
        width: 140px;
    }
}

/* ---------- Buttons ---------- */

/* Button shape — near-square, matches the HQ "Upgrade What Matters"
   page (image006.png reference): minimal radius, all-caps, thin
   light outline. Two fills: cyan primary, black secondary. */
#lp-content a.cta-button,
#lp-content a.tac-button,
#lp-content button.reset-button {
    display: inline-block;
    text-align: center;
    font-family: var(--headline-font);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.85em 2em;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background-color 0.15s linear, color 0.15s linear,
                box-shadow 0.15s linear;
    line-height: 1.2;
    min-width: 220px;
}

/* Primary — cyan fill, black label, light outline */
#lp-content a.cta-button {
    background: var(--brand-cyan);
    color: #0A1124;
    -webkit-text-fill-color: #0A1124;
    border: 1px solid rgba(255, 255, 255, 0.55);
}
#lp-content a.cta-button:hover {
    background: #4FC6FF;
    border-color: var(--text-on-dark);
    color: #0A1124;
    -webkit-text-fill-color: #0A1124;
    text-decoration: none;
}

/* Secondary — black fill, white label, light outline */
#lp-content a.tac-button,
#lp-content button.reset-button {
    background: #000;
    color: var(--text-on-dark);
    -webkit-text-fill-color: var(--text-on-dark);
    border: 1px solid rgba(255, 255, 255, 0.55);
}
#lp-content a.tac-button:hover,
#lp-content button.reset-button:hover {
    background: #15192a;
    border-color: var(--brand-cyan);
    color: var(--text-on-dark);
    -webkit-text-fill-color: var(--text-on-dark);
    text-decoration: none;
}

/* CTA area */
#lp-content .cta_area {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 1.8em auto 0;
    align-items: flex-start;
}
#lp-content .cta_area > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#lp-content .cta_area > div p {
    color: var(--text-on-dark-muted);
    font-size: 0.85em;
    margin-top: 0.4em;
}

/* ---------- Section 3: How it works ---------- */

#lp-content .how-it-works {
    padding: 0;
}
#lp-content .how-it-works ol {
    text-align: left;
    max-width: 760px;
    margin: 0 auto;
    counter-reset: steps;
    list-style: none;
    padding: 0;
}
#lp-content .how-it-works ol li {
    counter-increment: steps;
    margin: 1.2em 0;
    padding: 0 0 0 70px;
    position: relative;
    color: var(--text-on-dark-soft);
    line-height: 1.6;
    min-height: 50px;
}
#lp-content .how-it-works ol li:before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: -4px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--asus-primary);
    color: var(--text-on-dark);
    -webkit-text-fill-color: var(--text-on-dark);
    font-family: var(--headline-font);
    font-size: 1.4em;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 4px rgba(0, 108, 225, 0.18);
}
#lp-content .how-it-works ol li strong { color: var(--text-on-dark); }

#lp-content .verify-note {
    text-align: center;
    color: var(--text-on-dark-muted);
    font-size: 0.85em;
    margin-top: 0.6em;
}

/* ---------- Section 4: Where to buy (dealer list) ---------- */

#lp-content .where-to-buy {
    padding: 0;
    text-align: center;
}
#lp-content .where-to-buy .dealers-intro {
    max-width: 600px;
    margin: 0 auto 1.4em;
    color: var(--text-on-dark-soft);
}
#lp-content .where-to-buy h3 {
    color: var(--text-on-dark);
    font-size: 1.05em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.2em 0 0.6em;
}
/* Dealer list — multi-column, mirrors the ProArt es_es structure */
#lp-content ul.dealersList {
    list-style: none;
    margin: 0.5em auto 0;
    padding: 0;
    columns: 3;
    max-width: 620px;
}
#lp-content ul.dealersList li {
    margin: 0.45em 0;
    padding: 0;
    break-inside: avoid;
}
#lp-content ul.dealersList li a {
    color: var(--brand-cyan);
    font-weight: 600;
}
#lp-content ul.dealersList li a:hover {
    color: var(--text-on-dark);
}
@media (max-width: 700px) {
    #lp-content ul.dealersList { columns: 2; }
}
@media (max-width: 420px) {
    #lp-content ul.dealersList { columns: 1; }
}

/* ---------- Mobile niceties ---------- */

@media (max-width: 600px) {
    #lp-content h2 { font-size: 1.8em; letter-spacing: 1px; }
    #lp-content img.bundle-cashback-badge { width: 120px; }
    #lp-content a.cta-button,
    #lp-content a.tac-button,
    #lp-content button.reset-button {
        width: 100%;
        min-width: 0;
    }
}

/* Outer width cap — was in the standalone inline <style>;
   needed here so the WordPress fragment needs no inline style. */
.container { max-width: 1240px; margin: 0 auto; }

.tab-label:after, .tab-label:before {
    background: unset !important;
    border: unset !important;
}
.content-main--inner {
    padding: 0 !important;
}
.container.effekt-media-landing, .content-main.container {
    max-width: 100%;
}

.hero.headline img {
    max-width: 1920px !important;
    margin: auto !important;
}
.bundle-tab .tab-count {
    display: none !important;
}
.container.link-content .container {
    padding: 0 !important;
}
.bundle-product-meta a {
    display: block;
}