/* 1ELEKTROKAMIN Product Card Platform 2.3.2
   Canonical ProductCard component. No context-specific DOM repair. */

.products__item.ek-pc2 {
  --ek-pc2-gap: 12px;
  --ek-pc2-border: #eceef2;
  --ek-pc2-muted: #858a94;
  --ek-pc2-text: #17191d;
  --ek-pc2-danger: #e43131;
  --ek-pc2-control: #747982;
  --ek-pc2-radius: var(--ui-radius, 12px);
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  overflow: hidden !important;
  border: 1px solid var(--ek-pc2-border) !important;
  border-radius: var(--ek-pc2-radius) !important;
  background: #fff;
  color: var(--ek-pc2-text);
  position: relative;
  z-index: 1;
  transition: box-shadow .18s ease, border-color .18s ease;
  box-sizing: border-box;
}

.products__item.ek-pc2:hover {
  overflow: hidden !important;
  border-color: #e1e4e9 !important;
  box-shadow: 0 8px 26px rgba(20, 24, 32, .08);
  z-index: 1;
}


/* Design System 1.1.x still contains compatibility rules for the legacy
   Technics card. Platform 2.0 wins only on the root; its old inner selectors
   intentionally match nothing in the canonical renderer. */
html.ek-pc-no-hover-expand .products__item.ek-pc2,
html.ek-pc-no-hover-expand .products__item.ek-pc2:hover,
html.ek-pc-no-hover-expand .products__item.ek-pc2.products__item--countdown:hover {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

html.ek-pc-no-hover-expand:not(.ek-pc-no-hover-effect) .products__item.ek-pc2:hover {
  z-index: 1 !important;
  overflow: hidden !important;
  border-color: #e1e4e9 !important;
  box-shadow: 0 8px 26px rgba(20, 24, 32, .08) !important;
}

.ek-pc2 *,
.ek-pc2 *::before,
.ek-pc2 *::after {
  box-sizing: border-box;
}

.ek-pc2__inner {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 8px 14px 14px;
}

.ek-pc2__media {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.ek-pc2__badges {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: calc(100% - 42px);
  pointer-events: none;
}

.ek-pc2__badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin: 0;
  padding: 2px 7px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f5;
  color: #3a3e45;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.ek-pc2__badge--sale,
.ek-pc2__badge--coupon,
.ek-pc2__badge--stockout {
  background: #fff0f0;
  color: var(--ek-pc2-danger);
}

.ek-pc2__badge--rating {
  background: #fff8df;
  color: #7d6300;
}


.ek-pc2__offer-label {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 20px;
  max-width: 88px;
  pointer-events: none;
}

.ek-pc2__offer-label .special-offer-label {
  position: static !important;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
}

.ek-pc2__offer-label .special-offer-label img {
  display: block;
  width: auto;
  max-width: 72px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.ek-pc2__credit-sticker {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 4px;
  pointer-events: none;
}

.ek-pc2__credit-sticker img {
  display: block;
  width: auto;
  max-width: 50px;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}

.ek-pc2__quick-actions {
  position: absolute;
  z-index: 7;
  top: 8px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ek-pc2__icon-action {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ek-pc2-control);
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease, transform .15s ease;
  box-shadow: none;
}

.ek-pc2__icon-action:hover,
.ek-pc2__icon-action:focus-visible {
  color: #444951;
}

.ek-pc2__icon-action:focus-visible {
  outline: 2px solid rgba(59, 85, 230, .25);
  outline-offset: 2px;
}

.ek-pc2__icon-action.is-loading {
  opacity: .45;
  pointer-events: none;
}

.ek-pc2__heart,
.ek-pc2__compare i {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.ek-pc2__heart {
  color: var(--ek-pc2-danger);
  text-align: center;
}

.ek-pc2__heart {
  display: inline-block;
}

.ek-pc2__compare.is-active {
  color: var(--ek-pc2-danger);
}

.ek-pc2__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
}

.ek-pc2__track {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.ek-pc2__track::-webkit-scrollbar {
  display: none;
}

.ek-pc2__slide {
  display: grid;
  place-items: center;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  padding: 22px 12px 10px;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.ek-pc2__slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.ek-pc2__image-placeholder {
  display: block;
  width: 72%;
  height: 72%;
  border-radius: var(--ek-pc2-radius);
  background: #f5f6f8;
}

.ek-pc2__gallery-arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.78);
  color: #a0a4ab;
  opacity: .8;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .15s ease, color .15s ease;
}

.ek-pc2__gallery-arrow:hover,
.ek-pc2__gallery-arrow:focus-visible {
  color: #5f646c;
  opacity: 1;
}

.ek-pc2__gallery-arrow:disabled {
  opacity: .18;
  cursor: default;
}

.ek-pc2__gallery-arrow--prev { left: 0; }
.ek-pc2__gallery-arrow--next { right: 0; }

.ek-pc2__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 18px;
  min-height: 18px;
  padding: 2px 0 4px;
  overflow: hidden;
}

.ek-pc2__dot {
  display: block;
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #c8cbd1;
  transition: width .15s ease, border-radius .15s ease, background .15s ease;
}

.ek-pc2__dot.is-active {
  width: 14px;
  flex-basis: 14px;
  border-radius: 999px;
  background: #777c84;
}

.ek-pc2__dot--placeholder {
  visibility: hidden;
}

.ek-pc2__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
  padding-top: 1px;
}

.ek-pc2__price {
  display: flex;
  min-height: 24px;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 8px;
  line-height: 1.2;
}

.ek-pc2__price-current {
  color: var(--ek-pc2-text);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.ek-pc2__price-old {
  color: #9a9ea5;
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
  white-space: nowrap;
}

.ek-pc2__price-discount {
  color: var(--ek-pc2-danger);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ek-pc2__meta {
  display: flex;
  min-height: 18px;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--ek-pc2-muted);
  font-size: 12px;
  line-height: 1.35;
}

.ek-pc2__brand {
  display: inline-block;
}

.ek-pc2__code {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.ek-pc2__code i {
  font-size: 10px;
}

.ek-pc2__code strong {
  font-weight: 600;
}

.ek-pc2__code::after {
  content: attr(data-feedback);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  z-index: 12;
  padding: 4px 6px;
  border-radius: 5px;
  background: #23262b;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3px);
  transition: .15s ease;
  pointer-events: none;
}

.ek-pc2__code.is-copied::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.ek-pc2__title {
  display: block;
  margin: 0;
  color: #26292e;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ek-pc2__title:hover {
  color: #3660bc;
}

.ek-pc2__offer {
  color: #5f646c;
  font-size: 11px;
  line-height: 1.35;
}

.ek-pc2__countdown {
  min-height: 16px;
  color: #70757d;
  font-size: 11px;
  line-height: 1.35;
}

.ek-pc2__buy {
  margin-top: auto;
  padding-top: 5px;
}

.ek-pc2__cart,
.ek-pc2__cart.btn,
.ek-pc2__cart.btn--cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: var(--ek-pc2-radius) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-indent: 0 !important;
  white-space: nowrap;
  text-decoration: none;
}

.ek-pc2__cart[disabled] {
  opacity: .55;
  cursor: not-allowed;
}


/* Catalog grid height: use Technics native row geometry.
   app.css already makes .row a wrapping flex container and Bootstrap/Technics
   columns in one flex line stretch to the height of the tallest column. Platform
   must not replace that row with CSS Grid and must not calculate heights in JS.
   The only bridge required for the canonical card is to make the native column
   itself a flex container so the ProductCard fills the stretched column. */
.ek-pc2-catalog--grid > .row > [class*="col-"] {
  display: flex !important;
  flex-direction: column;
  align-self: stretch !important;
}

.ek-pc2-catalog--grid > .row > [class*="col-"] > .ek-pc2 {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

.ek-pc2-block .products__slides.slick-initialized > .slick-list > .slick-track {
  display: flex !important;
  align-items: stretch;
}

.ek-pc2-block .products__slides.slick-initialized > .slick-list > .slick-track > .slick-slide {
  float: none !important;
  flex: 0 0 auto !important;
  height: auto !important;
  display: flex !important;
}

/* Compare keeps Technics' specification matrix. The native remove link stays,
   then the same canonical ProductCard is inserted before legacy thumb/title/
   price/action. Those legacy siblings are hidden only when the Platform shell
   exists, so compare falls back safely if decoration is unavailable. */
.ek-pc2-compare-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 8px 0 0;
}

.ek-pc2-compare-shell > .ek-pc2 {
  flex: 1 1 auto;
  height: auto !important;
}

.ek-pc2-compare-shell ~ .compare__column-item-image,
.ek-pc2-compare-shell ~ .compare__column-item-title,
.ek-pc2-compare-shell ~ .compare__column-item-price,
.ek-pc2-compare-shell ~ .compare__column-item-action {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .ek-pc2__gallery-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .ek-pc2:hover .ek-pc2__gallery-arrow,
  .ek-pc2:focus-within .ek-pc2__gallery-arrow {
    opacity: .8;
    visibility: visible;
    pointer-events: auto;
  }

  .ek-pc2:hover .ek-pc2__gallery-arrow:hover,
  .ek-pc2:focus-within .ek-pc2__gallery-arrow:focus-visible {
    opacity: 1;
  }

  .ek-pc2:hover .ek-pc2__gallery-arrow:disabled,
  .ek-pc2:focus-within .ek-pc2__gallery-arrow:disabled {
    opacity: .18;
    pointer-events: none;
  }
}

/* Outer Slick compatibility only: ProductCard internals remain identical. */
.products__slides > .slick-list > .slick-track > .slick-slide:has(.ek-pc2) {
  display: flex;
  height: auto;
}

.products__slides > .slick-list > .slick-track > .slick-slide:has(.ek-pc2) > div {
  display: flex;
  width: 100%;
  height: 100%;
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .ek-pc2__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .ek-pc2__gallery-arrow {
    display: none;
  }
}

@media (max-width: 767px) {
  .products__item.ek-pc2 {
    --ek-pc2-gap: 8px;
  }

  .ek-pc2__inner {
    padding: 7px 9px 10px;
  }

  .ek-pc2__badges {
    top: 7px;
    max-width: calc(100% - 36px);
  }

  .ek-pc2__badge {
    min-height: 17px;
    padding: 2px 5px;
    font-size: 9px;
  }

  .ek-pc2__quick-actions {
    top: 7px;
    gap: 6px;
  }

  .ek-pc2__icon-action {
    width: 22px;
    height: 22px;
  }

  .ek-pc2__slide {
    padding: 21px 7px 7px;
  }

  .ek-pc2__dots {
    height: 16px;
    min-height: 16px;
    gap: 4px;
    padding-bottom: 3px;
  }

  .ek-pc2__body {
    gap: 5px;
  }

  .ek-pc2__price {
    min-height: 20px;
    gap: 3px 6px;
  }

  .ek-pc2__price-current {
    font-size: 15px;
  }

  .ek-pc2__price-old,
  .ek-pc2__price-discount {
    font-size: 10.5px;
  }

  .ek-pc2__meta {
    min-height: 15px;
    gap: 3px 6px;
    font-size: 10.5px;
  }

  .ek-pc2__title {
    font-size: 1.4rem;
    line-height: 1.38;
  }

  .ek-pc2__offer,
  .ek-pc2__countdown {
    font-size: 10px;
  }

  .ek-pc2__buy {
    padding-top: 4px;
  }

  .ek-pc2__cart,
  .ek-pc2__cart.btn,
  .ek-pc2__cart.btn--cart {
    height: 39px;
    min-height: 39px;
    padding: 0 8px !important;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-pc2,
  .ek-pc2 *,
  .ek-pc2 *::before,
  .ek-pc2 *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Catalog view adapters (Grid / Inline / Micro)
   The ProductCard DOM stays canonical; only the outer layout changes.
   The adjacent legacy Technics wrapper is intentionally retained in source
   for OCMOD compatibility, but receives an empty products array and is hidden.
   -------------------------------------------------------------------------- */
.ek-pc2-catalog-shadow + .products__grid {
  display: none !important;
}

.ek-pc2-catalog--inline,
.ek-pc2-catalog--micro {
  display: grid;
  gap: 12px;
}

.ek-pc2-catalog--inline .products__item.ek-pc2,
.ek-pc2-catalog--micro .products__item.ek-pc2 {
  height: auto !important;
}

.ek-pc2-catalog--inline .ek-pc2__inner {
  flex-direction: row;
  gap: 18px;
  padding: 12px 16px;
}

.ek-pc2-catalog--inline .ek-pc2__media {
  flex: 0 0 240px;
  width: 240px;
  max-width: 32%;
}

.ek-pc2-catalog--inline .ek-pc2__body {
  min-width: 0;
  padding: 8px 0;
}

.ek-pc2-catalog--inline .ek-pc2__buy {
  width: min(220px, 100%);
}

.ek-pc2-catalog--micro {
  gap: 8px;
}

.ek-pc2-catalog--micro .ek-pc2__inner {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
}

.ek-pc2-catalog--micro .ek-pc2__media {
  flex: 0 0 124px;
  width: 124px;
}

.ek-pc2-catalog--micro .ek-pc2__slide {
  padding: 18px 5px 5px;
}

.ek-pc2-catalog--micro .ek-pc2__dots {
  min-height: 12px;
  height: 12px;
}

.ek-pc2-catalog--micro .ek-pc2__body {
  min-width: 0;
  padding: 4px 0;
  gap: 4px;
}

.ek-pc2-catalog--micro .ek-pc2__title {
  font-size: 13px;
}

.ek-pc2-catalog--micro .ek-pc2__buy {
  width: min(180px, 100%);
}

@media (max-width: 767px) {
  .ek-pc2-catalog--inline .ek-pc2__inner,
  .ek-pc2-catalog--micro .ek-pc2__inner {
    gap: 9px;
    padding: 7px 8px 9px;
  }

  .ek-pc2-catalog--inline .ek-pc2__media {
    flex-basis: 42%;
    width: 42%;
    max-width: 42%;
  }

  .ek-pc2-catalog--micro .ek-pc2__media {
    flex-basis: 96px;
    width: 96px;
  }

  .ek-pc2-catalog--inline .ek-pc2__buy,
  .ek-pc2-catalog--micro .ek-pc2__buy {
    width: 100%;
  }
}