/*
 * Builder component styles — e-shop delivery.
 *
 * Compiles to builderDefault.css, which is loaded in the editor canvas AND uploaded to the
 * e-shop via FTP, so components look identical in both places.
 *
 * Keep this tree free of admin UI: anything that styles the addon's admin (tables, popups,
 * toolbar, filters, canvas chrome) belongs in admin/css/src/dkLabBuilder.less →
 * admin/css/dkLabBuilder.css, which never reaches the e-shop.
 *
 * Run: ./builder-build.sh   (or: make builder-local)
 */
/* Tokens and breakpoint variables — must come first, everything below reads them */
/*
 * Design tokens for builder components — the single place where their look is changed.
 *
 * These are OUR values, not aliases of the template's variables, so the look stays under our
 * control and can be changed centrally. The defaults happen to match what Shoptet core sets
 * (#1f1f1f text, #f6f6f6 surface, #dadada border), so components sit naturally in a typical
 * light template — but the values are ours to change.
 *
 * Per-eshop overrides come from the color palette, which BuilderDefaultScriptGenerator emits
 * onto :root as --dklab-builder-bg-* / --dklab-builder-fg-*.
 *
 * Trade-off to keep in mind: with our own color values, a dark template will contrast poorly
 * until the admin overrides the palette. Font is the one thing we deliberately inherit.
 */
/*
 * Breakpoints must be LESS variables, not custom properties — a custom property is not
 * evaluated inside a media query, so @media (min-width: var(--x)) never matches.
 *
 * Values follow Shoptet: core uses 768px (114 rules), 992px (61), 1200px (42), and client
 * templates break at 767/768px thousands of times. Components must break at the same widths
 * as the template around them.
 */
:root {
  /* ---- Colors ---- */
  --dkLab-builder-text: #1f1f1f;
  --dkLab-builder-text-muted: #6b7280;
  --dkLab-builder-headline: #1f1f1f;
  --dkLab-builder-border: #dadada;
  --dkLab-builder-surface: #f6f6f6;
  --dkLab-builder-surface-alt: #ffffff;
  --dkLab-builder-accent: #194a88;
  /*
     * Font — `inherit` means "take it from the e-shop template", which is how components end up
     * with the shop's own typography. Set a concrete family here to override every component at
     * once, without touching a single component rule.
     */
  --dkLab-builder-font: inherit;
  --dkLab-builder-font-headings: inherit;
  /* ---- Spacing ---- */
  --dkLab-builder-space-xs: 4px;
  --dkLab-builder-space-s: 8px;
  --dkLab-builder-space-m: 16px;
  --dkLab-builder-space-l: 32px;
  --dkLab-builder-space-xl: 64px;
  /* ---- Radius ---- */
  --dkLab-builder-radius: 4px;
  --dkLab-builder-radius-l: 12px;
  /* ---- Content width ---- */
  --dkLab-builder-width-narrow: 914px;
  /*
     * ---- Icons ----
     *
     * Inline SVG as a data: URI, used through mask-image so the color comes from
     * background-color. Change the shape here and every component using it follows.
     *
     * Kterou barvu vezme, určuje pravidlo, co ikonu používá: přepínač u FAQ bere
     * --dkLab-builder-accent, položky výhod a nevýhod černou z --dkLab-builder-text.
     *
     * data: URI rather than a file on our server: no extra request, no question of whether a
     * relative path in a CSS file uploaded to the shop's FTP resolves against our domain or
     * theirs, and nothing breaks when our server is unreachable. For a large illustration use a
     * file with an absolute URL instead.
     */
  /*
     * Přepínač barvy ikon: --dkLab-builder-icon-color je záměrně NEdefinovaná, aby se uplatnil
     * fallback v pravidle. Nastav ji tady, v utilitě nebo na konkrétní komponentě, když má být
     * ikona jinak barevná — např. --dkLab-builder-icon-color: #c62828;
     */
  --dkLab-builder-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v14H7z'/%3E%3Cpath d='M1 7h14v2H1z'/%3E%3C/svg%3E");
  --dkLab-builder-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 7h14v2H1z'/%3E%3C/svg%3E");
}
/* Global base for the .dklab-builder wrapper: inherited typography, image safety, rhythm */
/*
 * Global base for builder output.
 *
 * Everything here is scoped to .dklab-builder, the wrapper BuilderContentWrapper puts around
 * rendered content, so nothing leaks into the rest of the e-shop page.
 *
 * Rule of thumb: declare as little as possible. Anything we do not declare is inherited from
 * the e-shop template, which is exactly what makes components look native in it. We only own
 * structure — spacing, rhythm, media behaviour.
 *
 * Note: the wrapper class is lowercase `dklab-builder` because that is what PHP emits today
 * (BuilderContentWrapper); component blocks use the `dkLab-builder-` prefix. See
 * docs/bem-components.md, section 10, for unifying the two.
 */
.dklab-builder {
  /* Font is inherited by default; the token exists so it can be forced centrally. */
  font-family: var(--dkLab-builder-font);
  /*
     * No vertical rhythm on the wrapper: .dklab-builder is also the editor canvas root, so a
     * `> * + *` margin here spaced out the editor chrome as well. Spacing between components is
     * opt-in through the .dk-stack utilities in layout.less.
     */
  /* Images never overflow their column, whatever the template does. */
  /*
     * Headings: only the font token is applied. Sizes, weights and colors are left to the
     * template so a heading inside a component matches the headings around it.
     */
  /*
     * Buttons are NOT styled here. A CTA uses Shoptet's own .btn / .btn-primary classes
     * (core defines .btn in 258 rules), so it looks exactly like every other button in the
     * shop. Do not add a builder-specific button style.
     */
}
.dklab-builder img {
  max-width: 100%;
  height: auto;
}
.dklab-builder h1,
.dklab-builder h2,
.dklab-builder h3,
.dklab-builder h4,
.dklab-builder h5,
.dklab-builder h6 {
  font-family: var(--dkLab-builder-font-headings);
}
/* Grid, columns, media and text rhythm utilities (dk-*) */
/*
 * Layout utilities for builder output — grid, columns, spacing, media, text rhythm.
 *
 * Merges the former index.less grid with generated.less. Two things changed in the merge:
 *   1. Breakpoints moved from 640px / 1024px to Shoptet's 768px / 992px (see tokens.less).
 *      At 640px the builder used to stack its columns while the surrounding template did not,
 *      so a component looked broken between 640 and 768px on every e-shop.
 *   2. Hard-coded gaps became spacing tokens.
 *
 * Utilities are scoped to .dklab-builder (docs/bem-components.md, rule 4). They keep the short
 * `dk-` prefix — it measures 0 collisions across 14 client templates and these are the classes
 * that appear most often in the HTML.
 */
.dklab-builder {
  /* ---- Row / column grid ---- */
  /* Stack columns on mobile, at the same width the template does */
  /* ---- Row direction ---- */
  /* Stacked but reversed — typically image above text */
  /* ---- Grid alternative ---- */
  /* Use instead of .dk-row when columns must be equal height without calc() widths. */
  /* Four columns are too tight on a tablet */
  /* ---- Column behaviour ---- */
  /* .dk-col handles width; these handle inner layout and height. */
  /* Align a single item against the rest of the row */
  /* ---- Mobile order ---- */
  /* ---- Vertical rhythm utilities ---- */
  /* ---- Spacing utilities ---- */
  /* ---- Media from an IMAGE element ---- */
  /* The converter emits <img loading="lazy">, and <picture> with <source> for desktop/mobile
     * variants. Dimensions only, nothing colored. */
  /* ---- Content width ---- */
  /* ---- Rhythm inside CONTENT / TINY output ---- */
  /* The editor lets arbitrary HTML through, so rhythm is applied from the outside rather than
     * on the elements themselves. Bare elements are styled only inside this scope — outside it
     * they belong to the e-shop template. */
}
.dklab-builder .dk-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dkLab-builder-space-m);
}
.dklab-builder .dk-col {
  flex: 1 1 0;
  min-width: 0;
}
.dklab-builder .dk-col-1-2 {
  flex: 0 0 calc(50% - var(--dkLab-builder-space-m) / 2);
  max-width: calc(50% - var(--dkLab-builder-space-m) / 2);
}
.dklab-builder .dk-col-1-3 {
  flex: 0 0 calc(33.333% - var(--dkLab-builder-space-m) * 2 / 3);
  max-width: calc(33.333% - var(--dkLab-builder-space-m) * 2 / 3);
}
.dklab-builder .dk-col-2-3 {
  flex: 0 0 calc(66.666% - var(--dkLab-builder-space-m) / 3);
  max-width: calc(66.666% - var(--dkLab-builder-space-m) / 3);
}
.dklab-builder .dk-col-1-4 {
  flex: 0 0 calc(25% - var(--dkLab-builder-space-m) * 3 / 4);
  max-width: calc(25% - var(--dkLab-builder-space-m) * 3 / 4);
}
.dklab-builder .dk-col-3-4 {
  flex: 0 0 calc(75% - var(--dkLab-builder-space-m) / 4);
  max-width: calc(75% - var(--dkLab-builder-space-m) / 4);
}
@media (max-width: 767px) {
  .dklab-builder .dk-col-1-2,
  .dklab-builder .dk-col-1-3,
  .dklab-builder .dk-col-2-3,
  .dklab-builder .dk-col-1-4,
  .dklab-builder .dk-col-3-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.dklab-builder .dk-row-column {
  flex-direction: column;
}
.dklab-builder .dk-row-reverse {
  flex-direction: row-reverse;
}
.dklab-builder .dk-row-nowrap {
  flex-wrap: nowrap;
}
@media (max-width: 767px) {
  .dklab-builder .dk-row-reverse-mobile {
    flex-direction: column-reverse;
  }
}
.dklab-builder .dk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dkLab-builder-space-m);
}
.dklab-builder .dk-grid > * {
  min-width: 0;
}
@media (min-width: 768px) {
  .dklab-builder {
    /* Asymmetric pairs */
  }
  .dklab-builder .dk-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dklab-builder .dk-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dklab-builder .dk-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dklab-builder .dk-grid-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .dklab-builder .dk-grid-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .dklab-builder .dk-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dklab-builder .dk-span-2 {
  grid-column: span 2;
}
@media (max-width: 767px) {
  .dklab-builder .dk-span-2 {
    grid-column: span 1;
  }
}
.dklab-builder .dk-col-stack {
  display: flex;
  flex-direction: column;
  row-gap: var(--dkLab-builder-space-m);
}
.dklab-builder .dk-col-fill {
  flex: 1 1 0;
}
.dklab-builder .dk-col-auto {
  flex: 0 0 auto;
}
.dklab-builder .dk-col-full {
  height: 100%;
}
.dklab-builder .dk-self-start {
  align-self: flex-start;
}
.dklab-builder .dk-self-center {
  align-self: center;
}
.dklab-builder .dk-self-end {
  align-self: flex-end;
}
.dklab-builder .dk-ml-auto {
  margin-inline-start: auto;
}
.dklab-builder .dk-mr-auto {
  margin-inline-end: auto;
}
@media (max-width: 767px) {
  .dklab-builder .dk-order-first {
    order: -1;
  }
  .dklab-builder .dk-order-last {
    order: 1;
  }
}
.dklab-builder .dk-stack {
  display: flex;
  flex-direction: column;
  row-gap: var(--dkLab-builder-space-m);
}
.dklab-builder .dk-stack-sm {
  row-gap: var(--dkLab-builder-space-s);
}
.dklab-builder .dk-stack-lg {
  row-gap: var(--dkLab-builder-space-l);
}
.dklab-builder .dk-stack-xl {
  row-gap: var(--dkLab-builder-space-xl);
}
.dklab-builder .dk-gap-sm {
  gap: var(--dkLab-builder-space-s);
}
.dklab-builder .dk-gap-md {
  gap: var(--dkLab-builder-space-m);
}
.dklab-builder .dk-gap-lg {
  gap: var(--dkLab-builder-space-l);
}
.dklab-builder .dk-p-sm {
  padding: var(--dkLab-builder-space-s);
}
.dklab-builder .dk-p-md {
  padding: var(--dkLab-builder-space-m);
}
.dklab-builder .dk-p-lg {
  padding: var(--dkLab-builder-space-l);
}
.dklab-builder .dk-media {
  display: block;
  overflow: hidden;
}
.dklab-builder .dk-media img,
.dklab-builder .dk-media picture,
.dklab-builder .dk-media svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dklab-builder .dk-media img {
  object-fit: cover;
}
.dklab-builder .dk-media-contain img {
  object-fit: contain;
}
.dklab-builder .dk-media-square {
  aspect-ratio: 1;
}
.dklab-builder .dk-media-wide {
  aspect-ratio: 16 / 9;
}
.dklab-builder .dk-media-portrait {
  aspect-ratio: 3 / 4;
}
.dklab-builder .dk-full {
  width: 100%;
}
.dklab-builder .dk-narrow {
  max-width: var(--dkLab-builder-width-narrow);
  margin-inline: auto;
}
.dklab-builder .dk-text > * + * {
  margin-block-start: 0.75em;
}
.dklab-builder .dk-text > * + h2,
.dklab-builder .dk-text > * + h3,
.dklab-builder .dk-text > * + h4 {
  margin-block-start: 1.5em;
}
.dklab-builder .dk-text ul,
.dklab-builder .dk-text ol {
  padding-inline-start: 1.25em;
}
.dklab-builder .dk-text li + li {
  margin-block-start: 0.35em;
}
.dklab-builder .dk-text img {
  max-width: 100%;
  height: auto;
}
/* ---- Editor-only: CONTENT slot wrapper (stripped before e-shop upload) ---- */
.dklab-builder-in {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
/* Property utilities applied to component roots (dk-*, is-*, padding-*) */
/*
 * Property utilities — classes applied to a component's root element at render time.
 *
 * Two groups live here:
 *   - `dk-*`  layout utilities written into component templates by hand
 *   - `is-*` / `padding-*`  values of e_component_property_value, appended to the root by
 *     BuilderRecordConverter when the admin picks a property value
 *
 * Both are scoped to .dklab-builder (docs/bem-components.md, rule 4). The names are the ones
 * already stored in the DB, so nothing has to be re-entered in the admin.
 */
.dklab-builder {
  /* ---- Alignment ---- */
  /* ---- Text ---- */
  /* ---- Property values: text alignment ---- */
  /* Stored in the DB as is-center / is-right / is-left. Safe as style classes; state must
     * never use this family (docs/bem-components.md, rule 3). */
  /* ---- Property values: padding ---- */
  /* ---- Property values: icon color ---- */
  /* Nastavují jen barvu ikony vkládané maskou, ne barvu textu. Pravidlo ikony má fallback na
     * --dkLab-builder-text, takže bez žádné z těchhle tříd je ikona černá.
     *
     * V adminu k tomu patří vlastnost s is_class = 1 a hodnotami: '' (default),
     * 'icon-color-green', 'icon-color-red', 'icon-color-accent'. */
  /*
     * Not styled here, on purpose — these property values need a design decision first:
     *   size-m / size-l / size-xl / size-xxl        image heights (350/450/590/700px in the
     *                                              original design — too design-specific to
     *                                              guess for a generic component)
     *   negative-top-* / negative-bottom-*         negative offsets, only meaningful with a
     *                                              known section layout
     *   is-list-dot-purple / is-list-dot-green     brand bullet colors
     */
}
.dklab-builder .dk-align-center {
  align-items: center;
}
.dklab-builder .dk-align-start {
  align-items: flex-start;
}
.dklab-builder .dk-align-end {
  align-items: flex-end;
}
.dklab-builder .dk-justify-center {
  justify-content: center;
}
.dklab-builder .dk-justify-between {
  justify-content: space-between;
}
.dklab-builder .dk-justify-end {
  justify-content: flex-end;
}
.dklab-builder .dk-text-center {
  text-align: center;
}
.dklab-builder .dk-text-right {
  text-align: right;
}
.dklab-builder .dk-text-left {
  text-align: left;
}
.dklab-builder .is-center {
  text-align: center;
}
.dklab-builder .is-right {
  text-align: right;
}
.dklab-builder .is-left {
  text-align: left;
}
.dklab-builder .padding-s {
  padding: var(--dkLab-builder-space-s);
}
.dklab-builder .padding-m {
  padding: var(--dkLab-builder-space-m);
}
.dklab-builder .padding-l {
  padding: var(--dkLab-builder-space-l);
}
.dklab-builder .padding-xl {
  padding: var(--dkLab-builder-space-xl);
}
.dklab-builder .padding-xxl {
  padding: calc(var(--dkLab-builder-space-xl) * 1.5);
}
.dklab-builder .icon-color-green {
  --dkLab-builder-icon-color: #2e7d32;
}
.dklab-builder .icon-color-red {
  --dkLab-builder-icon-color: #c62828;
}
.dklab-builder .icon-color-accent {
  --dkLab-builder-icon-color: var(--dkLab-builder-accent);
}
/* Component blocks (dkLab-builder-*) */
/*
 * Component blocks — the styles for what the builder uploads to the e-shop.
 *
 * Naming follows docs/bem-components.md: blocks are prefixed `dkLab-builder-`, which is why
 * these rules need no .dklab-builder scope — the prefix already makes them collision-proof and
 * keeps them working even if the wrapper is ever lost.
 *
 * Two habits keep components looking native in a foreign template:
 *   1. Do not declare what can be inherited. No font-family, no font-weight and no color on
 *      body text — the template supplies them, so the component matches its surroundings.
 *      Typography uses `em`, so it scales with whatever base size the template sets.
 *   2. A CTA uses Shoptet's own .btn / .btn-primary. There is deliberately no button style here.
 *
 * Everything visual comes from tokens.less — that is the one file to edit to change the look.
 */
/* ---- Basic components ---- */
.dkLab-builder-content > * + * {
  margin-block-start: var(--dkLab-builder-space-m);
}
.dkLab-builder-heading {
  /* Size, weight and color stay with the template's own heading styles. */
}
.dkLab-builder-heading h1,
.dkLab-builder-heading h2,
.dkLab-builder-heading h3,
.dkLab-builder-heading h4,
.dkLab-builder-heading h5,
.dkLab-builder-heading h6 {
  margin-block: 0;
}
.dkLab-builder-text {
  line-height: 1.6;
}
/* TINY output — arbitrary editor HTML, so rhythm is applied from the outside. */
.dkLab-builder-text--rich > * + * {
  margin-block-start: 0.75em;
}
.dkLab-builder-text--rich > * + h2,
.dkLab-builder-text--rich > * + h3,
.dkLab-builder-text--rich > * + h4 {
  margin-block-start: 1.5em;
}
.dkLab-builder-text--rich ul,
.dkLab-builder-text--rich ol {
  padding-inline-start: 1.25em;
}
.dkLab-builder-text--rich li + li {
  margin-block-start: 0.35em;
}
.dkLab-builder-html {
  display: block;
}
.dkLab-builder-link {
  /* Inline, so a link inside a paragraph keeps flowing with the text. */
  display: inline;
}
.dkLab-builder-image {
  display: block;
}
.dkLab-builder-image img,
.dkLab-builder-image picture,
.dkLab-builder-image svg {
  display: block;
  max-width: 100%;
  height: auto;
}
/* ---- Layout ---- */
.dkLab-builder-columns {
  /* Background and padding land here (from property utilities), the grid sits on __inner,
     * so a padding utility never fights the grid. */
  width: 100%;
}
.dkLab-builder-columns__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dkLab-builder-space-m);
}
@media (min-width: 768px) {
  .dkLab-builder-columns__inner {
    gap: var(--dkLab-builder-space-l);
  }
}
.dkLab-builder-columns__col {
  min-width: 0;
}
.dkLab-builder-columns__col > * + * {
  margin-block-start: var(--dkLab-builder-space-m);
}
/*
 * __col--left / __col--right carry no CSS on purpose — they mark which side a column is on, so
 * the assembled template says which content belongs where. Do NOT remove them as unused classes.
 * Side-specific styling (padding direction, mobile order) hangs off them when it is needed.
 */
.dkLab-builder-columns--2 {
  margin-block-end: 16px;
}
@media (min-width: 768px) {
  .dkLab-builder-columns--2 {
    margin-block-end: 24px;
  }
}
@media (min-width: 768px) {
  .dkLab-builder-columns--2 .dkLab-builder-columns__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dkLab-builder-columns--3 .dkLab-builder-columns__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ---- Icons ---- */
.dkLab-builder-icon-list__items {
  display: flex;
  flex-direction: column;
  row-gap: var(--dkLab-builder-space-m);
}
@media (min-width: 768px) {
  .dkLab-builder-icon-list__items {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dkLab-builder-space-l);
  }
}
.dkLab-builder-icon {
  display: flex;
  align-items: center;
  column-gap: var(--dkLab-builder-space-m);
}
@media (min-width: 768px) {
  .dkLab-builder-icon {
    flex-direction: column;
    row-gap: var(--dkLab-builder-space-s);
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }
}
.dkLab-builder-icon__image {
  flex: 0 0 auto;
  width: 34px;
  aspect-ratio: 1;
}
@media (min-width: 768px) {
  .dkLab-builder-icon__image {
    width: 54px;
  }
}
.dkLab-builder-icon__image img,
.dkLab-builder-icon__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dkLab-builder-icon__text {
  min-width: 0;
}
/* ---- Pages and articles ---- */
.dkLab-builder-article-header__title {
  /* The template owns h1 sizing; only the spacing below is ours. */
  margin-block: 0 var(--dkLab-builder-space-s);
}
.dkLab-builder-article-lead {
  font-size: 1.15em;
  line-height: 1.55;
}
.dkLab-builder-quote {
  /* Real <blockquote> root — reset the browser's default indent. */
  margin: 0;
}
.dkLab-builder-quote__inner {
  padding: var(--dkLab-builder-space-m) var(--dkLab-builder-space-l);
  border-radius: var(--dkLab-builder-radius-l);
  background-color: var(--dkLab-builder-surface);
  font-weight: 600;
}
.dkLab-builder-article-author {
  display: inline-flex;
  align-items: center;
  column-gap: var(--dkLab-builder-space-s);
  padding-inline-end: var(--dkLab-builder-space-m);
  overflow: hidden;
  border-radius: var(--dkLab-builder-radius);
  background-color: var(--dkLab-builder-surface);
  font-size: 0.9em;
}
.dkLab-builder-article-author__image {
  flex: 0 0 auto;
  width: 36px;
}
.dkLab-builder-article-author__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* ---- FAQ ---- */
.dkLab-builder-faq__subtitle {
  margin-block-start: var(--dkLab-builder-space-s);
  color: var(--dkLab-builder-text-muted);
}
.dkLab-builder-faq__list,
.dkLab-builder-faq-list {
  margin-block-start: var(--dkLab-builder-space-l);
}
.dkLab-builder-faq-item {
  border-block-end: 1px solid var(--dkLab-builder-border);
}
/* The child owns its separator and handles the last one — the parent slot never names it. */
.dkLab-builder-faq-item:last-child {
  border-block-end: 0;
}
.dkLab-builder-faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--dkLab-builder-space-m);
  padding-block: var(--dkLab-builder-space-m);
  cursor: pointer;
}
.dkLab-builder-faq-item__question h1,
.dkLab-builder-faq-item__question h2,
.dkLab-builder-faq-item__question h3,
.dkLab-builder-faq-item__question h4,
.dkLab-builder-faq-item__question h5,
.dkLab-builder-faq-item__question h6 {
  margin-block: 0;
}
/*
 * Toggle icon: SVG loaded through mask-image, so background-color drives the color and the icon
 * follows --dkLab-builder-accent (or any palette color the admin picks). The shapes live in
 * tokens.less as data: URIs — change them there, not here.
 *
 * background-image would render the same SVG but its color could not be changed from CSS: an SVG
 * loaded as an image is an opaque document, so neither fill nor color reaches inside it.
 * mask-image takes the same properties (position, size, repeat), so nothing is lost.
 */
.dkLab-builder-faq-item__toggle {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  -webkit-mask-image: var(--dkLab-builder-icon-plus);
  mask-image: var(--dkLab-builder-icon-plus);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--dkLab-builder-accent);
}
.dkLab-builder-faq-item--open .dkLab-builder-faq-item__toggle {
  -webkit-mask-image: var(--dkLab-builder-icon-minus);
  mask-image: var(--dkLab-builder-icon-minus);
}
.dkLab-builder-faq-item__answer {
  padding-block-end: var(--dkLab-builder-space-m);
}
/* ---- Checklist — výhody a nevýhody ---- */
/*
 * Jeden box s jedním CONTENT slotem. Do něj se vkládá všechno: nadpis jako komponenta a pak
 * jednotlivé položky. Box tedy nemá vlastní nadpisový element ani <ul> — položky jsou <div>y
 * s vlastní ikonou, takže seznam nepotřebuje list-style a nevzniká nevalidní <ul><div><li>.
 *
 * Ikona, tedy jediná věc, která výhodu odlišuje od nevýhody, sedí na položce. Box proto
 * nepotřebuje vědět, co v něm je, a jeden seznam může mít obojí.
 *
 * Položky jsou v adminu dvě samostatné komponenty, ale sdílejí jeden blok a liší se modifikátorem,
 * stejně jako columns--2 a columns--3.
 */
.dkLab-builder-checklist {
  padding: var(--dkLab-builder-space-s) var(--dkLab-builder-space-m);
}
/* Rozestup mezi vloženými prvky uvnitř boxu — nadpisem i položkami. */
.dkLab-builder-checklist > * + * {
  margin-block-start: 4px;
}
.dkLab-builder-checklist-item {
  display: flex;
  align-items: flex-start;
  column-gap: var(--dkLab-builder-space-s);
}
.dkLab-builder-checklist-item::before {
  content: '';
  flex: 0 0 auto;
  /* Výška jednoho řádku, ikona uvnitř 16px na střed — drží se na úrovni prvního řádku
         * textu i u víceřádkové položky, bez dolaďování marginem. */
  width: 16px;
  height: 1.5em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 16px;
  mask-size: 16px;
  /*
         * Výchozí barva je černá z textového tokenu. Přebít ji jde nastavením
         * --dkLab-builder-icon-color kdekoli výš — v adminu k tomu slouží hodnoty vlastnosti
         * icon-color-* z properties.less.
         */
  background-color: var(--dkLab-builder-icon-color, var(--dkLab-builder-text));
}
.dkLab-builder-checklist-item--pros::before {
  -webkit-mask-image: var(--dkLab-builder-icon-plus);
  mask-image: var(--dkLab-builder-icon-plus);
}
.dkLab-builder-checklist-item--cons::before {
  -webkit-mask-image: var(--dkLab-builder-icon-minus);
  mask-image: var(--dkLab-builder-icon-minus);
}
/*
 * Legacy component styles for the old m-* / p-* class names still stored in the DB component
 * templates. Delete this import — and the file — once every component template has been
 * re-entered in the admin with the new dkLab-builder-* classes.
 * See docs/bem-components.md, section 4.
 */
/*
 * LEGACY — temporary. Styles for the old m-* / p-* class names that are still stored in the
 * DB component templates.
 *
 * These names are being replaced by dkLab-builder-* blocks (docs/bem-components.md). The file
 * stays imported so nothing breaks while the component templates are re-entered in the admin
 * by hand. Once that is done, remove the @import from index.less and delete this file.
 *
 * Do not add anything new here — new styles belong in components.less.
 *
 * Known problem this file carries: it references variables that do not exist on a foreign
 * e-shop (--color-surface-light-blue, --font-primary, --radius-m, …), so those declarations
 * resolve to nothing there. That is expected; it is the reason the file is being replaced.
 */
@media (max-width: 767px) {
  .p-article-blockquote {
    padding-block: 8px;
    margin-block-end: 28px;
  }
}
@media (min-width: 768px) {
  .p-article-blockquote {
    padding-block: 12px;
    margin-block-end: 48px;
  }
}
.p-article-blockquote__in {
  font-weight: 600;
  background: var(--color-surface-light-blue);
}
@media (max-width: 767px) {
  .p-article-blockquote__in {
    padding: 12px 20px;
    border-radius: var(--radius-m);
    font-size: 15px;
  }
}
@media (min-width: 768px) {
  .p-article-blockquote__in {
    padding: 20px 32px;
    border-radius: var(--radius-l);
    font-size: 16px;
  }
}
.m-article-author {
  display: flex;
  column-gap: 8px;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--color-surface-content-blue);
}
@media (max-width: 767px) {
  .m-article-author {
    padding-inline-end: 12px;
    font-size: 13px;
  }
}
@media (min-width: 768px) {
  .m-article-author {
    padding-inline-end: 16px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .m-article-author__image {
    width: 30px;
  }
}
@media (min-width: 768px) {
  .m-article-author__image {
    width: 36px;
  }
}
.m-article-author__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-m);
}
/* m-article-header__title */
.h1-display,
.m-article-header__title,
.c-reviews-panel-rating__value,
.rate-average {
  line-height: 1.2;
  font-weight: 700;
  font-size: clamp(32px, 4.818vw, 50px);
  font-family: var(--font-primary);
}
@media (max-width: 767px) {
  .m-article-header__title {
    margin-block-end: 8px;
  }
}
@media (min-width: 768px) {
  .m-article-header__title {
    margin-block-end: 12px;
  }
}
/* perex */
.p-article__perex {
  clear: both;
}
@media (max-width: 767px) {
  .p-article__perex {
    margin-block-end: 20px;
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .p-article__perex {
    margin-block-end: 32px;
    font-size: 20px;
  }
}
.p-article__perex:first-letter {
  display: flex;
  float: left;
  font-weight: 800;
  text-align: center;
  color: var(--color-text-headline-blue);
  font-family: var(--font-secondary);
}
@media (max-width: 767px) {
  .p-article__perex:first-letter {
    line-height: 1;
    margin-top: -6px;
    padding: 0 12px;
    font-size: 56px;
  }
}
@media (min-width: 768px) {
  .p-article__perex:first-letter {
    line-height: 0.8;
    margin-top: -4px;
    padding: 0 16px;
    font-size: 72px;
  }
}
/* icons */
@media (max-width: 767px) {
  .m-icon-list {
    padding-block: 12px;
  }
}
@media (min-width: 768px) {
  .m-icon-list {
    padding-block: 20px;
  }
}
.m-icon-list__in {
  display: flex;
}
@media (max-width: 767px) {
  .m-icon-list__in {
    flex-direction: column;
    row-gap: 12px;
  }
}
@media (min-width: 768px) {
  .m-icon-list__in {
    justify-content: center;
    gap: 32px;
  }
}
.m-icon {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .m-icon {
    column-gap: 12px;
  }
}
@media (min-width: 768px) {
  .m-icon {
    flex-direction: column;
    row-gap: 12px;
    width: 20%;
    text-align: center;
    font-size: 16px;
  }
}
.m-icon__image {
  aspect-ratio: 1;
}
@media (max-width: 767px) {
  .m-icon__image {
    width: 34px;
  }
}
@media (min-width: 768px) {
  .m-icon__image {
    width: 54px;
  }
}
.m-icon__image img,
.m-icon__image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* card */
.m-card {
  z-index: 2;
  position: relative;
  max-width: 1228px;
  width: 100%;
  overflow: hidden;
  margin-inline: auto;
}
.m-card--2cols .m-card__in {
  display: grid;
}
@media (max-width: 767px) {
  .m-card--2cols .m-card__in {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}
@media (min-width: 768px) {
  .m-card--2cols .m-card__in {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
}
@media (max-width: 767px) {
  .m-card--2cols .m-card__col:has(.m-card__content) {
    order: -1;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .m-card--2cols .m-card__col.is-left .m-card__content {
    padding-inline-start: 40px;
  }
}
@media (min-width: 1200px) {
  .m-card--2cols .m-card__col.is-left .m-card__content {
    padding-inline-start: 100px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .m-card--2cols .m-card__col.is-right .m-card__content {
    padding-inline-end: 60px;
  }
}
@media (min-width: 1200px) {
  .m-card--2cols .m-card__col.is-right .m-card__content {
    padding-inline-end: 100px;
  }
}
@media (max-width: 767px) {
  .m-card--2cols .m-card__content {
    padding: 28px 24px 0 24px;
  }
}
@media (min-width: 768px) {
  .m-card--2cols .m-card__content {
    height: 100%;
    justify-content: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .m-card--2cols .m-card__content {
    padding-block: 40px;
  }
}
@media (min-width: 1200px) {
  .m-card--2cols .m-card__content {
    padding-block: 100px;
  }
}
.m-card--2cols .m-title h2 {
  line-height: 1.4;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(24px, 3.385vw, 30px);
}
.m-card--2cols .m-title h3 {
  line-height: 1.4;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(19px, 2.604vw, 22px);
}
.m-card--2cols .m-image {
  width: 100%;
  height: 100%;
}
.m-card--2cols .m-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
@media (max-width: 767px) {
  .m-card--2cols .m-specific-table {
    padding: 0 24px 28px 24px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .m-card--2cols .m-specific-table {
    padding: 40px;
  }
}
@media (min-width: 1200px) {
  .m-card--2cols .m-specific-table {
    padding: 60px 80px;
  }
}
@media (min-width: 768px) {
  .m-card--2cols .m-text {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .m-card--2cols .m-compare {
    padding: 0 24px 28px 24px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .m-card--2cols .m-compare {
    padding: 40px;
  }
}
@media (min-width: 1200px) {
  .m-card--2cols .m-compare {
    padding: 60px 80px;
  }
}
.m-card__col {
  position: relative;
  min-width: 1px;
}
/* Heading */
.m-title {
  line-height: 1.4;
  margin: 0;
}
/* Image */
/* ---- Images ---- */
img {
  max-width: 100%;
  height: auto;
}