/* ==========================================================================
   Niveláky – site styles ("stavebný" yellow / black theme)
   Single stylesheet, no framework. Organised as:
   1. Design tokens        4. Layout helpers      7. Sections (landing)
   2. Reset / base         5. Header / nav        8. Blog
   3. Typography           6. Footer              9. Forms / utilities
   … and at the very end "10. Niveláky theme" – the layer that makes this site look
   different from rotacnelasery.sk (dark header, yellow accents, square corners,
   condensed headings). The platform sections above stay as close to rotacnelasery.sk
   as possible so fixes can be copied between the shops.
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
    --ink: #141414;
    --ink-soft: #444b57;
    --ink-faint: #6b7280;
    --line: #e4e7ec;
    --bg: #ffffff;
    --bg-muted: #f5f7fa;
    --bg-dark: #121212;

    --brand: #eac60b;          /* Niveláky yellow (old nivelaky.sk palette) – fills, bars, buttons */
    --brand-dark: #7a6000;     /* dark ochre – links and text accents on white (contrast 6:1) */
    --brand-light: #fff4bf;    /* pale yellow – tints, section backgrounds */
    --brand-hover: #d4b200;    /* yellow button hover */
    --on-brand: #141414;       /* text on yellow – always dark, never white */
    --brand-green: #1f8a4c;     /* secondary accent (in-stock, success) */
    --focus: #2563eb;

    --radius: 3px;             /* square, "workshop" look – rotacnelasery.sk uses 12px */
    --radius-sm: 2px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, .08), 0 12px 24px -8px rgba(16, 24, 40, .12);

    --container: 1140px;
    --gap: 1.5rem;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
}

/* Barlow Condensed (SIL OFL 1.1, wwwroot/fonts/OFL.txt) – self-hosted, no Google Fonts request. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* guard against accidental horizontal scroll on mobile */
}

img { max-width: 100%; height: auto; display: block; }

/* Grid and flex children may not shrink below their content by default, which
   can push images wider than a phone screen. Allow them to shrink. */
.grid > *, .hero__inner > * { min-width: 0; }

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* 3. Typography --------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.1rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

/* "O nás" – registered logo, links to the trademark register */
.about-logo { display: block; width: max-content; margin: 0 0 1.1rem; }
.about-logo img { display: block; height: 6.5rem; width: auto; }
.about-logo:hover { opacity: .85; }

/* "O nás" – fotogaléria (slideshow) */
.slideshow { position: relative; }
.slideshow__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--bg-muted);
}
.slideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .8s ease;
}
.slideshow__slide.is-active { opacity: 1; }
/* No-JS fallback: show only the first slide. */
.slideshow:not(.is-ready) .slideshow__slide:first-child { opacity: 1; }

.slideshow__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .8rem;
}
.slideshow__dot {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.slideshow__dot:hover { background: var(--ink-faint); }
.slideshow__dot.is-active { background: var(--brand); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
    .slideshow__slide { transition: none; }
}

.eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .75rem;
}

.lead { font-size: 1.15rem; color: var(--ink-soft); }

/* 4. Layout helpers --------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--muted { background: var(--bg-muted); }
.section--dark { background: var(--bg-dark); color: #e7eaef; }
.section--dark h2, .section--dark h3 { color: #fff; }
/* White feature cards inside a dark section keep dark headings. */
.section--dark .feature h3 { color: var(--ink); }
.section--dark .lead { color: #b9c0cc; }

.section__head { max-width: 46rem; margin-bottom: 2.5rem; }
.section__head--center { margin-inline: auto; text-align: center; }

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

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(127, 127, 127, .12); }
.btn--danger { color: #a81d1d; }
.btn--danger.btn--primary { background: #a81d1d; color: #fff; }
.btn--danger.btn--primary:hover { background: #861515; }
.btn--block { width: 100%; }
.btn:disabled, .btn[disabled] { cursor: default; opacity: .8; }
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
    content: "";
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    animation: btn-spin .6s linear infinite;
}
.btn--ghost.btn--loading::after, .btn--line.btn--loading::after, .btn--plain.btn--loading::after {
    border-color: rgba(0, 0, 0, .2);
    border-top-color: var(--ink);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Full-page "sending..." overlay shown while a protected form is being submitted.
   Sits above everything (including the form itself), so nothing underneath can be
   clicked or edited while it's up - no need to disable individual form fields
   (which would drop their values from the submit). */
.submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 31, .55);
}
.submit-overlay[hidden] { display: none; }
.submit-overlay__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem 2.75rem;
    text-align: center;
}
.submit-overlay__box p { margin: 0; font-weight: 600; color: var(--ink); }
.submit-overlay__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--brand);
    animation: btn-spin .7s linear infinite;
}

/* 5. Header / nav --------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
}

/* Second header row: centered site search. */
.site-header__searchrow { border-top: 1px solid var(--line); background: var(--bg-muted); }
.site-header__searchrow .container { display: flex; justify-content: center; padding-block: .55rem; }
.header-search {
    display: flex;
    width: 100%;
    max-width: 32rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.header-search input {
    flex: 1;
    border: 0;
    padding: .55rem 1rem;
    font: inherit;
    background: transparent;
}
.header-search input:focus { outline: none; }
.header-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    border: 0;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}
.header-search button:hover { background: var(--brand-dark); }
.header-search button svg { width: 1.1rem; height: 1.1rem; }

.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); font-weight: 700; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 2.4rem; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
/* The brand tagline is long: it wraps onto two lines, so the header row (9 menu items in
   German / Hungarian) still fits the 1440 px header column. */
.brand__text small { font-weight: 500; color: var(--ink-faint); font-size: .74rem; max-width: 12rem; }

/* Center navigation: grows to fill the space between brand and actions. */
.nav { display: flex; align-items: center; justify-content: center; gap: .2rem; flex: 1; }
.nav a {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .7rem;
    border-radius: 6px;
    white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--bg-muted); text-decoration: none; }
.nav a.is-active { color: var(--brand-dark); background: rgba(234, 198, 11, .08); }

/* Right-hand actions: account link + cart. */
.site-header__actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.header-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    font: inherit;
    color: var(--ink-soft);
    font-size: .88rem;
    font-weight: 500;
    padding: .5rem .6rem;
    border-radius: 6px;
    cursor: pointer;
}
.header-link:hover { color: var(--ink); background: var(--bg-muted); }
.header-link svg { width: 1.15rem; height: 1.15rem; }
.header-cart { position: relative; }
.header-cart__count {
    position: absolute;
    top: .1rem; right: .05rem;
    min-width: 1rem; height: 1rem;
    padding: 0 .2rem;
    background: var(--brand);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    border-radius: 999px;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .5rem;
    cursor: pointer;
}
.nav-toggle svg { display: block; width: 1.5rem; height: 1.5rem; }

/* The header row (brand, 9 menu items, language, account, cart) needs more room than the
   1140 px content column, most of all in German and Hungarian: the header gets a wider
   column, and on narrower screens "/ Registrácia", then the tagline give way and the menu
   tightens before it collapses into the mobile menu (1100 px). */
.site-header .container { max-width: 1440px; }
@media (max-width: 1480px) {
    .nav a { padding-inline: .5rem; }
    .header-link__register { display: none; }
}
@media (max-width: 1400px) {
    .brand__text small { display: none; }
}
@media (max-width: 1240px) {
    .nav { gap: 0; }
    .nav a { padding-inline: .35rem; font-size: .9rem; }
}

@media (max-width: 1100px) {
    .nav-toggle { display: block; }
    .header-link__register { display: none; } /* keep only "Prihlásenie" label */
    .nav {
        position: absolute;
        inset: 4.25rem 0 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        padding: .5rem 1rem 1rem;
        box-shadow: var(--shadow-md);
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: .85rem .5rem; border-radius: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
    /* Icon-only account button — but not the cart badge, which is also a
       <span> inside a .header-link and must stay visible on mobile. */
    .header-link:not(.header-cart) span { display: none; }
}
/* Narrow phones: brand text and the icons don't fit next to each other – drop the
   tagline first, then the name (the registered logo stays and carries the name as alt). */
@media (max-width: 480px) {
    .brand__text small { display: none; }
}
@media (max-width: 400px) {
    .site-header__inner { gap: .5rem; }
    .brand__text { display: none; }
}

/* 6. Footer ------------------------------------------------------- */
.site-footer { background: var(--bg-dark); color: #aeb6c2; font-size: .92rem; }
.site-footer a { color: #d7dce4; }
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    padding-block: 3rem 2rem;
}
.site-footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer__brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.site-footer__brand:hover { text-decoration: none; }
.site-footer__brand img { height: 2.4rem; width: auto; }
.site-footer__contact li { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .7rem; }
.site-footer__contact svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--brand); margin-top: .15rem; }
.site-footer__contact a { color: #d7dce4; }
.site-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: 1.25rem;
    font-size: .82rem;
    color: #7f8896;
}
.site-footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-footer__legal-text { flex: 1 1 auto; }
.site-footer__credit-block { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex-shrink: 0; }
.site-footer__credit { color: #7f8896; white-space: nowrap; }
.site-footer__credit:hover { color: #d7dce4; }
.site-footer__version {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    letter-spacing: .04em;
    color: #7f8896;
    white-space: nowrap;
}
@media (max-width: 800px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .site-footer__legal-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .site-footer__credit-block { align-items: flex-start; }
}

/* 7. Sections (landing) ----------------------------------------- */

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: #0f1830; /* fallback behind the image */
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.hero::after { /* readability + brand tint over the illustration */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 500px at 15% 0%, rgba(234, 198, 11, .35), transparent 60%),
        linear-gradient(180deg, rgba(11, 17, 33, .82) 0%, rgba(11, 17, 33, .72) 55%, rgba(11, 17, 33, .9) 100%);
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero .eyebrow { color: #ff6b6b; }
.hero h1 { color: #fff; text-wrap: balance; }
.hero .lead { color: #d5dae6; }
.hero__points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.hero__points li { display: flex; align-items: flex-start; gap: .6rem; color: #e7eaf2; font-size: .96rem; }
.hero__points svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: .15rem; color: #4ade80; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.hero__note { margin-top: 1rem; font-size: .88rem; color: #aab2c5; }
.hero__note a { color: #fff; }

.hero__card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .5);
    padding: .65rem;
    color: var(--ink);
}
.hero__card img { width: 100%; border-radius: var(--radius-sm); }

@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__card { order: -1; }
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
}
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; }

/* Feature cards */
.feature {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.feature__icon {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(234, 198, 11, .1);
    color: var(--brand);
    margin-bottom: .9rem;
}
.feature__icon svg { width: 1.4rem; height: 1.4rem; }
.feature h3 { margin-bottom: .35rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Price list */
.price-group + .price-group { margin-top: 3rem; }
.price-group__title { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; }
.price-group__title span { color: var(--ink-faint); font-weight: 500; font-size: .95rem; }

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card__media {
    aspect-ratio: 4 / 3;
    background: var(--bg-muted);
    display: grid;
    place-items: center;
    padding: 1rem;
}
.product-card__media img { max-height: 100%; width: auto; object-fit: contain; }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
.product-card h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.product-card__desc { font-size: .9rem; color: var(--ink-soft); flex: 1; margin-bottom: .9rem; }
.product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.product-card__price { font-size: 1.35rem; font-weight: 700; }
.product-card__price small { font-size: .8rem; font-weight: 500; color: var(--ink-faint); }
.product-card__stock { font-size: .82rem; color: var(--brand-green); font-weight: 600; }
.product-card__stock--out { color: var(--ink-faint); }
.product-card__cat { font-size: .78rem; color: var(--ink-faint); margin-top: .5rem; }

.tag {
    position: absolute;
    margin: .8rem;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .25rem .55rem;
    border-radius: 6px;
}
.product-card { position: relative; }

/* Spec list */
.specs { columns: 2; column-gap: 3rem; }
.specs li { break-inside: avoid; margin-bottom: .55rem; padding-left: 1.5rem; position: relative; list-style: none; }
.specs li::before {
    content: "";
    position: absolute; left: 0; top: .55em;
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: var(--brand);
}
.specs { padding: 0; margin: 0; }
@media (max-width: 640px) { .specs { columns: 1; } }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .95rem; }
.spec-table caption { text-align: left; font-weight: 700; margin-bottom: .6rem; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 42%; font-weight: 600; color: var(--ink-soft); background: var(--bg-muted); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.spec-wrap .spec-table { margin: 0; }
.spec-wrap .spec-table th:first-child, .spec-wrap .spec-table td:last-child { border-right: 0; }

/* Figure with caption (equipment photos in the parameters section) */
.figure {
    margin: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.figure img { width: 100%; display: block; background: var(--bg-muted); }
.figure figcaption { padding: .9rem 1.1rem; font-size: .9rem; color: var(--ink-soft); }
.figure figcaption strong { display: block; color: var(--ink); margin-bottom: .15rem; }

.beam-compare { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap); margin-top: 2.5rem; align-items: center; }
.beam-compare__img { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.beam-compare__text { display: grid; gap: 1rem; }
.beam-compare__text > div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.35rem; }
.beam-compare h3 { display: flex; align-items: center; gap: .5rem; }
.beam-compare p { margin: 0; }
.beam-dot { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.beam-dot--red { background: var(--brand); }
.beam-dot--green { background: var(--brand-green); }
@media (max-width: 720px) { .beam-compare { grid-template-columns: 1fr; } }

/* Videá */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }
.video-card__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--bg-muted);
}
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__title { margin: 1rem 0 .25rem; font-size: 1.1rem; }
.video-card__caption { margin: 0; color: var(--ink-soft); }

/* Reviews */
.review-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.review-card__stars { color: #f5a623; letter-spacing: .1em; margin-bottom: .6rem; }
.review-card__text { flex: 1; margin: 0 0 1rem; color: var(--ink-soft); }
.review-card__meta { font-size: .85rem; color: var(--ink-faint); }
.review-card__meta strong { color: var(--ink); }
.review-card__product { font-size: .85rem; margin: .5rem 0 0; color: var(--ink-faint); }
.admin-review-product { display: flex; gap: .4rem; align-items: center; }
.admin-review-product select { max-width: 14rem; }

.rating-summary { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.rating-summary b { font-size: 2rem; }

/* Partners – image-forward cards (the source images are full promo banners) */
.partner {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.partner:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.partner__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--bg-muted);
}
.partner__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.partner h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.partner p { font-size: .92rem; color: var(--ink-soft); margin-bottom: .7rem; flex: 1; }
.partner a { font-weight: 600; font-size: .92rem; }
.partner > a { display: block; }
.partner h3 .partner__name { color: inherit; font-size: inherit; font-weight: inherit; }
/* Partner page (/spolupraca/{slug}) – the logo above the description */
.partner-page__logo { display: block; width: 100%; max-width: 28rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.contact-list li:first-child { padding-top: 0; }
.contact-list svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--brand); margin-top: .15rem; }
.contact-list a { color: inherit; }
.contact-list span { display: block; font-size: .8rem; color: #8a93a1; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* 8. Blog -------------------------------------------------------- */
.post-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card:hover .post-card__title { color: var(--brand-dark); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--bg-muted); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card__date { font-size: .8rem; color: var(--ink-faint); }
.post-card__title { font-size: 1.1rem; margin: .35rem 0 .5rem; color: var(--ink); }
.post-card__excerpt { font-size: .92rem; color: var(--ink-soft); flex: 1; margin: 0 0 .9rem; }
.post-card__more { font-weight: 600; font-size: .9rem; color: var(--brand-dark); }

.article { max-width: 46rem; margin-inline: auto; }
.article__cover { border-radius: var(--radius); margin-bottom: 2rem; box-shadow: var(--shadow-sm); }
.article__meta { color: var(--ink-faint); font-size: .9rem; margin-bottom: 1.5rem; }
.article__body { font-size: 1.06rem; }
.article__body h2, .blog-prose h2 { margin-top: 2.2rem; font-size: 1.4rem; }
.article__body h3, .blog-prose h3 { margin-top: 1.8rem; font-size: 1.15rem; }
.article__body p, .blog-prose p { margin-bottom: 1.15rem; }
.article__body a, .blog-prose a { color: var(--brand-dark); text-decoration: underline; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.15rem 1.25rem; }
.blog-prose li { margin-bottom: .4rem; }
.blog-prose img { border-radius: var(--radius-sm); margin: .5rem 0 1.15rem; }
.blog-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.15rem; }
.blog-prose th, .blog-prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.article__back { display: inline-block; margin-top: 2.5rem; font-weight: 600; }

/* Admin blog editor */
.admin-blog-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .9rem; }
.admin-blog-cover { display: block; max-width: 18rem; border-radius: var(--radius-sm); margin: .5rem 0; }
.admin-blog-md { width: 100%; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9rem; line-height: 1.55; resize: vertical; }
.btn--small { padding: .35rem .7rem; font-size: .85rem; }

/* 9. Forms / utilities ----------------------------------------- */
.form-card {
    background: var(--bg);
    color: var(--ink); /* keep text dark even inside a dark section */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.form-card a { color: var(--brand-dark); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
    color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.field input.input-validation-error, .field select.input-validation-error, .field textarea.input-validation-error { border-color: var(--brand); }
/* Honeypot: kept in the DOM for bots, never shown to or reachable by humans. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.field--check { display: flex; gap: .6rem; align-items: flex-start; }
.field--check input { width: auto; margin-top: .25rem; }
.field--check label { font-weight: 500; font-size: .88rem; margin: 0; }
.field-error { display: block; margin-top: .3rem; font-size: .82rem; color: var(--brand-dark); }

.notice {
    padding: .9rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
}
.notice:empty { display: none; }
.notice[hidden] { display: none; }
.field--math input { max-width: 8rem; }
/* ASP.NET validation summary: hide the box until it actually has errors. */
.notice.validation-summary-valid { display: none; }
.notice.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.notice--info { background: #eef4ff; border-color: #cfe0ff; color: #1e429f; }
.notice--warn { background: #fff7e6; border-color: #ffe1a8; color: #8a5a00; }
.notice--ok { background: #e9f9ef; border-color: #b6e6c6; color: #1b6b3a; }
.notice--error { background: #fdecec; border-color: #f5b5b5; color: #9b1c1c; }

/* Admin "Kredit prekladov": used share of the translation limit */
.credit-bar { height: .6rem; margin: .5rem 0 1rem; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 999px; background: #f5f7fa; }
.credit-bar__fill { height: 100%; background: #1f8a4c; }
.credit-bar__fill--full { background: #b42318; }

/* Auth pages (prihlásenie / registrácia / profil) */
.auth { display: flex; justify-content: center; }
.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
.auth-card--wide { max-width: 40rem; }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.auth-section { font-size: 1.05rem; margin: 1.5rem 0 .9rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.auth-section:first-of-type { border-top: 0; padding-top: 0; margin-top: .5rem; }
.auth-alt { margin-top: 1.25rem; font-size: .92rem; color: var(--ink-faint); text-align: center; }

/* Account menu in the header (native <details>) */
.acct-menu { position: relative; }
.acct-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .6rem;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
}
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary:hover { background: var(--bg-muted); color: var(--ink); }
.acct-menu > summary svg { width: 1.1rem; height: 1.1rem; }
.acct-menu__name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu[open] .acct-menu__caret { transform: rotate(180deg); }
.acct-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    min-width: 12rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: .35rem;
    z-index: 60;
}
.acct-menu__panel a,
.acct-menu__panel button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: var(--ink-soft);
    padding: .55rem .6rem;
    border-radius: 6px;
    cursor: pointer;
}
.acct-menu__panel a:hover,
.acct-menu__panel button:hover { background: var(--bg-muted); color: var(--ink); text-decoration: none; }
@media (max-width: 560px) {
    .acct-menu__name { display: none; }
}

/* Language switcher - same <details> pattern as .acct-menu. */
.lang-menu { position: relative; }
.lang-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    padding: .5rem .6rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink-soft);
    cursor: pointer;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover { background: var(--bg-muted); color: var(--ink); }
.lang-menu__panel {
    position: absolute;
    left: 0;
    top: calc(100% + .4rem);
    min-width: 9rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: .35rem;
    z-index: 60;
}
.lang-menu__panel a {
    display: block;
    padding: .5rem .6rem;
    border-radius: 6px;
    color: var(--ink-soft);
}
.lang-menu__panel a:hover { background: var(--bg-muted); color: var(--ink); text-decoration: none; }
.lang-menu__panel a.is-active { color: var(--brand-dark); font-weight: 700; }

.muted { color: var(--ink-faint); }
.text-center { text-align: center; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.mt-2 { margin-top: 1rem; }
.stack > * + * { margin-top: 1rem; }

/* ===== Súhlas s cookies (lišta + dialóg predvolieb) ===== */
.cookie-consent[hidden] { display: none; }

.cookie-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px -18px rgba(16, 24, 40, .35);
}
.cookie-bar__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.1rem;
    flex-wrap: wrap;
}
.cookie-bar__text { flex: 1; min-width: 16rem; font-size: .9rem; color: var(--ink-soft); }
.cookie-bar__title { font-weight: 700; color: var(--ink); font-size: 1rem; margin: 0 0 .2rem; }
.cookie-bar__text p:last-child { margin: 0; }
.cookie-bar__text a { color: var(--brand-dark); text-decoration: underline; }
.cookie-bar__actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 13rem; flex: none; }

.btn--line { background: #fff; border-color: var(--line); color: var(--ink); }
.btn--line:hover { background: var(--bg-muted); }
.btn--plain { background: none; border: 0; color: var(--brand-dark); text-decoration: underline; padding-block: .4rem; }
.btn--plain:hover { color: var(--brand); }

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(16, 24, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__card {
    position: relative;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 33rem;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.75rem;
}
.cookie-modal__card h2 { font-size: 1.25rem; margin-bottom: .6rem; padding-right: 1.75rem; }
.cookie-modal__lead { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.cookie-modal__lead a { color: var(--brand-dark); text-decoration: underline; }
.cookie-modal__close {
    position: absolute;
    top: .8rem; right: 1rem;
    background: none; border: 0;
    font-size: 1.6rem; line-height: 1;
    color: var(--ink-faint);
    padding: .25rem .5rem;
    border-radius: 8px;
    cursor: pointer;
}
.cookie-modal__close:hover { color: var(--ink); background: var(--bg-muted); }
.cookie-modal__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem; }

.cookie-cat { padding: .9rem 0; border-top: 1px solid var(--line); }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 600; color: var(--ink); }
label.cookie-cat__head { cursor: pointer; }
.cookie-cat__name { font-size: .95rem; }
.cookie-cat__always { font-size: .78rem; color: var(--ink-faint); font-weight: 500; }
.cookie-cat__desc { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.cookie-switch { position: relative; display: inline-flex; flex: none; width: 2.6rem; height: 1.5rem; }
.cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s ease; }
.cookie-switch__track::before {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 1.125rem; height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .3);
    transition: transform .15s ease;
}
.cookie-switch input:checked + .cookie-switch__track { background: var(--brand); }
.cookie-switch input:checked + .cookie-switch__track::before { transform: translateX(1.1rem); }
.cookie-switch input:focus-visible + .cookie-switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 760px) {
    .cookie-bar__inner { gap: .9rem; }
    .cookie-bar__actions { width: 100%; }
}

/* Cookie table on the policy page */
.cookie-table { width: 100%; border-collapse: collapse; margin: .75rem 0 1.25rem; font-size: .9rem; }
.cookie-table th, .cookie-table td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie-table th { color: var(--ink-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; background: var(--bg-muted); }
.cookie-table td:first-child { font-weight: 600; }
.cookie-table-wrap { overflow-x: auto; }

/* Transient toast for "feature not ready yet" actions (cart, login) */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(1rem);
    background: var(--bg-dark);
    color: #fff;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    font-size: .9rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 70;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Page hero for inner pages */
.page-hero { background: var(--bg-muted); border-bottom: 1px solid var(--line); }
.page-hero .container { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.page-hero p { margin: 0; color: var(--ink-soft); max-width: 46rem; }

/* Legal document typography */
.legal { max-width: 50rem; margin-inline: auto; }
.legal h2 { margin-top: 2.5rem; font-size: 1.3rem; }
.legal h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin-bottom: .4rem; }
.legal address { font-style: normal; background: var(--bg-muted); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }

/* ===== Administrácia ===== */
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.admin-tab { padding: .6rem .9rem; font-weight: 600; font-size: .95rem; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tab:hover { color: var(--ink); text-decoration: none; }
.admin-tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* Admin order filter */
.admin-filter { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
    padding: 1rem; margin: 0 0 1rem; background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.admin-filter .field { margin: 0; flex: 1 1 12rem; }
.admin-filter label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); display: block; margin-bottom: .25rem; }
.admin-filter input { width: 100%; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--bg); }
.admin-filter__actions { display: flex; gap: .6rem; align-items: center; flex: 0 0 auto; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); background: var(--bg-muted); }
.admin-table input[type="text"] { width: 100%; min-width: 12rem; }
/* Category row in the admin: name + SEO fields stacked */
.admin-category { display: grid; gap: .45rem; min-width: 18rem; }
.admin-category label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.admin-category button { justify-self: start; }
.admin-thumb { width: 3.5rem; }
.admin-thumb img { width: 3rem; height: 3rem; object-fit: contain; background: var(--bg-muted); border-radius: 6px; }
.admin-nowrap { white-space: nowrap; }

/* Blog list: 2x thumbnail + ~5x zoom on hover */
.admin-table-wrap--visible { overflow: visible; }
.admin-thumb--blog { width: 6.5rem; position: relative; }
.admin-thumb--blog img {
    display: block;
    width: 6rem; height: 6rem; object-fit: cover; border-radius: 8px;
    background: var(--bg-muted); cursor: zoom-in;
}
.admin-thumb--blog:hover img {
    position: absolute;
    z-index: 30;
    width: 30rem; height: auto; max-height: 22rem;
    object-fit: contain;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}
.admin-blog-title { font-weight: 700; color: var(--ink); }
.admin-blog-title:hover { color: var(--brand-dark); }

@media (max-width: 700px) {
    .admin-table-wrap--visible { overflow-x: auto; }
    .admin-thumb--blog:hover img { position: static; width: 6rem; height: 6rem; }
}

.admin-inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }

.admin-blog-actions { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
.admin-blog-actions form { margin: 0; }
.admin-blog-actions .btn--plain {
    padding: .15rem 0;
    font: inherit;
    font-size: .95rem;
    line-height: 1.3;
    cursor: pointer;
}
.btn--icon { padding: .4rem .55rem; line-height: 1; }

.admin-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.admin-image { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.admin-image.is-main { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(234,198,11,.15); }
.admin-image img { width: 100%; height: 8rem; object-fit: contain; background: var(--bg-muted); display: block; }
.admin-image figcaption { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; }
.admin-image__badge { font-weight: 700; color: var(--brand-dark); }

.acct-menu__label { display: block; padding: .4rem .6rem .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.acct-menu__sep { border: 0; border-top: 1px solid var(--line); margin: .35rem 0; }

/* ===== E-shop: kategórie, stránkovanie, detail, košík ===== */
.shop-cats { background: var(--bg-muted); border-bottom: 1px solid var(--line); }
.shop-cats__inner { display: flex; gap: .4rem; flex-wrap: wrap; padding-block: .8rem; }
.shop-cat {
    padding: .5rem .95rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
    color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
}
.shop-cat:hover { color: var(--ink); text-decoration: none; border-color: var(--ink-faint); }
.shop-cat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.product-card__cart { margin: .6rem 0 .4rem; }
.product-card h3 a { color: inherit; }
.product-card h3 a:hover { color: var(--brand-dark); text-decoration: none; }
.product-card__body .product-card__meta { margin-top: auto; padding-top: .6rem; }
.product-card__body .product-card__more { align-self: flex-start; }

.pager { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; }
.pager__link {
    min-width: 2.4rem; text-align: center; padding: .5rem .6rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); font-weight: 600; color: var(--ink-soft);
}
.pager__link:hover { border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }
.pager__link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }
.product-detail__main {
    width: 100%; background: var(--bg-muted); border: 1px solid var(--line);
    border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: contain; padding: 1rem;
}
.product-detail__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.product-detail__thumb {
    width: 4.5rem; height: 4.5rem; padding: .25rem; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.product-detail__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-detail__info h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.product-detail__price { font-size: 1.6rem; font-weight: 700; margin: .5rem 0 1.25rem; }
.product-detail__price small { font-size: .85rem; font-weight: 500; color: var(--ink-faint); }
.product-detail__rating { margin: -.75rem 0 1.25rem; font-size: .95rem; }
.product-detail__rating a { color: inherit; text-decoration: none; }
.product-detail__rating a:hover { text-decoration: underline; }
.product-detail__buy { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.product-detail__buy label { font-size: .85rem; font-weight: 600; display: flex; flex-direction: column; gap: .3rem; }
.product-detail__delivery { margin: -.75rem 0 1.5rem; font-size: .85rem; }
.ship-delivery-note { margin: 0 0 1rem; font-size: .85rem; }
.product-detail__buy input { width: 5rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.product-detail__desc { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.product-detail__desc h2, .product-detail__desc h3 { font-size: 1.15rem; margin-top: 1.25rem; }
.product-detail__desc ul { padding-left: 1.25rem; }
.product-detail__files { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 1.25rem; }
.product-detail__files h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.product-detail__files ul { list-style: none; margin: 0; padding: 0; }
.product-detail__files li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.product-detail__files svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--brand-dark); }
.admin-attachments { display: grid; gap: .25rem; margin-bottom: 1rem; }
.admin-attachments__item { margin: 0; }

.cart-table-wrap { overflow-x: auto; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: .75rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cart-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.cart-thumb { width: 4rem; }
.cart-thumb img { width: 3.5rem; height: 3.5rem; object-fit: contain; background: var(--bg-muted); border-radius: 6px; }
.cart-qty { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.cart-qty input { width: 4rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.cart-total-label { text-align: right; font-weight: 600; }
.cart-total { font-weight: 700; font-size: 1.15rem; }
.cart-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ===== Objednávka (checkout) ===== */
.container.narrow { max-width: 46rem; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.checkout-main { min-width: 0; }
.ship-options { display: grid; gap: .75rem; margin: .5rem 0 1rem; }
.ship-option { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center;
    padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.ship-option:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.ship-option input { width: auto; margin: 0; }
.ship-option span { display: flex; flex-direction: column; }
.ship-option .muted { font-size: .82rem; }
.ship-price { font-weight: 700; white-space: nowrap; }
.checkout-summary { position: sticky; top: 1.5rem; padding: 1.25rem; background: var(--bg-muted);
    border: 1px solid var(--line); border-radius: var(--radius-sm); }
.checkout-summary h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.summary-lines { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .5rem; font-size: .88rem; }
.summary-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.summary-totals { margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; }
.summary-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.summary-totals dt, .summary-totals dd { margin: 0; }
.summary-grand { padding-top: .55rem; border-top: 1px solid var(--line); font-weight: 700; font-size: 1.1rem; }
.checkout-summary .btn--plain { margin-top: 1rem; display: inline-block; }

@media (max-width: 800px) {
    .checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .checkout-summary { position: static; order: -1; }
}

/* ===== Objednávky (zoznam + detail, používateľ aj admin) ===== */
.orders-table-wrap { overflow-x: auto; margin: 1rem 0; }
.orders-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.orders-table th, .orders-table td { padding: .7rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.orders-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); white-space: nowrap; }
.orders-table td.num, .orders-table th.num { text-align: right; white-space: nowrap; }
.orders-table .orders-items { max-width: 22rem; color: var(--ink-faint); }
.orders-table .orders-total { white-space: nowrap; font-weight: 600; }
.orders-table tfoot td { border-bottom: 0; color: var(--ink-faint); }
.orders-table tfoot .orders-grand td { border-top: 2px solid var(--ink); color: var(--ink); padding-top: .6rem; }

.order-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.order-badge--wait { background: #fdf0d5; color: #92600a; }
.order-badge--sent { background: #dcedf5; color: #10556f; }
.order-badge--paid { background: #dff0e4; color: var(--brand-green); }
.order-badge--cancelled { background: #f3d9d9; color: #a81d1d; }

.order-detail { margin: 1.25rem 0; }
.order-detail__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order-detail__meta > div { display: flex; flex-direction: column; gap: .2rem; }
.order-detail__meta .muted { font-size: .78rem; }
.order-detail__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.25rem; }
.order-detail__cols h3, .order-detail__note h3, .order-detail__invoice h3 { font-size: .95rem; margin: 0 0 .4rem; }
.order-detail__cols p { margin: 0; line-height: 1.6; font-size: .9rem; }
.order-detail__note { margin-top: 1.25rem; }
.order-detail__invoice { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.admin-invoice .admin-inline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.admin-inline--tight { gap: .35rem; margin: 0; }
.admin-replace { margin-top: .75rem; }
.admin-replace summary { cursor: pointer; font-size: .88rem; color: var(--brand-dark); }
.admin-num-input { width: 5.5rem; }

@media (max-width: 640px) {
    .order-detail__cols { grid-template-columns: 1fr; }
}

/* --- Newsletter (sign-up section, form, consent checkbox) --- */
.newsletter-signup { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.newsletter-signup__inner { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .newsletter-signup__inner { grid-template-columns: 1fr 1.1fr; } }
.newsletter-signup h2 { margin-bottom: .5rem; }
.newsletter-signup .lead { margin: 0; }
.newsletter-form__row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.newsletter-form__row .field { flex: 1 1 16rem; margin-bottom: 0; }
.newsletter-form .field--check { margin-top: .9rem; }
.newsletter-consent__hint { font-size: .82rem; margin-top: .25rem; }
.newsletter-consent { margin-bottom: .25rem; }
.legal-list { padding-left: 1.25rem; }
.legal-list li { margin-bottom: .4rem; }

/* Social-network icons in the footer (links come from the DB – O stránke → Sociálne siete). */
.site-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .75rem 0 0; padding: 0; }
.site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: inherit; transition: background .15s, color .15s;
}
.site-footer__social a:hover { background: var(--brand); color: #fff; text-decoration: none; }
.site-footer__social svg { width: 1.15rem; height: 1.15rem; }

/* ===== Galéria (/galeria, stránka fotky, lightbox, slider v „O nás", admin) ===== */
.slideshow__more { margin: .9rem 0 0; text-align: center; font-weight: 600; }

.gallery-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1000px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-grid__item {
    display: block; height: 100%; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
    box-shadow: var(--shadow-sm); color: var(--ink-soft);
    transition: box-shadow .2s, transform .2s;
}
.gallery-grid__item:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gallery-grid__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-muted); }
.gallery-grid__caption {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    padding: .5rem .65rem; font-size: .85rem; line-height: 1.35;
}

.gallery-photo { margin: 0 0 1.25rem; }
.gallery-photo__img {
    width: auto; max-width: 100%; max-height: 78vh; margin-inline: auto;
    border-radius: var(--radius); background: var(--bg-muted); box-shadow: var(--shadow-md);
}
.gallery-photo__title { font-size: clamp(1.35rem, 2vw + .8rem, 1.9rem); margin: 1.1rem 0 0; text-align: center; overflow-wrap: anywhere; }
.gallery-photo__product { text-align: center; margin: 0 0 1.5rem; }
.gallery-photo__product .btn { white-space: normal; text-align: center; }
.gallery-photo__pager { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

html.is-lightbox-open { overflow: hidden; }
.lightbox {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0;
    padding: 3.5rem .75rem 1rem; background: rgba(12, 14, 18, .96); color: #e7eaef;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox__figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lightbox__img { width: auto; max-width: 100%; max-height: calc(100vh - 8.5rem); object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center; text-align: center; font-size: .95rem; }
.lightbox__link { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }
.lightbox__count { color: #b9c0cc; white-space: nowrap; }
.lightbox__btn, .lightbox__close {
    position: absolute; display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.lightbox__btn:hover, .lightbox__close:hover { background: var(--brand); }
/* [hidden] (single photo): the display above would otherwise keep the button on screen. */
.lightbox__btn[hidden], .lightbox__close[hidden] { display: none; }
.lightbox__btn { top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev { left: .5rem; }
.lightbox__btn--next { right: .5rem; }
.lightbox__close { top: .6rem; right: .6rem; font-size: 1.6rem; }
@media (min-width: 900px) {
    .lightbox { padding-inline: 4.5rem; }
    .lightbox__btn--prev { left: 1rem; }
    .lightbox__btn--next { right: 1rem; }
}

.admin-gallery { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.admin-gallery__item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.admin-gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-muted); }
.admin-gallery__body { padding: .6rem .7rem .75rem; display: grid; gap: .5rem; font-size: .9rem; }
.admin-gallery__body .admin-blog-title { overflow-wrap: anywhere; }
.admin-gallery__badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.admin-gallery__actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.admin-gallery-preview { width: auto; max-width: 100%; max-height: 24rem; margin-bottom: .75rem; border-radius: var(--radius-sm); background: var(--bg-muted); }
.admin-lang { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem 1rem .25rem; margin: 0 0 1rem; min-width: 0; }
.admin-lang legend { font-weight: 700; padding: 0 .35rem; display: flex; gap: .5rem; align-items: center; }

/* Side panels – banners / promo / affiliate / AdSense in the free strips beside the content.
   Shown only when both strips are at least ~190 px wide and the 600 px unit fits under the header;
   the same media query is in site.js (initSidePanels) – keep them in sync. */
.side-panel { display: none; }
@media (min-width: 1520px) and (min-height: 780px) {
    .side-panel {
        display: block;
        position: fixed;
        top: 9rem;
        z-index: 40; /* under the sticky header (50) and the cookie bar */
        width: 160px;
    }
    .side-panel--left { left: calc((100vw - var(--container)) / 4 - 80px); }
    .side-panel--right { right: calc((100vw - var(--container)) / 4 - 80px); }
}
.side-panel__label { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); text-align: center; margin-bottom: .25rem; }
.side-panel img { width: 160px; max-height: 600px; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.side-panel__unit { display: block; width: 160px; height: 600px; }
.side-panel__placeholder { display: grid; place-content: center; text-align: center; font-size: .8rem; color: var(--ink-faint); background: var(--bg-muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.side-panel__privacy { display: block; width: 100%; margin-top: .25rem; padding: 0; border: 0; background: none; font: inherit; font-size: .7rem; color: var(--ink-faint); text-decoration: underline; cursor: pointer; }

/* ==========================================================================
   10. Niveláky theme
   Everything below only restyles the shared platform markup – no page needs
   its own classes. Goal: a "construction site / surveying" look (black, signal
   yellow, square corners, condensed headings, measuring-staff stripes) that is
   clearly different from rotacnelasery.sk (white, red, rounded cards).
   ========================================================================== */

/* Headings: condensed, upper-case display face; body text stays the system font. */
h1, h2, h3, h4,
.brand__text, .site-footer__brand, .product-card__price, .product-detail__price, .cart-total {
    font-family: var(--font-head);
    letter-spacing: .01em;
}
h1, h2 { text-transform: uppercase; font-weight: 700; line-height: 1.05; }
h1 { font-size: clamp(2.3rem, 4.5vw + 1rem, 3.9rem); }
h2 { font-size: clamp(1.9rem, 2.4vw + 1rem, 2.75rem); }
h3 { font-size: 1.35rem; font-weight: 600; }

/* Eyebrow = small black label on a yellow marker bar – readable on white (yellow text is not). */
.eyebrow {
    color: var(--ink);
    background: linear-gradient(var(--brand), var(--brand)) left bottom / 100% .38em no-repeat;
    padding: 0 .15em;
    letter-spacing: .12em;
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--brand); background: none; padding: 0; }

/* Measuring-staff stripe (alternating yellow / black blocks) under the header and on top of the footer. */
.site-header::after, .site-footer::before, .page-hero::after {
    content: "";
    display: block;
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--brand) 0 28px, var(--ink) 28px 56px);
}

/* Buttons: yellow with dark text; upper-case labels. */
.btn { border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn--loading::after { border-color: rgba(0, 0, 0, .25); border-top-color: var(--on-brand); }
.section--dark .btn--ghost, .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: transparent; }

/* Header: black bar, yellow mark, white navigation with a yellow underline. */
.site-header { background: var(--bg-dark); border-bottom: 0; backdrop-filter: none; }
.brand, .brand:hover { color: #fff; }
.brand__text { font-size: 1.55rem; font-weight: 700; text-transform: uppercase; line-height: 1; }
.brand__text small { font-family: var(--font); text-transform: none; color: #a3a3a3; font-size: .72rem; letter-spacing: 0; margin-top: .2rem; }
.nav a { color: #e6e6e6; border-radius: 0; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; background: transparent; border-bottom-color: var(--brand); }
.nav a.is-active { color: var(--brand); background: transparent; border-bottom-color: var(--brand); }
.header-link { color: #e6e6e6; border-radius: var(--radius-sm); }
.header-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.header-cart__count { background: var(--brand); color: var(--on-brand); border-radius: 2px; }
.nav-toggle { border-color: rgba(255, 255, 255, .3); color: #fff; border-radius: var(--radius-sm); }
.lang-menu summary { color: #e6e6e6; }
.site-header__searchrow { background: #1d1d1d; border-top-color: #2a2a2a; }
.header-search { border-radius: var(--radius-sm); border-color: #3a3a3a; background: #fff; }
.header-search button { background: var(--brand); color: var(--on-brand); }
.header-search button:hover { background: var(--brand-hover); }
@media (max-width: 1100px) {
    .nav { background: var(--bg-dark); border-bottom-color: #2a2a2a; }
    .nav a { border-bottom: 1px solid #2a2a2a; }
    .nav a:hover, .nav a.is-active { border-bottom-color: #2a2a2a; box-shadow: inset 4px 0 0 var(--brand); }
}

/* Hero: no photo – black with a fine millimetre grid and a glowing yellow "laser plane". */
.hero { background: var(--bg-dark); overflow: hidden; }
.hero::before {
    content: "";
    position: absolute;
    left: -10%; right: -10%;
    top: 64%;
    height: 2px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand) 80%, transparent);
    box-shadow: 0 0 18px 2px rgba(234, 198, 11, .55);
    transform: rotate(-4deg);
}
.hero::after {
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 22px 22px,
        radial-gradient(900px 420px at 85% 10%, rgba(234, 198, 11, .16), transparent 65%);
}
.hero h1 { color: #fff; }
.hero .lead { color: #cfcfcf; }
.hero__points svg { color: var(--brand); }
.hero__note { color: #9a9a9a; }
.hero__card { background: #fff; border-radius: 0; padding: 0; border-bottom: 8px solid var(--brand); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.hero__card img { border-radius: 0; }
.hero__badges { margin-top: 1.4rem; }
.pill { border-radius: 2px; background: transparent; border-color: rgba(234, 198, 11, .6); color: #f2f2f2; backdrop-filter: none; }
.pill::before { border-radius: 0; background: var(--brand); width: .45rem; height: .45rem; }

/* Sections */
.section--muted { background: #f4f3ee; }
.page-hero { background: var(--bg-dark); color: #fff; border-bottom: 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #c4c4c4; }
.page-hero .eyebrow { color: var(--brand); background: none; padding: 0; }

/* Cards: flat and square; a dark top edge, yellow on hover. */
.feature, .product-card, .figure, .beam-compare__text > div, .spec-wrap {
    border-radius: var(--radius);
    box-shadow: none;
    border-color: #dedbd0;
}
.feature { border-top: 4px solid var(--ink); }
.section--dark .feature { border-top-color: var(--brand); }
.feature__icon { border-radius: 0; background: var(--brand); color: var(--on-brand); }
.product-card { border-top: 4px solid transparent; }
.product-card:hover { border-top-color: var(--brand); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45); transform: none; }
.product-card__media { background: #fff; border-bottom: 1px solid #ecebe4; }
.product-card h3 { font-size: 1.2rem; }
.product-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    background: var(--brand);
    color: var(--on-brand);
    padding: .15rem .55rem;
    font-size: 1.55rem;
}
/* Catalogue price without VAT + the price with VAT on its own line (Pages/Shared/_PriceTag). */
.product-card__price { flex-wrap: wrap; }
.product-card__price small, .product-detail__price small { font-family: var(--font); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.price-gross { display: block; flex-basis: 100%; font-family: var(--font); font-size: .82rem; font-weight: 600; letter-spacing: 0; }
.product-detail__price .price-gross { font-size: 1rem; color: var(--ink-soft); margin-top: .2rem; }
.product-card__stock { color: #2f7d32; }
.tag { border-radius: 0; background: var(--ink); color: var(--brand); }
.specs li::before { border-radius: 0; background: var(--brand); box-shadow: 1px 1px 0 var(--ink); }

/* Shop categories, pager and other accents that sat on the brand colour with white text. */
.shop-cat { border-radius: var(--radius-sm); }
.shop-cat.is-active, .pager__link.is-active { background: var(--ink); border-color: var(--ink); color: var(--brand); }
.site-footer__social a:hover { color: var(--on-brand); }
.cookie-switch input:checked + .cookie-switch__track { background: var(--ink); }
.lightbox__btn:hover, .lightbox__close:hover { color: var(--on-brand); }
.btn--plain:hover { color: var(--brand-dark); }

/* Cart / checkout / order detail: the "z toho DPH" line under the totals. */


/* Footer: black, yellow headings, the measuring stripe on top. */
.site-footer { background: #0d0d0d; color: #a8a8a8; }
.site-footer h4 { color: var(--brand); font-family: var(--font-head); font-size: 1.15rem; }
.site-footer a { color: #e2e2e2; }
.site-footer a:hover { color: var(--brand); }
.site-footer__brand { font-size: 1.45rem; text-transform: uppercase; }
.site-footer__legal { border-top-color: #222; color: #7a7a7a; }