/* ==========================================================================
   CMS9 · Тема "Default" — P2 HOME polish
   1) Sidebar mini product widgets (ЛІДЕРИ ПРОДАЖІВ / АКЦІЇ) — dt-wlist rows
   2) Sidebar news list + blog cover card (latest_news)
   3) Real carousels: scroll-snap track for product/category grids + brands row
      (JS toggles .dt-carousel-on on a [data-dt-carousel] wrapper; grid stays
      a plain grid when JS is off)
   Monochrome "dt" tokens (--accent/--radius/--line/--surface/--pill).
   New classes / .dt-scoped overrides only; no edits to other css files.
   ========================================================================== */

/* ================= 1. SIDEBAR MINI PRODUCT WIDGETS ====================== */
.dt .dt-wrow__thumb img { width: 100%; height: 100%; object-fit: contain; }
.dt .dt-wrow__meta { display: block; flex: 1; min-width: 0; }
.dt .dt-wrow__title { display: block; }
.dt .dt-wrow:hover .dt-wrow__title { text-decoration: underline; }
.dt .dt-wrow__pricing { display: flex; gap: 7px; align-items: baseline; margin-top: 3px; }
.dt .dt-wrow__pricing .dt-wrow__price { margin-top: 0; }

/* ==================== 2. NEWS LIST + BLOG COVER CARD ==================== */
.dt .dt-news__list { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }

.dt .dt-blogcard { display: block; overflow: hidden; }
.dt .dt-blogcard__img { display: block; }
.dt .dt-blogcard__img img { width: 100%; height: 100%; object-fit: cover; }
.dt .dt-blogcard__body { display: block; }
.dt .dt-blogcard__body .dt-news__date { display: block; }
.dt .dt-blogcard__title { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; margin-top: 4px; }
.dt .dt-blogcard:hover .dt-blogcard__title { text-decoration: underline; }

/* ========================== 3. CAROUSELS ================================ */
/* JS hides arrows via [hidden] when the whole track fits */
[data-dt-carousel] [hidden] { display: none !important; }
.dt [data-dt-cprev].is-off,
.dt [data-dt-cnext].is-off { opacity: .35; pointer-events: none; }

/* product / category grids -> horizontal scroll-snap track (JS adds the class
   on the [data-dt-carousel] wrapper; without JS the grid renders as usual) */
.dt .dt-carousel-on .dt-grid {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dt .dt-carousel-on .dt-grid::-webkit-scrollbar { display: none; }
.dt .dt-carousel-on .dt-grid--4 > * { flex: 0 0 calc((100% - 3 * 18px) / 4); min-width: 0; scroll-snap-align: start; }
.dt .dt-carousel-on .dt-grid--cats > * { flex: 0 0 calc((100% - 5 * 14px) / 6); min-width: 0; scroll-snap-align: start; }
@media (max-width: 1100px) {
  .dt .dt-carousel-on .dt-grid--4 > * { flex-basis: calc((100% - 2 * 18px) / 3); }
  .dt .dt-carousel-on .dt-grid--cats > * { flex-basis: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 640px) {
  .dt .dt-carousel-on .dt-grid--4 > * { flex-basis: calc((100% - 18px) / 2); }
  .dt .dt-carousel-on .dt-grid--cats > * { flex-basis: calc((100% - 2 * 14px) / 3); }
}

/* brands row (dt redesign of widgets/brands.twig): track scrolls natively even
   without JS, arrows just page it */
.dt .dt-brands__track {
  justify-content: flex-start; gap: 34px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dt .dt-brands__track::-webkit-scrollbar { display: none; }
.dt .dt-brands__item { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; }
.dt .dt-brands__img { max-height: 36px; width: auto; }
.dt .dt-brands__arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer; user-select: none;
}