/* bbmarkt home lane: only what the OpenCart page needs on top of theme.css */

/* the card action row is a real form in OpenCart, keep the static flex layout */
.mk-card form.mk-card-actions { margin: 0; }

/* Bootstrap (loaded by the OpenCart header) must not restyle the home components */
[data-source-block^="index:"] .btn,
[data-source-block^="index:"] .card {
  border-radius: 4px;
}
/* ...but the carousel arrows stay round, Bootstrap must not square them off */
[data-source-block^="index:"] .btn-circle,
.mk-hero-prev, .mk-hero-next,
.mk-slider-prev, .mk-slider-next,
.mk-hero-dot { border-radius: 9999px !important; }
[data-source-block^="index:"] .card { box-shadow: none; }
[data-source-block^="index:"] p { margin-bottom: 0; }
[data-source-block^="index:"] h2,
[data-source-block^="index:"] h3 { margin-bottom: 0; }
[data-source-block^="index:"] img { max-width: 100%; }
[data-source-block^="index:"] ul { margin: 0; padding: 0; list-style: none; }

/* rows: never expose a scrollbar, never clip a card */
.mk-slider { padding: 0; }
.mk-slider-track { scrollbar-width: none; -ms-overflow-style: none; }
.mk-slider-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* equal-height cards whatever the title length */
.mk-slider-item { align-items: stretch; }
.mk-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.mk-card-stock { min-height: 18px; }
.mk-card-price { white-space: nowrap; }
.mk-card-cart { white-space: nowrap; }

/* wishlist heart: red once stored, outline again after the second click */
.mk-card-wish.mk-wish-on,
.mk-card-heart.mk-wish-on,
.mk-card-wish.mk-wish-on i,
.mk-card-heart.mk-wish-on i { color: #e02424; }

/* FAQ: the toggle must stay the full-size invisible overlay DaisyUI expects.
   The shared checkbox polish in oc-common.css (16x16 + appearance:auto) shrank it,
   so clicks on the question never reached the input and nothing opened. */
.mk-faq .mk-collapse > input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 3rem;
  grid-column-start: 1;
  grid-row-start: 1;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

/* FAQ: closed on load, "+" / "-" instead of the DaisyUI chevron */
/* closed keeps the reference chevron; open shows the required "-" */
.mk-faq .mk-collapse.collapse-arrow > input:checked ~ .collapse-title:after {
  content: '\2212' !important;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: var(--td-navy, #162c64);
  box-shadow: none !important;
  transform: none !important;
  rotate: none !important;
  border: 0 !important;
  height: auto !important;
  width: auto !important;
  top: 50% !important;
  margin-top: -11px;
  inset-inline-end: 14px !important;
}
.mk-faq .mk-faq-list { grid-template-columns: 1fr; }

/* newsletter: input + button as one block, working browser autofill */
.mk-newsletter-form .mk-join-block { display: flex; align-items: stretch; }
.mk-newsletter-form .mk-news-input { border-right: 0; }
.mk-newsletter-form .mk-news-input,
.mk-newsletter-form .mk-news-btn { height: 46px; min-height: 46px; }

/* the OpenCart alert toast must not sit under the sticky header */
#alert { z-index: 1200; }

/* ============================================================
   hero: one carousel over the full container width, all slides
   the same size, nothing cropped (contain on the banner's own
   background colour), arrows vertically centred on both sides
   ============================================================ */
.mk-hero-full { width: 100%; }
/* the arrows/dots live in this wrapper, not inside the scrolling carousel,
   so they stay in place on every slide */
.mk-hero-wrap { position: relative; }
/* the daisyUI carousel still reserves a horizontal scrollbar strip, which made
   the slide a few pixels shorter than the promo next to it */
/* display:flex, not daisyUI's inline-flex: as an inline box the carousel left a
   ~6px baseline gap under it, so the row was taller than the banner itself */
.mk-hero-wrap .mk-hero { display: flex; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.mk-hero-wrap .mk-hero::-webkit-scrollbar { display: none; width: 0; height: 0; }
.mk-hero-full .mk-hero-slide { height: 420px; display: block; }
/* wide carousel on the left, the square Demoware promo standing on its own
   next to it (reference layout) */
.mk-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: 16px; align-items: stretch;
}
/* the carousel sets the row height (16:6.57 banner), the promo next to it just
   follows that height so both columns end on exactly the same line */
.mk-hero-grid .mk-hero-wrap { aspect-ratio: 1920 / 788; }
.mk-hero-grid .mk-hero-full .mk-hero { height: 100%; }
.mk-hero-grid .mk-hero-full .mk-hero-slide { height: 100%; }
/* contain, never cover: the third banner is 1920x462, cover cropped ~40% of its
   width off and blew the artwork up far too close */
.mk-hero-grid .mk-hero-full .mk-hero-slide img { object-fit: contain; }
.mk-hero-side {
  display: block; align-self: stretch; overflow: hidden; border-radius: 4px;
  position: relative; min-height: 0;
}
/* absolute, so the promo adds no height of its own to the grid row: the row is
   the carousel's height and both columns end on the same line */
.mk-hero-grid .mk-hero-side img { position: absolute; inset: 0; }
.mk-hero-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-hero-full .mk-hero-slide a { display: block; width: 100%; height: 100%; }
.mk-hero-full .mk-hero-slide img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
}
.mk-hero-full .mk-hero-prev,
.mk-hero-full .mk-hero-next {
  top: 50%; transform: translateY(-50%); margin: 0;
  width: 46px; height: 46px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============================================================
   category tiles: every tile the same size whatever the label,
   icon never cropped, each tile links to its own category
   ============================================================ */
/* 12 tiles come from the controller, so six per row fills exactly two rows */
.mk-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mk-cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 112px; padding: 18px 10px 14px; text-align: center;
  background: #fff; border: 1px solid #e3e7ef; border-radius: 6px;
  color: var(--td-navy, #162c64); text-decoration: none; transition: all .18s ease;
}
.mk-cat-tile:hover { border-color: var(--td-navy, #162c64); box-shadow: 0 6px 18px rgba(18, 37, 84, .10); color: var(--td-navy, #162c64); }
.mk-cat-icon {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2fa; color: var(--td-navy, #162c64); font-size: 19px; overflow: visible;
}
.mk-cat-tile:hover .mk-cat-icon { background: var(--td-yellow, #fecd1b); }
.mk-cat-name {
  font-size: 13.5px; font-weight: 700; line-height: 1.25; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================
   product rows: one shared card component, six per view, one
   card per click, looping, round arrows, no scrollbar
   ============================================================ */
.mk-prow-head { justify-content: center; margin-bottom: 18px; }
.mk-prow-h2 { text-align: center; font-size: 22px; font-weight: 700; color: #16255c; }
.mk-prow-slider { position: relative; }
.mk-prow-track { gap: 14px; scroll-behavior: smooth; }
.mk-prow-item { flex: 0 0 calc((100% - 5 * 14px) / 6); }
.mk-prow-item > .mk-card { width: 100%; height: 100%; }
.mk-prow .mk-card { display: flex; flex-direction: column; }
.mk-prow .mk-card-title { min-height: 38px; }
.mk-prow .mk-card-stock { min-height: 32px; align-items: flex-start; line-height: 1.25; }
.mk-prow .mk-card-stock .mk-dot { margin-top: 5px; flex: 0 0 auto; }
.mk-prow .mk-card-price { white-space: nowrap; }
.mk-prow .mk-card-fine { min-height: 26px; }
/* the cart button keeps icon + label on one line, also on phones */
.mk-prow .mk-card-cart span { display: inline !important; white-space: nowrap; }
.mk-prow .mk-card-cart {
  white-space: nowrap; flex-wrap: nowrap; line-height: 1; gap: 5px;
  font-size: 11.5px; padding: 0 6px; height: 40px; min-height: 40px;
}
.mk-prow .mk-card-cart i { line-height: 1; font-size: 12px; }
.mk-prow .mk-card-actions { gap: 5px; }
.mk-prow .mk-card-heart { flex: 0 0 36px; width: 36px; height: 40px; min-height: 40px; padding: 0; }

/* the arrows sit on the level of the product image, not in the middle of the
   whole card - otherwise they cover the title / rating line.
   14px figure padding + half of the 170px image = 99px */
.mk-prow .mk-prow-arrow {
  position: absolute; top: 99px; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #d5dceb; color: #16255c; box-shadow: 0 2px 10px rgba(18, 37, 84, .12);
}
.mk-prow .mk-prow-arrow:hover { background: var(--td-yellow, #fecd1b); border-color: var(--td-yellow, #fecd1b); color: #000; }
.mk-prow .mk-slider-prev { left: -16px; }
.mk-prow .mk-slider-next { right: -16px; }

.mk-prow-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 16px; }
.mk-prow-dot { width: 11px; height: 11px; border-radius: 999px; background: #c9ced8; display: block; }
.mk-prow-dot-on { width: 30px; background: #16255c; }

@media (max-width: 1279px) {
  .mk-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-prow-item { flex: 0 0 calc((100% - 3 * 14px) / 4); }
  .mk-hero-full .mk-hero-slide { height: 320px; }
}

@media (max-width: 1023px) {
  .mk-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-prow-item { flex: 0 0 calc((100% - 2 * 14px) / 3); }
  .mk-prow .mk-slider-prev { left: -6px; }
  .mk-prow .mk-slider-next { right: -6px; }
  .mk-hero-full .mk-hero-slide { height: 260px; }
  /* no room for two columns: the square promo moves under the carousel and
     keeps its own square shape again, there is no row height to match */
  .mk-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-hero-side { min-height: 0; height: auto; aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin: 0 auto; }
}

/* from here theme.css shrinks the card image to 130px, the figure padding is
   still 14px: 14 + 65 = 79px */
@media (max-width: 760px) {
  .mk-prow .mk-prow-arrow { top: 79px; }
}

@media (max-width: 640px) {
  .mk-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk-cat-tile { min-height: 104px; }
  .mk-prow-h2 { font-size: 18px; }
  .mk-prow-track { gap: 10px; }
  .mk-prow-item { flex: 0 0 calc((100% - 10px) / 2); }
  .mk-prow .mk-card-figure { padding: 10px; }
  .mk-prow .mk-card-body { padding: 0 10px 10px; }
  /* the row cards use the same icon only buy button as every other card */
  .mk-prow .mk-card-cart span { display: none !important; }
  .mk-prow .mk-card-cart { font-size: 13px; padding: 0 6px; gap: 0; }
  .mk-prow .mk-card-cart i { font-size: 15px; }
  .mk-prow .mk-card-heart { flex: 0 0 40px; width: 40px; }
  /* figure padding drops to 10px here: 10 + 65 = 75px */
  .mk-prow .mk-prow-arrow { width: 34px; height: 34px; min-height: 34px; top: 75px; }
  .mk-prow .mk-slider-prev { left: -8px; }
  .mk-prow .mk-slider-next { right: -8px; }
  /* on a phone the 1920x788 banner shrank to a ~150px strip and the headline was
     barely readable: a taller box plus cover shows it much larger. 1920/1180 is as
     far as the zoom can go before the widest banner (Anycubic, text from 348 to
     1570 of 1920) loses its subline; the slides carry their own focus point
     (--td-hero-pos), so the camping banner keeps its left headline */
  .mk-hero-grid .mk-hero-wrap { aspect-ratio: 1920 / 1180; }
  /* edge to edge on a phone: the 12px container padding costs ~7% of the banner,
     and the artwork scales with the width, so dropping it makes the whole banner
     (headline included) noticeably bigger. The square promo below keeps its gutter */
  .mk-hero-grid { padding-left: 0; padding-right: 0; }
  .mk-hero-grid .mk-hero-wrap,
  .mk-hero-grid .mk-hero-full .mk-hero-slide img { border-radius: 0; }
  .mk-hero-grid .mk-hero-side { width: calc(100% - 24px); }
  .mk-hero-full .mk-hero-slide { height: 100%; }
  .mk-hero-grid .mk-hero-full .mk-hero-slide img,
  .mk-hero-full .mk-hero-slide img {
    object-fit: cover;
    object-position: var(--td-hero-pos, center);
  }
  .mk-hero-full .mk-hero-prev,
  .mk-hero-full .mk-hero-next { width: 34px; height: 34px; min-height: 34px; }
}

/* ============================================================
   section-03 lane: "Top-Angebot / Unsere Shop-Neuheiten"
   reference: two columns - one big deal card + a 4-up slider
   ============================================================ */
.td3-grid { display: grid; grid-template-columns: 401px minmax(0, 1fr); gap: 28px; align-items: start; }
.td3-head { margin-bottom: 12px; }
.td3-h2 { font-size: 21px; font-weight: 700; color: #16337a; }
.td3-col { min-width: 0; }

/* ---- shared card look (scoped to this section) ---- */
.td3-card { border: 1px solid #e3e6ec; border-radius: 6px; background: #fff; box-shadow: none; overflow: hidden; }
.td3-card:hover { box-shadow: 0 6px 18px rgba(18, 37, 84, .10); }
.td3-card-figure { position: relative; padding: 10px 10px 0; }
.td3-card-figure img { width: 100%; height: 160px; object-fit: contain; display: block; }
.td3-badge { position: absolute; top: 10px; left: 10px; z-index: 2; border-radius: 3px; }
.td3-card-brand { position: absolute; top: 10px; right: 10px; width: auto; height: 32px; object-fit: contain; }
.td3-card-body { padding: 12px 14px 14px; gap: 6px; }
.td3-card-title {
  font-size: 14.5px; font-weight: 700; line-height: 1.32; color: #16337a; min-height: 38px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.td3-card-stock { font-size: 12px; line-height: 1.3; color: #1e8e3e; align-items: flex-start; min-height: 32px; }
.td3-card-stock .mk-dot { margin-top: 4px; flex: 0 0 auto; }
.td3-card-price { font-size: 19px; font-weight: 800; color: #1e8e3e; margin: 0; }
.td3-card-evp { font-size: 11.5px; color: #8a8a8a; margin: 0; }
.td3-card-fine { font-size: 11.5px; color: #8a8a8a; margin: 0; text-decoration: none; }
.td3-card-details {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  height: 36px; min-height: 36px; border-radius: 4px; font-size: 14px; font-weight: 600;
  background: #16255c; border: 1px solid #16255c; color: #fff; text-transform: none;
}
.td3-card-details:hover { background: #0f1b45; border-color: #0f1b45; color: #fff; }

/* ---- left column: the single big "Top-Angebot" card ---- */
.td3-deal-wrap { position: relative; }
.td3-col-deal .td3-card-figure { padding: 18px 18px 0; }
.td3-col-deal .td3-card-figure img { height: 232px; }
.td3-col-deal .td3-card-body { padding: 16px 18px 18px; }
.td3-col-deal .td3-card-title { font-size: 17px; min-height: 44px; }
.td3-col-deal .td3-card-price { font-size: 22px; }
.td3-col-deal .td3-card-stock { min-height: 18px; }
.td3-col-deal .td3-card-details { height: 40px; min-height: 40px; }
.td3-col-deal .td3-card:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #d6003c, #f07f13, #f5d312, #34a853, #1a73e8, #7b2ff7);
}

/* ---- right column: slider of four cards + dots ---- */
.td3-slider { position: relative; }
.td3-track { gap: 18px; }
.td3-item { flex: 0 0 calc((100% - 3 * 18px) / 4); }
.td3-arrow { top: 46%; }
.td3-slider .mk-slider-prev { left: 6px; }
.td3-slider .mk-slider-next { right: 6px; }
.td3-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 14px; }
.td3-dot { width: 13px; height: 13px; border-radius: 999px; background: #c9ced8; display: block; }
.td3-dot-on { width: 34px; background: #16255c; }

@media (max-width: 1279px) {
  .td3-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 20px; }
  .td3-item { flex: 0 0 calc((100% - 2 * 18px) / 3); }
}

@media (max-width: 1023px) {
  .td3-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .td3-col-deal .td3-card-figure img { height: 200px; }
  .td3-item { flex: 0 0 calc((100% - 18px) / 2); }
}

@media (max-width: 640px) {
  .td3-h2 { font-size: 18px; }
  .td3-track { gap: 12px; }
  .td3-item { flex: 0 0 calc((100% - 12px) / 2); }
  .td3-card-figure img { height: 130px; }
  .td3-col-deal .td3-card-figure img { height: 180px; }
  .td3-card-price { font-size: 17px; }
  .td3-slider .td3-arrow { width: 32px; height: 32px; min-height: 32px; }
  .td3-slider .mk-slider-prev { left: -6px; }
  .td3-slider .mk-slider-next { right: -6px; }
  .td3-dot { width: 10px; height: 10px; }
  .td3-dot-on { width: 26px; }
}

/* ------------------------------------------------------------------ */
/* section-07: "Große Lagerräumung – jetzt sparen" (clearance row)     */
/* ------------------------------------------------------------------ */
.td7-head { justify-content: center; margin-bottom: 18px; }
.td7-h2 { text-align: center; font-size: 22px; font-weight: 700; color: #16255c; }

.td7-track { gap: 14px; }
.td7-item { flex: 0 0 calc((100% - 5 * 14px) / 6); }
.td7-card { border: 1px solid #e3e7ef; border-radius: 4px; box-shadow: none; background: #fff; }
.td7-card:hover { box-shadow: 0 6px 18px rgba(18, 37, 84, .10); }

.td7-figure { padding: 12px 12px 0; }
.td7-figure img { height: 150px; }
.td7-wish {
  position: absolute; right: 6px; bottom: -4px; top: auto;
  width: 30px; height: 30px; min-height: 30px;
  color: #56607a; background: transparent; border: 0;
}
.td7-wish:hover { background: transparent; color: #16255c; }
.td7-wish i { font-size: 17px; }

.td7-body { padding: 14px 14px 14px; gap: 7px; }
.td7-title {
  font-size: 15px; font-weight: 700; color: #16255c; line-height: 1.28;
  min-height: 38px; -webkit-line-clamp: 2;
}
.td7-stock { font-size: 12px; color: #1e8e3e; align-items: flex-start; min-height: 30px; line-height: 1.25; }
.td7-stock .mk-dot { margin-top: 4px; background: #1e8e3e; }
.td7-price { font-size: 20px; font-weight: 800; color: #1e8e3e; margin: 0; white-space: nowrap; }
.td7-evp {
  font-size: 11.5px; color: #6f7a94; margin: 0; line-height: 1.3;
  text-decoration: none;
}
.td7-evp-empty { min-height: 15px; text-decoration: none; }
.td7-fine {
  font-size: 11.5px; color: #6f7a94; line-height: 1.3; min-height: 30px;
  text-decoration: none;
}
.td7-details {
  margin-top: auto; width: 100%; height: 38px; min-height: 38px; line-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #16255c; border: 1px solid #16255c; color: #fff;
  border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.td7-details:hover { background: #1d3179; border-color: #1d3179; color: #fff; }

.td7-slider .td7-arrow {
  width: 34px; height: 34px; min-height: 34px;
  background: #eceff5; border: 0; color: #8c95a8; box-shadow: none;
}
.td7-slider .td7-arrow:hover { background: #dde2ec; border: 0; color: #16255c; }
.td7-slider .td7-arrow i { font-size: 14px; }
.td7-slider .mk-slider-prev { left: 12px; }
.td7-slider .mk-slider-next { right: 12px; }

.td7-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 16px; }
.td7-dot { width: 13px; height: 13px; border-radius: 999px; background: #c9ced8; display: block; }
.td7-dot-on { width: 34px; background: #16255c; }

@media (max-width: 1279px) {
  .td7-item { flex: 0 0 calc((100% - 3 * 14px) / 4); }
}

@media (max-width: 1023px) {
  .td7-item { flex: 0 0 calc((100% - 2 * 14px) / 3); }
}

@media (max-width: 640px) {
  .td7-h2 { font-size: 18px; }
  .td7-track { gap: 12px; }
  .td7-item { flex: 0 0 calc((100% - 12px) / 2); }
  .td7-figure img { height: 130px; }
  .td7-price { font-size: 17px; }
  .td7-slider .td7-arrow { width: 30px; height: 30px; min-height: 30px; }
  .td7-slider .mk-slider-prev { left: -4px; }
  .td7-slider .mk-slider-next { right: -4px; }
  .td7-dot { width: 10px; height: 10px; }
  .td7-dot-on { width: 26px; }
}

/* ------------------------------------------------------------------ */
/* section-05: "Exklusive IFA-Neuheiten" (IFA product row)             */
/* ------------------------------------------------------------------ */
.td5-head { justify-content: center; margin-bottom: 18px; }
.td5-h2 { text-align: center; font-size: 22px; font-weight: 700; color: #16255c; }

.td5-track { gap: 25px; }
.td5-item { flex: 0 0 calc((100% - 5 * 25px) / 6); }
.td5-card { border: 1px solid #e3e7ef; border-radius: 4px; box-shadow: none; background: #fff; }
.td5-card:hover { box-shadow: 0 6px 18px rgba(18, 37, 84, .10); }

.td5-figure { padding: 12px 12px 0; }
.td5-figure img { height: 150px; }
.td5-wish {
  position: absolute; right: 6px; bottom: -4px; top: auto;
  width: 30px; height: 30px; min-height: 30px;
  color: #56607a; background: transparent; border: 0;
}
.td5-wish:hover { background: transparent; color: #16255c; }
.td5-wish i { font-size: 17px; }

.td5-body { padding: 14px; gap: 7px; }
.td5-title {
  font-size: 15px; font-weight: 700; color: #16255c; line-height: 1.28;
  min-height: 38px; -webkit-line-clamp: 2;
}
.td5-stock { font-size: 12px; color: #7a8494; align-items: flex-start; min-height: 30px; line-height: 1.25; }
.td5-stock .mk-dot { margin-top: 4px; }
.td5-price { font-size: 20px; font-weight: 800; color: #2ea830; margin: 0; white-space: nowrap; }
.td5-evp { font-size: 11.5px; color: #7a8494; margin: 0; line-height: 1.3; }
.td5-evp-empty { display: none; }
.td5-fine {
  font-size: 11.5px; color: #7a8494; line-height: 1.3; min-height: 30px;
  text-decoration: none;
}
.td5-details {
  margin-top: auto; width: 100%; height: 38px; min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #111f3f; border: 1px solid #111f3f; color: #fff;
  font-size: 15px; font-weight: 600; border-radius: 6px;
  white-space: nowrap; flex-wrap: nowrap; text-transform: none;
}
.td5-details:hover { background: #0a1630; border-color: #0a1630; color: #fff; }

.td5-slider .td5-arrow {
  width: 36px; height: 36px; min-height: 36px; top: 57%;
  background: #eceef2; border: 0; color: #6b7280; box-shadow: none;
}
.td5-slider .td5-arrow:hover { background: #dfe3ea; border: 0; color: #16255c; }
.td5-slider .mk-slider-prev { left: 8px; }
.td5-slider .mk-slider-next { right: 8px; }

.td5-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 14px; }
.td5-dot { width: 13px; height: 13px; border-radius: 999px; background: #c9ced8; display: block; }
.td5-dot-on { width: 34px; background: #16255c; }

@media (max-width: 1279px) {
  .td5-track { gap: 18px; }
  .td5-item { flex: 0 0 calc((100% - 4 * 18px) / 5); }
}

@media (max-width: 1023px) {
  .td5-item { flex: 0 0 calc((100% - 2 * 18px) / 3); }
}

@media (max-width: 640px) {
  .td5-h2 { font-size: 18px; }
  .td5-track { gap: 12px; }
  .td5-item { flex: 0 0 calc((100% - 12px) / 2); }
  .td5-figure img { height: 130px; }
  .td5-price { font-size: 17px; }
  .td5-slider .td5-arrow { width: 30px; height: 30px; min-height: 30px; }
  .td5-slider .mk-slider-prev { left: -4px; }
  .td5-slider .mk-slider-next { right: -4px; }
  .td5-dot { width: 10px; height: 10px; }
  .td5-dot-on { width: 26px; }
}