/* ==========================================================================
   drucken24.at / toner247.at — dr24_theme custom design system
   Source: design_handoff_drucken24 (Konzept.dc.html + README.md)
   This file is the ONE override point NOVA's own template.xml Minify block
   already wires up (themes/clear/custom.css) — everything in here is new,
   nothing here replaces a NOVA file. Safe to extend across future pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted (DSGVO: no Google-hosted font requests), latin +
   latin-ext subsets only (DACH market). Outfit = headlines/prices/buttons/
   numbers. IBM Plex Sans = body/meta/labels/article numbers.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/outfit-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/outfit-regular-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/outfit-medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/outfit-medium-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/outfit-semibold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/outfit-semibold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/outfit-bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/outfit-bold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/outfit-extrabold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/outfit-extrabold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibmplexsans-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibmplexsans-regular-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibmplexsans-medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibmplexsans-medium-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibmplexsans-semibold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibmplexsans-semibold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/ibmplexsans-bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/ibmplexsans-bold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Typography */
    --d24-font-display: 'Outfit', sans-serif;
    --d24-font-body: 'IBM Plex Sans', system-ui, sans-serif;

    /* Text / ink */
    --d24-ink: #0F2233;
    --d24-text-secondary: #26404C;
    --d24-text-tertiary: #46626E;
    --d24-text-weak: #6B858F;
    --d24-placeholder: #90A8B0;

    /* Borders */
    --d24-border-strong: #0F2233;
    --d24-border-field: #A9C4C8;
    --d24-border-light-1: #DCE9EA;
    --d24-border-light-2: #D5E5E6;
    --d24-border-light-3: #E3EEEF;

    /* Surfaces */
    --d24-surface-white: #FFFFFF;
    --d24-surface-input: #FAFDFD;
    --d24-surface-inactive: #EFF6F6;
    --d24-page-bg: linear-gradient(170deg, #E7F2F2 0%, #EDF5F2 55%, #F3F4EC 100%);

    /* Primary / CTA (turquoise) */
    --d24-primary: #0098AD;
    --d24-primary-hover: #007D90;
    --d24-nav-band: #0B5C6B;
    --d24-hero-gradient: linear-gradient(155deg, #0B5C6B 0%, #0E8C93 48%, #1BB39A 100%);
    --d24-hero-text: #FFFFFF;
    --d24-hero-text-secondary: #C7F5EA;
    --d24-hero-ondark-link: #7BE8CB;

    /* Mint — compatibility / trust */
    --d24-mint-border: #17C4A0;
    --d24-mint-surface: #DFF7EF;
    --d24-mint-text: #0A6E56;
    --d24-mint-light: #EFFAF7;
    --d24-mint-ondark: #7BE8CB;

    /* Yellow — XL / high capacity */
    --d24-yellow-border: #FFC94D;
    --d24-yellow-surface: #FFF4D6;
    --d24-yellow-text: #6B4A00;

    /* Blue — sets / multipacks */
    --d24-blue-border: #2F7BEE;
    --d24-blue-surface: #E6EFFF;
    --d24-blue-text: #1B4FA8;

    /* Real ink colors (only for actual cartridge color, never decorative) */
    --d24-ink-black: #2B2937;
    --d24-ink-pigment-black: #0F2233;
    --d24-ink-cyan: #22B8CF;
    --d24-ink-magenta: #E64980;
    --d24-ink-yellow: #FCC419;

    /* Category dots */
    --d24-cat-ink: #22B8CF;
    --d24-cat-toner: #5BA8FF;
    --d24-cat-drums: #3ED89B;
    --d24-cat-labels: #FFC94D;
    --d24-cat-ribbons: #FF7BA8;
    --d24-cat-accessories: #9FBCC4;

    /* CMYK bar */
    --d24-cmyk-gradient: linear-gradient(90deg, #0B5C6B 0%, #0E8C93 12%, #22B8CF 27%, #12B76A 44%, #A8CF2E 57%, #FCC419 71%, #F2870A 84%, #E64980 100%);

    /* Radii */
    --d24-radius-card: 18px;
    --d24-radius-card-lg: 20px;
    --d24-radius-small: 12px;
    --d24-radius-chip: 999px;
    --d24-radius-mobile-frame: 32px;

    /* Shadows */
    --d24-shadow-offset: 6px 6px 0 rgba(15, 34, 51, .1);
    --d24-shadow-offset-lg: 8px 8px 0 rgba(15, 34, 51, .12);

    /* Spacing */
    --d24-pad-desktop: 32px;
    --d24-pad-mobile: 16px;
    --d24-gap-sm: 12px;
    --d24-gap-md: 18px;
    --d24-gap-lg: 24px;

    /* Transitions */
    --d24-transition: 150ms ease-out;
}

/* --------------------------------------------------------------------------
   3. Base / site-wide typography — applies everywhere, not just the 5
   redesigned screens, per the design brief's intent that this is the
   shop's actual typography and color system.
   -------------------------------------------------------------------------- */
body {
    font-family: var(--d24-font-body);
    color: var(--d24-ink);
    background: var(--d24-page-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* !important: clear.css sets heading font-family via Bootstrap's own
   h1..h6 rule (Montserrat) plus component-level overrides elsewhere
   (e.g. Open Sans on OPC widgets) that outrank a plain element selector
   regardless of cascade order - this is the intentional, sitewide
   typography override this file exists for. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.d24-display {
    font-family: var(--d24-font-display) !important;
    letter-spacing: -.02em;
}

a {
    color: var(--d24-primary);
    transition: color var(--d24-transition);
}
a:hover {
    color: var(--d24-ink);
}

/* Focus ring — kept visible everywhere per the brief's accessibility rule */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--d24-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. CMYK gradient bar — a real element (never border-image, doesn't
   survive image/PDF export), 6px tall, sits directly under the header.
   -------------------------------------------------------------------------- */
.d24-cmyk-bar {
    height: 6px;
    background: var(--d24-cmyk-gradient);
    width: 100%;
}

/* --------------------------------------------------------------------------
   5. Badges — color always means the same thing everywhere:
   mint = compatibility/trust, yellow = XL, blue = set, turquoise = price/CTA.
   -------------------------------------------------------------------------- */
.d24-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--d24-radius-chip);
    padding: 4px 11px;
    font-family: var(--d24-font-body);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.d24-badge--mint {
    background: var(--d24-mint-surface);
    color: var(--d24-mint-text);
    border: 1.5px solid var(--d24-mint-border);
}
.d24-badge--xl {
    background: var(--d24-yellow-surface);
    color: var(--d24-yellow-text);
    border: 1.5px solid var(--d24-yellow-border);
}
.d24-badge--set {
    background: var(--d24-blue-surface);
    color: var(--d24-blue-text);
    border: 1.5px solid var(--d24-blue-border);
}
.d24-badge--discount {
    background: var(--d24-primary);
    color: #fff;
    border: none;
    font-family: var(--d24-font-display);
    font-weight: 800;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.d24-card {
    background: var(--d24-surface-white);
    border: 1.5px solid var(--d24-border-light-2);
    border-radius: var(--d24-radius-card);
}
.d24-card--emphasized {
    background: var(--d24-surface-white);
    border: 2px solid var(--d24-border-strong);
    border-radius: var(--d24-radius-card-lg);
    box-shadow: var(--d24-shadow-offset);
}
.d24-card--emphasized-lg {
    box-shadow: var(--d24-shadow-offset-lg);
}
.d24-card:hover,
.d24-card--interactive:hover {
    border-color: var(--d24-border-field);
}

/* --------------------------------------------------------------------------
   7. Buttons — new .d24-btn classes, used explicitly in redesigned
   templates. Does not touch Bootstrap's .btn so not-yet-redesigned pages
   (checkout, account, login) keep their default NOVA appearance.
   -------------------------------------------------------------------------- */
.d24-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--d24-font-display);
    font-weight: 700;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--d24-transition), background-color var(--d24-transition);
    min-height: 44px;
    padding: 0 22px;
    font-size: 15px;
}
.d24-btn:hover {
    filter: brightness(0.92);
}
.d24-btn--primary {
    background: var(--d24-primary);
    color: #fff;
}
.d24-btn--primary:hover {
    color: #fff;
}
.d24-btn--dark {
    background: var(--d24-ink);
    color: #fff;
}
.d24-btn--dark:hover {
    color: #fff;
}
.d24-btn--outline {
    background: transparent;
    color: var(--d24-ink);
    border: 2px solid var(--d24-ink);
}

/* --------------------------------------------------------------------------
   8. Price display
   -------------------------------------------------------------------------- */
.d24-price {
    font-family: var(--d24-font-display);
    font-weight: 800;
    color: var(--d24-ink);
}
.d24-price--original {
    font-family: var(--d24-font-body);
    font-size: 13px;
    color: var(--d24-text-weak);
    text-decoration: line-through;
    font-weight: 400;
}
.d24-price--savings {
    font-family: var(--d24-font-body);
    font-size: 12.5px;
    color: var(--d24-text-secondary);
}

/* --------------------------------------------------------------------------
   9. Real ink color swatches — only ever represents the actual cartridge
   color of an article, never decorative.
   -------------------------------------------------------------------------- */
.d24-ink-swatch {
    display: inline-block;
    border-radius: 50%;
    border: 1.5px solid rgba(15, 34, 51, .15);
    flex: none;
}
.d24-ink-swatch[data-ink="black"] { background: var(--d24-ink-black); }
.d24-ink-swatch[data-ink="pigmentblack"] { background: var(--d24-ink-pigment-black); }
.d24-ink-swatch[data-ink="cyan"] { background: var(--d24-ink-cyan); }
.d24-ink-swatch[data-ink="magenta"] { background: var(--d24-ink-magenta); }
.d24-ink-swatch[data-ink="yellow"] { background: var(--d24-ink-yellow); }
.d24-ink-swatch[data-ink="multicolor"] {
    background: conic-gradient(var(--d24-ink-cyan), var(--d24-ink-magenta), var(--d24-ink-yellow), var(--d24-ink-cyan));
}

/* --------------------------------------------------------------------------
   10. Category dots (nav + boxes)
   -------------------------------------------------------------------------- */
.d24-cat-dot { display: inline-block; border-radius: 50%; flex: none; }
.d24-cat-dot[data-cat="tinte"] { background: var(--d24-cat-ink); }
.d24-cat-dot[data-cat="toner"] { background: var(--d24-cat-toner); }
.d24-cat-dot[data-cat="trommeln"] { background: var(--d24-cat-drums); }
.d24-cat-dot[data-cat="etiketten"] { background: var(--d24-cat-labels); }
.d24-cat-dot[data-cat="farbbaender"] { background: var(--d24-cat-ribbons); }
.d24-cat-dot[data-cat="zubehoer"] { background: var(--d24-cat-accessories); }

/* --------------------------------------------------------------------------
   11. Generic placeholder product image (until real photos are supplied)
   -------------------------------------------------------------------------- */
.d24-img-placeholder {
    background: repeating-linear-gradient(135deg, #E6F1F2 0 8px, #D6E7E9 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--d24-font-body);
    font-size: 10.5px;
    color: var(--d24-text-weak);
    text-align: center;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   12. Service bar (topbar) — layout/header_top_bar.tpl override
   -------------------------------------------------------------------------- */
.d24-service-bar {
    background: var(--d24-ink);
    color: #E4F1F3;
    font-family: var(--d24-font-body);
    font-size: 13.5px;
    padding: 9px var(--d24-pad-desktop);
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
}
.d24-service-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d24-mint-border);
    margin-right: 7px;
}
.d24-service-item--right {
    margin-left: auto;
}
@media (max-width: 767px) {
    .d24-service-bar { padding: 8px var(--d24-pad-mobile); font-size: 12px; gap: 14px; }
    .d24-service-item--hide-md { display: none; }
}

/* --------------------------------------------------------------------------
   13. Logo / wordmark — layout/header_logo.tpl override
   -------------------------------------------------------------------------- */
.d24-wordmark-text {
    font-family: var(--d24-font-display);
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -.03em;
    color: var(--d24-ink);
}
.d24-wordmark-accent {
    color: var(--d24-primary);
}
.d24-wordmark:hover .d24-wordmark-text {
    color: var(--d24-ink);
}

/* --------------------------------------------------------------------------
   14. Header search field + live-search dropdown —
   snippets/search_form.tpl override + js/custom.js
   -------------------------------------------------------------------------- */
.d24-search-wrapper {
    position: relative;
}
.d24-search-inputgroup {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--d24-surface-input);
    border: 2px solid var(--d24-border-strong);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
}
.d24-search-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--d24-font-body);
    font-size: 15px;
    color: var(--d24-ink);
    flex: 1;
    height: auto !important;
    padding: 9px 0 !important;
}
.d24-search-input::placeholder {
    color: var(--d24-placeholder);
}
.d24-search-input:focus {
    outline: none;
}
.d24-search-submit {
    background: var(--d24-primary) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 9px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
}
.d24-search-submit:hover {
    filter: brightness(0.92);
}

.d24-search-results {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--d24-surface-white);
    border: 1.5px solid var(--d24-border-light-1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 34, 51, .14);
    max-height: 70vh;
    overflow-y: auto;
}
.d24-search-group-head {
    padding: 9px 16px;
    font-family: var(--d24-font-body);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
}
.d24-search-group-head--printers {
    background: var(--d24-mint-light);
    color: var(--d24-mint-text);
}
.d24-search-group-head--articles {
    background: var(--d24-blue-surface);
    color: var(--d24-blue-text);
}
.d24-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--d24-border-light-3);
    text-decoration: none;
    color: var(--d24-ink);
}
.d24-search-row:hover,
.d24-search-row.is-active {
    background: var(--d24-surface-inactive);
    color: var(--d24-ink);
}
.d24-search-row-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: none;
}
.d24-search-row-icon--mint {
    background: var(--d24-mint-surface);
    color: var(--d24-mint-text);
}
.d24-search-row-thumb {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex: none;
}
.d24-search-row-name {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d24-search-row-count,
.d24-search-row-nr {
    font-family: var(--d24-font-body);
    font-size: 13px;
    color: var(--d24-text-weak);
    flex: none;
}
.d24-search-row-cta {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--d24-primary);
    flex: none;
    white-space: nowrap;
}
.d24-search-row-price {
    margin-left: auto;
    font-family: var(--d24-font-display);
    font-weight: 700;
    font-size: 15px;
    flex: none;
    white-space: nowrap;
}
.d24-search-all-results,
.d24-search-empty {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
}
.d24-search-all-results {
    font-weight: 700;
    color: var(--d24-primary);
    text-decoration: none;
}
.d24-search-empty {
    color: var(--d24-text-weak);
}

/* --------------------------------------------------------------------------
   15. Footer — layout/footer.tpl (block override)
   -------------------------------------------------------------------------- */
.d24-footer {
    background: var(--d24-ink);
    color: #C7D6DA;
}
.d24-footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 26px var(--d24-pad-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-family: var(--d24-font-body);
    font-size: 13.5px;
}
.d24-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.d24-footer-links a {
    color: #C7D6DA;
}
.d24-footer-links a:hover {
    color: #fff;
}
.d24-footer-vat {
    margin-left: auto;
    color: var(--d24-mint-ondark);
}
@media (max-width: 767px) {
    .d24-footer-inner { padding: 20px var(--d24-pad-mobile); font-size: 12.5px; }
    .d24-footer-vat { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   16. Homepage — page/index.tpl override
   -------------------------------------------------------------------------- */
.d24-hero {
    background: var(--d24-hero-gradient);
    padding: 44px var(--d24-pad-desktop) 40px;
}
.d24-hero-inner {
    max-width: 720px;
}
.d24-hero-title {
    font-family: var(--d24-font-display);
    font-weight: 800;
    font-size: 50px;
    line-height: 1.03;
    letter-spacing: -.03em;
    color: var(--d24-hero-text);
    margin: 0;
}
.d24-hero-subline {
    font-size: 19px;
    color: var(--d24-hero-text-secondary);
    margin: 16px 0 26px;
    max-width: 52ch;
}
.d24-hero-search-card {
    padding: 22px;
    margin-bottom: 20px;
}
.d24-hero-search-label {
    display: block;
    font-family: var(--d24-font-display);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 10px;
    color: var(--d24-ink);
}
.d24-hero-search-wrapper {
    position: relative;
}
.d24-hero-search-inputgroup {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--d24-mint-border);
    border-radius: 14px;
    padding: 15px 18px;
    background: #FBFFFE;
}
.d24-hero-search-icon {
    font-size: 19px;
    color: var(--d24-mint-text);
}
.d24-hero-search-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1;
    font-size: 18px;
    font-family: var(--d24-font-body);
    color: var(--d24-ink);
    padding: 0 !important;
    height: auto !important;
}
.d24-hero-search-input::placeholder {
    color: var(--d24-placeholder);
}
.d24-hero-search-input:focus {
    outline: none;
}
.d24-hero-search-results {
    top: calc(100% + 8px);
}

.d24-wizard-card {
    border: 1.5px dashed var(--d24-border-field);
    border-radius: var(--d24-radius-card-lg);
    padding: 22px;
    background: rgba(255, 255, 255, .55);
}
.d24-wizard-card-head {
    font-size: 15px;
    color: var(--d24-hero-text);
    margin-bottom: 16px;
}
.d24-wizard-card-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}
.d24-wizard-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.d24-wizard-col--empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--d24-hero-text-secondary);
    font-size: 13.5px;
    border: 1.5px dashed rgba(255, 255, 255, .35);
    border-radius: 14px;
    padding: 16px;
}
.d24-wizard-brand-btn {
    display: inline-block;
    background: #fff;
    border: 1.5px solid var(--d24-border-strong);
    border-radius: var(--d24-radius-chip);
    padding: 7px 16px;
    font-family: var(--d24-font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--d24-ink);
}
.d24-wizard-brand-btn:hover {
    background: var(--d24-ink);
    color: #fff;
}
.d24-wizard-empty {
    color: var(--d24-hero-text-secondary);
    font-size: 14px;
}

.d24-trust-strip {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    padding: 32px var(--d24-pad-desktop);
    max-width: 1600px;
    margin: 0 auto;
}
.d24-trust-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    flex: 1 1 600px;
}
.d24-trust-card {
    background: var(--d24-surface-white);
    border: 1.5px solid var(--d24-border-light-2);
    border-radius: var(--d24-radius-small);
    padding: 16px 18px;
    flex: 1 1 220px;
}
.d24-trust-title {
    font-family: var(--d24-font-display);
    font-weight: 700;
    font-size: 15.5px;
    margin-bottom: 4px;
}
.d24-trust-sub {
    font-size: 13.5px;
    color: var(--d24-text-tertiary);
}
.d24-payment-box {
    background: var(--d24-ink);
    color: #fff;
    border-radius: var(--d24-radius-card);
    padding: 18px 20px;
    flex: 0 0 300px;
}
.d24-payment-box-title {
    font-family: var(--d24-font-display);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}
.d24-payment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.d24-payment-chip {
    background: rgba(255, 255, 255, .12);
    border-radius: var(--d24-radius-chip);
    padding: 5px 12px;
    font-size: 12.5px;
}

.d24-bestsellers {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px var(--d24-pad-desktop) 32px;
}
.d24-bestsellers-title {
    font-size: 22px;
    margin-bottom: 18px;
}
.d24-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.d24-product-card {
    background: var(--d24-surface-white);
    border: 1.5px solid var(--d24-border-light-2);
    border-radius: var(--d24-radius-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.d24-product-image {
    height: 110px;
    width: 100%;
    object-fit: contain;
    margin: 8px 0;
}
.d24-product-title {
    font-family: var(--d24-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
}
.d24-product-title a {
    color: var(--d24-ink);
}
.d24-product-price {
    margin: 8px 0;
}
.d24-product-price .d24-price {
    font-size: 24px;
}
.d24-product-btn {
    width: 100%;
    margin-top: 8px;
}
.d24-product-form {
    margin: 0;
}
@media (max-width: 991px) {
    .d24-product-grid { grid-template-columns: repeat(2, 1fr); }
    .d24-wizard-card-columns { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .d24-hero { padding: 28px var(--d24-pad-mobile) 26px; }
    .d24-hero-title { font-size: 27px; }
    .d24-hero-subline { font-size: 15px; }
    .d24-trust-strip { padding: 24px var(--d24-pad-mobile); }
    .d24-payment-box { flex: 1 1 100%; }
    .d24-product-grid { grid-template-columns: 1fr 1fr; }
    .d24-bestsellers { padding: 8px var(--d24-pad-mobile) 24px; }
}