/*
 * edrive interactions — minimal tasteful hover/transition layer on top of
 * Webflow's exported CSS. Adds lift/scale/shadow micro-interactions to
 * cards, buttons, images, and nav links without changing layout or colors.
 *
 * Philosophy: subtle motion (200-250ms ease-out, 1.02-1.05 transforms,
 * 4-6px lifts). The goal is "alive" not "juicy" — restraint matters more
 * than expressiveness on a B2B site.
 */

/* ---------- Buttons: two distinct hover styles ---------- */
/* Inspected css/emobil.webflow.css to identify visual style:
   SOLID (has background-color + border) → lift + scale + shadow:
     .button, .button-2, .button-3, .button-6, .button-secondary, .button-se,
     submit inputs/buttons.
   TEXT-LINK (no background, just text + optional icon) → opacity dim only:
     .button-link, .button-link-3, .button-linkblock, .button-color-yellow,
     plus any solid class carrying the .is-link modifier.
   The text-link rule is the LAST in this section so it always wins on
   shared classes (e.g. .button.button-link). */

/* ---- SOLID BUTTONS ---- */
.button:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow),
.button-2:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow),
.button-3:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow),
.button-6:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow),
.button-secondary:not(.is-link),
.button-se,
input[type="submit"],
button[type="submit"]:not(.w-nav-button):not(.navbar1_menu-button) {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}

.button:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):hover,
.button-2:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):hover,
.button-3:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):hover,
.button-6:not(.is-link):not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):hover,
.button-secondary:not(.is-link):hover,
.button-se:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.w-nav-button):not(.navbar1_menu-button):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
}

.button:not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):active,
.button-2:not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):active,
.button-3:not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):active,
.button-6:not(.button-link):not(.button-link-3):not(.button-linkblock):not(.button-color-yellow):active,
.button-secondary:active,
.button-se:active,
input[type="submit"]:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
}

/* ---- TEXT-LINK BUTTONS ---- */
.button-link,
.button-link-3,
.button-linkblock,
.button-color-yellow,
.button.is-link,
.button-2.is-link,
.button-3.is-link,
.button-6.is-link {
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
              color 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: none !important;
  box-shadow: none !important;
}

.button-link:hover,
.button-link-3:hover,
.button-linkblock:hover,
.button-color-yellow:hover,
.button.is-link:hover,
.button-2.is-link:hover,
.button-3.is-link:hover,
.button-6.is-link:hover {
  opacity: 0.72 !important;
  transform: none !important;
  box-shadow: none !important;
}

.button-link:active,
.button-link-3:active,
.button-linkblock:active,
.button-color-yellow:active,
.button.is-link:active,
.button-2.is-link:active,
.button-3.is-link:active,
.button-6.is-link:active {
  opacity: 0.55 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- Card-like block links ---------- */
/* Three groups:
   (a) Stacked-content patterns (blog52, blog4_item-2) — visually flat,
       no card background. Apply NO lift/shadow; only image zoom + title
       color change so we don't create a "framed" box look.
   (b) True card patterns with resting chrome (link-kartica, layout228_item,
       pricing19_plan) — discrete cards with bg+border+radius+padding at
       rest; lift+shadow on hover looks natural here.
   (c) Info-grid patterns without resting chrome shipped by Webflow
       (layout197/203/308) — we add subtle resting chrome below so the
       hover lift makes sense (otherwise it looks like a frame appearing
       out of nowhere on a white page).
   Bullet rows (layout16/18/207, just display:flex) and transparent
       items (layout237/241, pservice) get NO hover — they're not cards. */

/* Group (b): true cards + feature-grid items get lift+shadow.
   Only patterns that have visible chrome at rest (background, border,
   radius, padding) get the lift+shadow hover — otherwise hovering creates
   a "frame popping out of nowhere" effect because there's no card visible
   at rest. Info-grid layouts without resting chrome (layout197/203/308)
   get resting chrome added below so hover makes sense. Bullet rows
   (layout16/18/207 — pure display:flex) get no hover at all. */
.link-kartica,
.project-link-card,
.charger-card,
.partner-logo-link,
.layout197_item,
.layout203_item,
.layout228_item,
.layout241_item,
.layout308_item,
a.layout121_timeline-step,
.pricing19_plan {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}

.link-kartica:hover,
.project-link-card:hover,
.charger-card:hover,
.partner-logo-link:hover,
.layout197_item:hover,
.layout203_item:hover,
.layout228_item:hover,
.layout241_item:hover,
.layout308_item:hover,
a.layout121_timeline-step:hover,
.pricing19_plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.18);
}

/* Resting chrome for info-grid cards that Webflow shipped without any
   visible border/radius. Without this, the hover lift looks like a frame
   appearing out of nowhere on a white page. Give them a subtle card look
   at rest, then hover lifts a proper card. */
.layout197_item,
.layout203_item,
.layout241_item,
.layout308_item {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.08);
}

/* Equal-height cards across each grid row. Webflow shipped these
   containers with place-items:start which makes cards take only their
   natural height — long titles push some cards taller than neighbors
   and the visual is uneven. Override to stretch so all cards in a row
   share the tallest card's height. */
.layout228_component,
.layout241_list,
.layout308_list {
  place-items: stretch !important;
}
.layout197_item,
.layout203_item,
.layout228_item,
.layout241_item,
.layout308_item {
  height: 100%;
}

/* Group (a): stacked blog items get color change on title hover only */
.blog52_title-link,
.blog4_item-link-2 .heading-style-h5,
.blog48_item-link h3 {
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.blog52_item:hover .blog52_title-link,
.blog4_item-2:hover .heading-style-h5,
.blog48_item:hover h3 {
  color: #2895f7;
}

/* Make sure stacked items don't accidentally lift or get shadows. */
.blog52_item,
.blog4_item-2,
.blog48_item {
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- Images inside hoverable containers ---------- */
/* Slow zoom on hover, scoped to image wrappers we mark with overflow:hidden. */
.blog52_image-wrapper img,
.blog4_image-wrapper-2 img,
.blog48_image-wrapper img,
.blog48_item-link img,
.blog4_item-link-2 img,
.link-kartica img,
.project-link-card img,
.layout1_image-wrapper img,
.slider-image-div img {
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.blog52_image-wrapper:hover img,
.blog52_image-link:hover img,
.blog4_image-wrapper-2:hover img,
.blog48_image-wrapper:hover img,
.blog48_item-link:hover img,
.blog4_item-link-2:hover img,
.link-kartica:hover img,
.project-link-card:hover img {
  transform: scale(1.05);
}

/* Containers that should clip overflowing zoomed children. */
.blog52_image-wrapper,
.blog4_image-wrapper-2,
.blog48_image-wrapper,
.blog48_item-link,
.blog4_item-link-2,
.link-kartica,
.project-link-card,
.slider-image-div,
.layout1_image-wrapper {
  overflow: hidden;
}

/* ---------- Navigation ---------- */
/* Subtle color shift + underline slide for header/footer nav links. */
.navbar1_link,
.w-nav-link,
.footer1_link,
.footer1_legal-link,
.footer1_social-link,
.textlink,
.kaolink {
  position: relative;
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar1_link::after,
.footer1_link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar1_link:hover::after,
.footer1_link:hover::after {
  transform: scaleX(1);
}

.footer1_legal-link:hover,
.footer1_social-link:hover,
.textlink:hover,
.kaolink:hover {
  opacity: 0.72;
}

/* ---------- Form inputs ---------- */
/* Soft focus ring on inputs/textareas — matches the rest of the motion. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.15);
}

/* ---------- Focus outlines on card-like links ---------- */
/* Browser default :focus ring fires on mouse clicks too (in older specs)
   and creates a visible blue frame that doesn't belong to the visual design.
   Suppress it on card patterns but keep a clean keyboard-only :focus-visible
   ring so keyboard nav stays accessible. */
.blog52_image-link,
.blog52_title-link,
.blog52_category-link,
.blog48_item-link,
.blog4_item-link-2,
.link-kartica,
.pservice,
.project-link-card,
a.layout237_item,
a.layout121_timeline-step,
.w-dyn-item > a,
.charger-card,
.partner-logo-link {
  outline: none;
}

/* Suppress browser focus/active outlines on every clickable anchor.
   The lift+shadow hover effect serves as the interactive affordance.
   Aggressive !important + every state so nothing leaks through. */
a,
a:focus,
a:hover,
a:active,
a:focus-visible,
a:focus-within {
  outline: none !important;
}
a:focus,
a:active {
  -webkit-tap-highlight-color: transparent;
}
/* Some Webflow class names use box-shadow on focus — neutralize. */
.blog52_image-link:focus,
.blog52_title-link:focus,
.blog52_category-link:focus,
.blog48_item-link:focus,
.blog4_item-link-2:focus,
.link-kartica:focus,
.pservice:focus,
.project-link-card:focus,
.w-dyn-item > a:focus {
  box-shadow: none !important;
}

/* ---------- Product detail page: left column card ---------- */
/* Match the right column (.product-header7_product-details) styling so
   the image + color picker sit inside a matching white card with rounded
   corners. Without this, the image floats on the page background and
   the layout feels asymmetric. */
.product-header7_product_image {
  background-color: var(--white, #ffffff);
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.product-header7_product_image .mainimage {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

/* ---------- Product detail tags: subtle hover on whole pill ---------- */
/* Target the OUTER element that carries the visible background
   (.idealfor_text, .snaga, .brzina, .konektor all have background-color
   set in emobil.webflow.css). Hovering the inner .tip text would create
   a "card on card" frame which looks wrong. */
.idealfor_text,
.snaga,
.brzina,
.konektor {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}
.idealfor_text:hover,
.snaga:hover,
.brzina:hover,
.konektor:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.18);
}

/* ---------- Product detail page: tighten the "Kontaktirajte nas" CTA box ---------- */
/* Webflow ships .cta-box with padding-top: 2rem and the text uses #929292
   gray — feels disconnected from the price section above and the button
   below. Group them as a single light-tinted card with cohesive spacing. */
.cta-box {
  padding: 0.9rem 1rem !important;
  margin-top: 1rem;
  background: #f9fafb;
  border: 1px solid #eef0f4;
  border-radius: 10px;
}
.cta-box_div {
  margin-bottom: 0.6rem !important;
}
.cta-box_text {
  color: #374151 !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding-left: 0.5rem;
}
.cta-box .button-row {
  margin-top: 0;
}

/* ---------- Compact in-card product benefits ---------- */
/* Lives inside the .product-header7_product_image left column, below the
   color picker. Small vertical list, NOT a full-width page section. */
.product-benefits {
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0f0f0;
}
.product-benefits__heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.9rem 0;
}
.product-benefits__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.product-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.product-benefits__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.product-benefits__text {
  flex: 1;
  min-width: 0;
}
.product-benefits__title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1844a0;
  margin-bottom: 0.1rem;
}
.product-benefits__desc {
  font-size: 0.82rem;
  color: #4b5563;
  line-height: 1.4;
}

/* ---------- Product color picker ---------- */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}
.color-picker__label {
  width: 100%;
  font-weight: 600;
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
}
.color-swatch__circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background-size: 140%;
  background-position: center;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.color-swatch:hover .color-swatch__circle {
  transform: scale(1.06);
}
.color-swatch[aria-pressed="true"] .color-swatch__circle {
  border-color: #2895f7;
  box-shadow: 0 0 0 3px rgba(40, 149, 247, 0.2);
}
.color-swatch__label {
  font-size: 0.75rem;
  color: #6b7280;
  max-width: 70px;
  text-align: center;
  line-height: 1.2;
}
.color-swatch[aria-pressed="true"] .color-swatch__label {
  color: #2895f7;
  font-weight: 600;
}

/* ---------- Product image gallery (thumbnails below main image) ---------- */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
}
.thumb-swatch {
  display: block;
  cursor: pointer;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 0.35rem;
  width: 76px;
  height: 76px;
  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.thumb-swatch:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
}
.thumb-swatch[aria-pressed="true"] {
  border-color: #2895f7;
  box-shadow: 0 0 0 2px rgba(40, 149, 247, 0.18);
}
.thumb-swatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Product variant picker ---------- */
.variant-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}
.variant-picker__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}
.variant-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  text-align: left;
  font-family: inherit;
  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.variant-option:hover {
  border-color: #93c5fd;
}
.variant-option[aria-pressed="true"] {
  border-color: #2895f7;
  background: rgba(40, 149, 247, 0.05);
  box-shadow: 0 0 0 1px #2895f7 inset;
}
.variant-option__label {
  font-weight: 600;
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.3;
}
.variant-option__price {
  font-weight: 700;
  color: #2895f7;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* ---------- Brand logo sizing for new brands ---------- */
/* Match existing .ecotaplogo / .legrandlogo width so all brand badges
   render at the same visual scale in product header. */
.teltonikalogo {
  width: 8rem;
}
.fmtlogo {
  width: 7rem;
}

/* ---------- Shop / biznis-rešenja product cards: breathing room ---------- */
/* Webflow's .blog4_image-link has no padding by default, so portrait product
   images render flush against the card's top border. Add a little headroom. */
.blog4_image-link {
  padding: 1.25rem 1rem 0;
  display: block;
}

/* ---------- Navbar dropdowns: prevent text squeezing ---------- */
/* Webflow's dropdown defaults can squeeze long labels onto two lines or
   into a narrow column. Force a single-line layout that auto-expands to
   the longest item. */
.navbar1_dropdown-list.w--open,
.navbar1_dropdown-list.text-color-black.w--open {
  min-width: max-content;
  white-space: nowrap;
}

.link-dropdown.menu {
  white-space: nowrap;
  display: block;
}

/* ---------- Hide empty CMS placeholder states ---------- */
/* Webflow renders <div class="w-dyn-empty">No items found.</div> as a
   fallback when CMS collection is empty. At runtime its own JS toggles
   visibility based on actual items. In our static clone the CMS data is
   absent, so these placeholders always render. Hide them globally. */
.w-dyn-empty,
.emptystate {
  display: none !important;
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Shop / biznis card thumbnail visual rescale + hover zoom ---------- */
/* Per-product base scale via --card-image-scale custom property so the
   hover rule can multiply on top via calc() without forking per card.
   Marketing photos have inconsistent framing relative to the cabinet
   inside them — some are tight on the hardware, others have empty
   space around it. Rescale per-product so visual size in the listing
   reflects the real physical hierarchy (wallbox < pedestal). Targets
   the parent <a>'s href so a product display-name rename doesn't break
   the rule. Product detail page (.mainimage) is untouched. */
.blog4_image {
  --card-image-scale: 1;
  transform: scale(var(--card-image-scale));
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.blog4_image-link:hover .blog4_image {
  transform: scale(calc(var(--card-image-scale) * 1.08));
}

/* FMT 22kW AC wallbox — small, residential. Source photo is tight on
   the wallbox so it appears too chunky without scaling down. The
   transparent-bg image needs heavier scale-down because there's no
   surrounding whitespace softening the cabinet's apparent size. */
.blog4_image-link[href="/product/fmt-22kw-ac"] .blog4_image {
  --card-image-scale: 0.7;
}

/* Teltonika 22kW wallbox — bare-cabinet photo (no cable) fills its
   frame edge-to-edge, while the 11kW photo includes a wrapped Type 2
   cable. Scale 22kW down so cabinets visually match. */
.blog4_image-link[href="/product/teltonika-teltocharge-22kw"] .blog4_image {
  --card-image-scale: 0.78;
}

/* FMT 160-360kW DC pedestal — physically the biggest hardware on the
   site, but the marketing photo is landscape (1448×1086) with cables
   draped wide to both sides. Default contain letterboxes it down to
   ~50% of the thumbnail. Switch to cover (cables crop, cabinet fills
   vertically) AND scale up so the pedestal reads as massive. */
.blog4_image-link[href="/product/fmt-160-360kw-dc"] .blog4_image {
  --card-image-scale: 1.35;
  object-fit: cover;
  object-position: center;
}

/* ---------- Shop / biznis card lift on hover ---------- */
/* Subtle elevation as the cursor enters the card, paired with the
   image zoom above. Lifts both card chrome (~4px) and casts a soft
   shadow so the card pops off the white grid. */
.blog4_card {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}
.blog4_item:hover .blog4_card {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.18);
}

/* ---------- /biznis-resenja landing cards: equal height + hover ---------- */
/* Grid (.blog2_list) is 1fr 1fr 1fr so column widths match; auto row
   makes items stretch to the tallest neighbor's height. But inside
   each card the CTA hugs the description, so 1-line titles end up
   with the CTA much higher than 2-line title cards. Make the inner
   layout flex-column with the CTA pinned to the bottom via
   margin-top:auto so "Pročitaj više" aligns across all cards. */
.blog2_item,
.blog2_iteminside {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog2_iteminside .div-block-4 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog2_button-wrapper {
  margin-top: auto !important;
}

/* Hover: subtle lift + soft shadow on the inner white panel, paired
   with a slow image zoom inside the wrapper (overflow:hidden already
   on .blog2_image-wrapper, so excess crops cleanly). */
.blog2_iteminside {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.blog2_image {
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.blog2_item:hover .blog2_iteminside {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.18);
}
.blog2_item:hover .blog2_image {
  transform: scale(1.06);
}

/* ---------- /shop active-filter pill rail ---------- */
/* Hide the whole .filter_header rail (white box + border + min-height
   4.5rem from Webflow) until at least one active filter pill exists.
   Finsweet CMS Filter clones .filter_tag into .filter_tags-wrapper
   as filters are applied; in resting state only the template itself
   is present (has fs-cmsfilter-element="tag-template" and is
   display:none), leaving an orphan empty rectangle otherwise. */
.filter_header:not(:has(.filter_tag:not([fs-cmsfilter-element="tag-template"]))) {
  display: none;
}

/* ---------- Product card price label (shop + biznis grid) ---------- */
/* Tinted, framed strip placed under the short description so the price
   reads as a callout — not just trailing text. "Cena od ..." for
   multi-config products; "Cena: ..." for single-price. Strong tag
   inside carries the site accent color. */
.charger_item-price {
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.4;
  background: rgba(40, 149, 247, 0.06);
  border: 1px solid rgba(40, 149, 247, 0.18);
  border-radius: 8px;
}
.charger_item-price strong {
  color: #2895f7;
  font-weight: 700;
  font-size: 1rem;
}