/* ============================================================
   VM Sport — katalogi (kategoriasivut + jaettu tuotekortti)
   Ladataan arkistoilla/haussa + tuotesivulla (related-kortit).
   Sisältölinja = headerin 1232px (sama +24px-laskenta kuin PDP:llä).
   ============================================================ */

/* ---------- Sisältölinja (full-bleed + padding) ---------- */
body.vm-catalog .vm-cat-hero,
body.vm-catalog .vm-subcat-strip,
body.vm-catalog .vm-filterbar,
body.vm-catalog ul.products.facetwp-template,
body.vm-catalog .facetwp-pager,
body.vm-catalog .vm-seo {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(24px, calc(50vw - (var(--vm-container, 1280px) / 2) + 24px));
}
body.vm-catalog {
  overflow-x: clip;
}
/* Content-area symmetriseksi: sidebar on fixed-drawer (pois flowsta),
   mutta vanha col-leveys jää — pakotetaan täysleveäksi jotta
   full-bleed-laskenta (50% - 50vw) keskittyy viewportiin. */
body.vm-catalog #woocommerce-wrapper .row {
  margin-left: 0;
  margin-right: 0;
}
body.vm-catalog #woocommerce-wrapper .content-area {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   TUOTEKORTTI (vm-prod) — jaettu loopeille
   ============================================================ */
ul.products {
  list-style: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: grid !important;
  /* !important: vanha teema-CSS määrää omat column-säännöt breakpointeittain */
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
body.vm-catalog ul.products.facetwp-template {
  padding-top: 32px;
}

li.vm-prod {
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border-subtle, #dedede);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  transition: box-shadow var(--vm-dur-base, 200ms) var(--vm-ease-out, ease-out),
              transform var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              border-color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
li.vm-prod:hover {
  box-shadow: var(--vm-shadow-3, 0 12px 28px rgba(13, 43, 60, 0.12));
  transform: translateY(-2px);
  border-color: var(--vm-border, #d1d1d1);
}

.vm-prod-img {
  position: relative;
  overflow: hidden;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--vm-bg-card, #f0f0f0);
  padding: 16px;
}
.vm-prod-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.vm-prod-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.vm-prod-brand {
  font-weight: 600;
  font-size: var(--vm-fs-12, 0.75rem);
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--vm-fg-muted, #5a5a5a);
}
.vm-prod-name {
  font-weight: 600;
  font-size: var(--vm-fs-15, 0.9375rem);
  line-height: 1.3;
  margin: 4px 0 12px;
  color: var(--vm-fg, #000);
  min-height: 38px;
  text-decoration: none;
}
/* Stretched link: koko kortti klikattava nimen linkistä */
.vm-prod-name::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.vm-prod-name:hover { color: var(--vm-brand, #2D5C87); }

.vm-prod-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--vm-fg, #000);
}
.vm-prod-price del {
  font-size: var(--vm-fs-13, 0.8125rem);
  font-weight: 400;
  color: var(--vm-fg-muted, #5a5a5a);
  text-decoration: line-through;
  opacity: 1;
}
.vm-prod-price ins {
  text-decoration: none;
  background: none;
}
.vm-prod-price.sale ins .woocommerce-Price-amount,
.vm-prod-price.sale > .woocommerce-Price-amount:only-child {
  color: var(--vm-sale, #b72a00);
}

.vm-prod-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--vm-fs-12, 0.75rem);
  color: var(--vm-fg-muted, #5a5a5a);
}
.vm-prod-stock .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e9e4a;
  display: inline-block;
}
.vm-prod-stock.back .dot { background: #e0a800; }
.vm-prod-stock.out .dot { background: var(--vm-sale, #b72a00); }

/* Badget */
li.vm-prod .vm-badge-sale,
li.vm-prod .vm-badge-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: var(--vm-fs-12, 0.75rem);
  letter-spacing: 0.06em;
  padding: 4px 8px;
  text-transform: uppercase;
  line-height: 1.3;
}
li.vm-prod .vm-badge-sale { background: var(--vm-sale, #b72a00); }
li.vm-prod .vm-badge-new { background: var(--vm-brand, #2D5C87); }
/* WC:n oma onsale-flash pois kortilta (badge hoitaa) */
li.vm-prod .onsale { display: none; }

/* Hover-ATC (WC loop add-to-cart -nappi/linkki) */
.vm-prod-add-wrap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  transform: translateY(calc(100% + 14px));
  opacity: 0;
  transition: transform var(--vm-dur-base, 200ms) var(--vm-ease-out, ease-out),
              opacity var(--vm-dur-base, 200ms) var(--vm-ease-out, ease-out);
}
li.vm-prod:hover .vm-prod-add-wrap,
li.vm-prod:focus-within .vm-prod-add-wrap {
  transform: translateY(0);
  opacity: 1;
}
/* HUOM: teema strippaa .button-luokan loop-napeista (btn btn-outline-primary)
   → kohdistus suoraan a-elementtiin wrapin sisällä. !important koska
   bootstrap-btn + vanha pillityyli. */
ul.products li.vm-prod .vm-prod-add-wrap a,
.vm-prod-add-wrap a,
.vm-prod-add-wrap .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  font-weight: 600;
  font-size: var(--vm-fs-13, 0.8125rem);
  letter-spacing: 0.04em;
  border-radius: var(--vm-radius-2, 4px);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
  background: var(--vm-brand-deep, #0d2b3c) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--vm-radius-2, 4px) !important;
  width: 100% !important;
  font-size: var(--vm-fs-13, 0.8125rem) !important;
  padding: 10px 14px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.products li.vm-prod .vm-prod-add-wrap a:hover,
.vm-prod-add-wrap a:hover { background: var(--vm-brand, #2D5C87) !important; color: #fff !important; }
.vm-prod-add-wrap a.loading { opacity: 0.6; pointer-events: none; }
.vm-prod-add-wrap a.added_to_cart { display: none !important; }

/* Kosketuslaitteet: ei hoveria → ATC aina näkyvissä (overlay kuvan alareunassa,
   EI static — .vm-prod-img on flex ja static-nappi valuisi kuvan viereen) */
@media (hover: none) {
  .vm-prod-add-wrap {
    transform: none;
    opacity: 1;
  }
}

/* PDP related -grid käyttää samaa ul.productsia */
.vm-pdp-related ul.products { gap: 18px; }

/* ============================================================
   KATEGORIA-HERO
   ============================================================ */
.vm-cat-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--vm-border-subtle, #dedede);
}
.vm-cat-hero.with-image { min-height: 340px; }
.vm-cat-hero-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
.vm-cat-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(13, 43, 60, 0.85) 0%, rgba(13, 43, 60, 0.45) 60%, rgba(13, 43, 60, 0.15) 100%);
}
.vm-cat-hero-inner {
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}
.vm-cat-hero--plain .vm-cat-hero-inner {
  padding-top: 32px;
  padding-bottom: 28px;
}
.vm-cat-hero.with-image .vm-cat-hero-inner { color: #fff; }
.vm-cat-hero h1 {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--vm-tracking-tight, -0.01em);
  text-transform: uppercase;
  color: var(--vm-brand-deep, #0d2b3c);
  margin: 0 0 12px;
  max-width: 760px;
}
.vm-cat-hero.with-image h1 { color: #fff; }
.vm-cat-hero-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: var(--vm-fs-12, 0.75rem);
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--vm-brand, #2D5C87);
}
.vm-cat-hero.with-image .vm-cat-hero-eyebrow { color: var(--vm-accent-cool, #73C1BD); }
.vm-cat-hero-desc {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--vm-fg-muted, #5a5a5a);
  max-width: 640px;
  margin: 0;
  /* Varmistus: hero ei veny vaikka eka kappale olisi pitkä */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vm-cat-hero-desc a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vm-cat-hero.with-image .vm-cat-hero-desc a {
  color: #fff;
}
.vm-cat-hero.with-image .vm-cat-hero-desc a:hover {
  color: var(--vm-accent-cool, #73C1BD);
}
.vm-cat-hero-desc p { margin: 0 0 0.6em; }
.vm-cat-hero-desc p:last-child { margin: 0; }
.vm-cat-hero.with-image .vm-cat-hero-desc { color: rgba(255, 255, 255, 0.92); }
.vm-cat-hero-count {
  margin-top: 16px;
  font-size: var(--vm-fs-13, 0.8125rem);
  color: var(--vm-fg-muted, #5a5a5a);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.vm-cat-hero.with-image .vm-cat-hero-count { color: rgba(255, 255, 255, 0.78); }

/* Breadcrumb herossa */
.vm-cat-hero .woocommerce-breadcrumb {
  font-size: var(--vm-fs-13, 0.8125rem);
  color: var(--vm-fg-muted, #5a5a5a);
  margin-bottom: 16px;
  padding: 0;
}
.vm-cat-hero .woocommerce-breadcrumb a {
  color: var(--vm-fg-muted, #5a5a5a);
  text-decoration: none;
}
.vm-cat-hero .woocommerce-breadcrumb a:hover { color: var(--vm-brand, #2D5C87); }
.vm-cat-hero.with-image .woocommerce-breadcrumb,
.vm-cat-hero.with-image .woocommerce-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}
.vm-cat-hero.with-image .woocommerce-breadcrumb a:hover { color: #fff; }
.vm-cat-hero.with-image .woocommerce-breadcrumb svg path { fill: rgba(255, 255, 255, 0.6); }

/* ============================================================
   ALAKATEGORIA-STRIP
   ============================================================ */
.vm-subcat-strip {
  position: relative;
  padding-top: 16px;
}
.vm-subcat-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
.vm-subcat-track::-webkit-scrollbar { display: none; }
/* Reunafadet vain siihen suuntaan jossa on skrollattavaa (JS togglaa) */
.vm-subcat-strip.can-right .vm-subcat-track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent 100%);
}
.vm-subcat-strip.can-left .vm-subcat-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px);
}
.vm-subcat-strip.can-left.can-right .vm-subcat-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.vm-strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 8px));
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--vm-border-subtle, #dedede);
  background: var(--vm-bg, #fff);
  color: var(--vm-brand-deep, #0d2b3c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 43, 60, 0.12);
  transition: color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              border-color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-strip-arrow:hover { color: var(--vm-brand, #2D5C87); border-color: var(--vm-brand, #2D5C87); }
.vm-strip-arrow--prev { left: max(8px, calc(50vw - (var(--vm-container, 1280px) / 2) + 8px)); }
.vm-strip-arrow--next { right: max(8px, calc(50vw - (var(--vm-container, 1280px) / 2) + 8px)); }
@media (max-width: 880px) {
  .vm-strip-arrow { display: none; }
}
.vm-subcat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--vm-bg-card, #f0f0f0);
  border: 1px solid transparent;
  color: var(--vm-brand-deep, #0d2b3c);
  text-decoration: none;
  padding: 8px 14px 8px 8px;
  border-radius: var(--vm-radius-pill, 999px);
  font-size: var(--vm-fs-13, 0.8125rem);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              border-color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-subcat:hover {
  background: var(--vm-bg, #fff);
  border-color: var(--vm-brand, #2D5C87);
  color: var(--vm-brand, #2D5C87);
}
.vm-subcat.current {
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
}
.vm-subcat-img {
  width: 28px;
  height: 28px;
  background: var(--vm-bg, #fff);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  flex-shrink: 0;
  overflow: hidden;
}
.vm-subcat-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.vm-subcat-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--vm-fg-subtle, #707070);
  background: var(--vm-bg, #fff);
  border-radius: 999px;
  padding: 2px 6px;
}
.vm-subcat.current .vm-subcat-count {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================================
   FILTERBAR (FacetWP-kuori)
   ============================================================ */
.vm-filterbar {
  position: sticky;
  top: var(--vm-sticky-offset, 0px);
  z-index: 5;
  background: var(--vm-bg, #fff);
  border-bottom: 1px solid var(--vm-border-subtle, #dedede);
  margin-top: 12px;
}
.vm-filterbar-row {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vm-filterbar-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.vm-filterbar-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: var(--vm-fs-13, 0.8125rem);
  padding: 8px 14px;
  border-radius: var(--vm-radius-2, 4px);
  cursor: pointer;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-filterbar-all:hover { background: var(--vm-brand, #2D5C87); }

.vm-filter-pill { position: relative; }
.vm-filter-pill[hidden] { display: none; }
.vm-filter-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border, #d1d1d1);
  color: var(--vm-brand-deep, #0d2b3c);
  font-weight: 600;
  font-size: var(--vm-fs-13, 0.8125rem);
  padding: 8px 12px;
  border-radius: var(--vm-radius-2, 4px);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-filter-pill-btn:hover {
  border-color: var(--vm-brand, #2D5C87);
  color: var(--vm-brand, #2D5C87);
}
.vm-filter-pill.open .vm-filter-pill-btn {
  border-color: var(--vm-brand, #2D5C87);
  background: var(--vm-bg-subtle, #f5f6f4);
}
.vm-filter-pill.has-value .vm-filter-pill-btn {
  border-color: var(--vm-brand, #2D5C87);
  background: rgba(45, 92, 135, 0.08);
}
.vm-filter-pill-count {
  background: var(--vm-brand, #2D5C87);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.vm-filter-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border, #d1d1d1);
  box-shadow: var(--vm-shadow-3, 0 12px 28px rgba(13, 43, 60, 0.12));
  z-index: 6;
}
.vm-filter-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vm-border-subtle, #dedede);
  font-weight: 700;
  font-size: var(--vm-fs-12, 0.75rem);
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--vm-brand-deep, #0d2b3c);
}
.vm-filter-pop-body {
  padding: 10px 8px;
  max-height: 320px;
  overflow-y: auto;
}

/* FacetWP checkbox-fasetit popissa + sidebar-drawerissa */
.vm-filter-pop-body .facetwp-checkbox,
body.vm-catalog #left-sidebar .facetwp-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: var(--vm-fs-14, 0.875rem);
  color: var(--vm-fg, #000);
  border-radius: var(--vm-radius-2, 4px);
  background-image: none !important;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-filter-pop-body .facetwp-checkbox:hover,
body.vm-catalog #left-sidebar .facetwp-checkbox:hover {
  background: var(--vm-bg-subtle, #f5f6f4);
}
.vm-filter-pop-body .facetwp-checkbox::before,
body.vm-catalog #left-sidebar .facetwp-checkbox::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--vm-border, #d1d1d1);
  border-radius: 3px;
  background: var(--vm-bg, #fff);
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              border-color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-filter-pop-body .facetwp-checkbox.checked::before,
body.vm-catalog #left-sidebar .facetwp-checkbox.checked::before {
  background: var(--vm-brand, #2D5C87) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-color: var(--vm-brand, #2D5C87);
}
.vm-filter-pop-body .facetwp-counter,
body.vm-catalog #left-sidebar .facetwp-counter {
  margin-left: auto;
  font-size: var(--vm-fs-12, 0.75rem);
  color: var(--vm-fg-subtle, #707070);
}

/* Hinta-slider popissa */
.vm-filter-pop-body .facetwp-type-slider { padding: 12px 10px 4px; }

/* Meta: count + sort */
.vm-filterbar-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.vm-filterbar-count {
  font-size: var(--vm-fs-13, 0.8125rem);
  color: var(--vm-fg-muted, #5a5a5a);
}
.vm-sort .facetwp-sort-select,
.vm-sort select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--vm-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2b3c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  border: 1px solid var(--vm-border, #d1d1d1);
  color: var(--vm-brand-deep, #0d2b3c);
  font-weight: 600;
  font-size: var(--vm-fs-13, 0.8125rem);
  padding: 8px 32px 8px 12px;
  border-radius: var(--vm-radius-2, 4px);
  cursor: pointer;
}
.vm-sort select:hover { border-color: var(--vm-brand, #2D5C87); }

/* Aktiiviset valinnat (FacetWP selections) */
.vm-filterbar-active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 12px;
}
.vm-filterbar-active[hidden] { display: none; }
.vm-filterbar-active-label {
  font-size: var(--vm-fs-12, 0.75rem);
  color: var(--vm-fg-muted, #5a5a5a);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 4px;
}
.vm-filterbar-active .facetwp-selections ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vm-filterbar-active .facetwp-selections li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vm-brand, #2D5C87);
  color: #fff;
  font-weight: 600;
  font-size: var(--vm-fs-12, 0.75rem);
  padding: 4px 10px;
  border-radius: var(--vm-radius-pill, 999px);
  cursor: pointer;
  margin: 0;
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-filterbar-active .facetwp-selections li:hover { background: var(--vm-brand-deep, #0d2b3c); }
.vm-filterbar-active .facetwp-selections .facetwp-selection-label { display: none; }
.vm-filterbar-active .facetwp-selections .facetwp-selection-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  padding: 0;
}
.vm-filterbar-clear-all {
  background: transparent;
  border: 0;
  color: var(--vm-sale, #b72a00);
  font-weight: 600;
  font-size: var(--vm-fs-12, 0.75rem);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}

/* ============================================================
   SIDEBAR → DRAWER ("Kaikki suodattimet") kaikilla leveyksillä
   Vanha CSS pakottaa offcanvasin staattiseksi → kova yliajo.
   ============================================================ */
body.vm-catalog #left-sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0;
  width: min(420px, 92vw) !important;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  background: var(--vm-bg, #fff);
  z-index: 1080;
  transform: translateX(-105%) !important;
  transition: transform 280ms var(--vm-ease-out, ease-out) !important;
  visibility: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--vm-border-subtle, #dedede);
  display: block;
}
body.vm-catalog #left-sidebar.show,
body.vm-catalog #left-sidebar.showing {
  transform: translateX(0) !important;
  visibility: visible;
}
body.vm-catalog #left-sidebar .offcanvas-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vm-border-subtle, #dedede);
}
body.vm-catalog #left-sidebar .offcanvas-body {
  padding: 16px 20px 32px;
}
body.vm-catalog #left-sidebar .widget,
body.vm-catalog #left-sidebar .widget_block {
  margin-bottom: 20px;
}

/* ============================================================
   PAGINATION (FacetWP pager)
   ============================================================ */
body.vm-catalog .facetwp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 40px;
  padding-bottom: 8px;
}
body.vm-catalog .facetwp-pager .facetwp-page {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--vm-fg, #000);
  font-weight: 600;
  font-size: var(--vm-fs-14, 0.875rem);
  border-radius: var(--vm-radius-2, 4px);
  cursor: pointer;
  text-decoration: none;
  padding: 0 8px;
  margin: 0;
}
body.vm-catalog .facetwp-pager .facetwp-page:hover {
  background: var(--vm-bg-subtle, #f5f6f4);
}
body.vm-catalog .facetwp-pager .facetwp-page.active {
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
}
body.vm-catalog .facetwp-pager .facetwp-page.dots {
  cursor: default;
  color: var(--vm-fg-muted, #5a5a5a);
}
body.vm-catalog .facetwp-pager .facetwp-page.prev,
body.vm-catalog .facetwp-pager .facetwp-page.next {
  border: 1px solid var(--vm-border, #d1d1d1);
  padding: 0 14px;
  color: var(--vm-brand-deep, #0d2b3c);
}
body.vm-catalog .facetwp-pager .facetwp-page.prev:hover,
body.vm-catalog .facetwp-pager .facetwp-page.next:hover {
  border-color: var(--vm-brand, #2D5C87);
  color: var(--vm-brand, #2D5C87);
  background: var(--vm-bg, #fff);
}

/* ============================================================
   SEO-OSIO
   ============================================================ */
.vm-seo {
  background: var(--vm-bg-subtle, #f5f6f4);
  padding-top: 64px;
  padding-bottom: 64px;
  margin-top: 48px;
}
.vm-seo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
}
.vm-seo-body h2 {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--vm-tracking-tight, -0.01em);
  color: var(--vm-brand-deep, #0d2b3c);
  margin: 40px 0 16px;
}
.vm-seo-body h2:first-child { margin-top: 0; }
.vm-seo-body h3 {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--vm-fg, #000);
  margin: 24px 0 12px;
}
.vm-seo-body p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--vm-fg, #000);
  margin: 0 0 16px;
  max-width: 64ch;
}
.vm-seo-body a { color: var(--vm-brand, #2D5C87); }
.vm-seo-body ul,
.vm-seo-body ol {
  margin: 0 0 16px;
  padding-left: 20px;
  max-width: 64ch;
}
.vm-seo-body li {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 4px;
}
.vm-seo-body blockquote {
  display: block;
  background: var(--vm-bg, #fff);
  border-left: 3px solid var(--vm-brand, #2D5C87);
  padding: 14px 16px;
  margin: 16px 0 24px;
  max-width: 64ch;
  font-size: var(--vm-fs-15, 0.9375rem);
  line-height: 1.5;
}

/* FAQ */
.vm-faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 64ch;
}
.vm-faq-item {
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border-subtle, #dedede);
}
.vm-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 16px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: var(--vm-fg, #000);
  cursor: pointer;
}
.vm-faq-q:hover { color: var(--vm-brand, #2D5C87); }
.vm-faq-q svg {
  flex-shrink: 0;
  transition: transform var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
.vm-faq-item.open .vm-faq-q { color: var(--vm-brand, #2D5C87); }
.vm-faq-item.open .vm-faq-q svg { transform: rotate(180deg); }
.vm-faq-a {
  padding: 0 18px 18px;
  font-size: var(--vm-fs-15, 0.9375rem);
  line-height: 1.6;
  color: var(--vm-fg, #000);
}
.vm-faq-a p { margin: 0 0 0.6em; }
.vm-faq-a p:last-child { margin: 0; }

/* SEO-sivupalkki */
.vm-seo-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vm-seo-side-card {
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
  padding: 24px;
}
.vm-seo-side-card .vm-seo-side-title {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: var(--vm-tracking-tight, -0.01em);
  color: #fff;
  margin: 0 0 10px;
}
.vm-seo-side-card p {
  font-size: var(--vm-fs-14, 0.875rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}
.vm-seo-side-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vm-seo-side .vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--vm-radius-2, 4px);
  font-weight: 700;
  font-size: var(--vm-fs-14, 0.875rem);
  text-decoration: none;
  cursor: pointer;
}
.vm-seo-side .vm-btn--primary {
  background: var(--vm-brand, #2D5C87);
  color: #fff;
  border: 1.5px solid var(--vm-brand, #2D5C87);
}
.vm-seo-side .vm-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--vm-brand-deep, #0d2b3c);
}
.vm-seo-side-related {
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border-subtle, #dedede);
  padding: 20px 24px;
}
.vm-seo-side-related .vm-seo-side-title {
  font-weight: 700;
  font-size: var(--vm-fs-13, 0.8125rem);
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--vm-brand-deep, #0d2b3c);
  margin: 0 0 12px;
}
.vm-seo-side-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vm-seo-side-related a {
  color: var(--vm-brand, #2D5C87);
  font-size: var(--vm-fs-14, 0.875rem);
  text-decoration: none;
}
.vm-seo-side-related a:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 880px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  /* Mobiili: pillit pois — "Kaikki suodattimet" -drawer hoitaa filtteröinnin */
  .vm-filter-pill { display: none !important; }
  .vm-filterbar-row { flex-wrap: nowrap; }
  .vm-sort select { max-width: 170px; }
  .vm-seo-grid { grid-template-columns: 1fr; gap: 32px; }
  .vm-prod-img { height: 160px; }
  .vm-cat-hero.with-image { min-height: 260px; }
  .vm-filterbar-row { gap: 10px; }
}
@media (max-width: 640px) {
  body.vm-catalog .vm-cat-hero,
  body.vm-catalog .vm-subcat-strip,
  body.vm-catalog .vm-filterbar,
  body.vm-catalog ul.products.facetwp-template,
  body.vm-catalog .facetwp-pager,
  body.vm-catalog .vm-seo {
    padding-inline: 16px;
  }
  .vm-prod-name { font-size: var(--vm-fs-14, 0.875rem); min-height: 0; }
  .vm-prod-price { font-size: 1rem; }
  .vm-filterbar-count { display: none; }
}

/* ============================================================
   OMA SUODATUSMOOTTORI (FacetWP korvattu)
   ============================================================ */

/* Optiolistat (pillit + drawer) — SSR-linkit checkbox-visuaalilla */
.vm-filter-options {
  list-style: none;
  margin: 0;
  padding: 0;
}
a.vm-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: var(--vm-fs-14, 0.875rem);
  color: var(--vm-fg, #000);
  text-decoration: none;
  border-radius: var(--vm-radius-2, 4px);
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
a.vm-filter-option:hover { background: var(--vm-bg-subtle, #f5f6f4); }
.vm-filter-box {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--vm-border, #d1d1d1);
  border-radius: 3px;
  background: var(--vm-bg, #fff);
  transition: background var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out),
              border-color var(--vm-dur-fast, 120ms) var(--vm-ease-out, ease-out);
}
a.vm-filter-option.checked .vm-filter-box {
  background: var(--vm-brand, #2D5C87) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-color: var(--vm-brand, #2D5C87);
}
a.vm-filter-option.checked .vm-filter-label { font-weight: 600; }
.vm-filter-count {
  margin-left: auto;
  font-size: var(--vm-fs-12, 0.75rem);
  color: var(--vm-fg-subtle, #707070);
}
.vm-filter-empty {
  padding: 8px 10px;
  font-size: var(--vm-fs-13, 0.8125rem);
  color: var(--vm-fg-muted, #5a5a5a);
  margin: 0;
}

/* Drawer-ryhmät */
.vm-drawer-title {
  font-weight: 700;
  font-size: var(--vm-fs-14, 0.875rem);
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--vm-brand-deep, #0d2b3c);
}
.vm-drawer-group { margin-bottom: 24px; }
.vm-drawer-group-title {
  font-weight: 700;
  font-size: var(--vm-fs-12, 0.75rem);
  letter-spacing: var(--vm-tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--vm-brand, #2D5C87);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--vm-border-subtle, #dedede);
}
.vm-drawer-group .vm-filter-options {
  max-height: 280px;
  overflow-y: auto;
}

/* Latausoverlay gridille */
ul.products.vm-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

/* WC-natiivi sivutus designin pageriksi */
body.vm-catalog .woocommerce-pagination {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(24px, calc(50vw - (var(--vm-container, 1280px) / 2) + 24px));
  padding-top: 40px;
  padding-bottom: 8px;
  text-align: center;
}
body.vm-catalog .woocommerce-pagination ul.page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  border: 0;
}
body.vm-catalog .woocommerce-pagination li {
  border: 0;
  margin: 0;
}
body.vm-catalog .woocommerce-pagination .page-numbers {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--vm-fg, #000);
  font-weight: 600;
  font-size: var(--vm-fs-14, 0.875rem);
  border-radius: var(--vm-radius-2, 4px);
  text-decoration: none;
  padding: 0 10px;
}
body.vm-catalog .woocommerce-pagination a.page-numbers:hover {
  background: var(--vm-bg-subtle, #f5f6f4);
  color: var(--vm-brand, #2D5C87);
}
body.vm-catalog .woocommerce-pagination .page-numbers.current {
  background: var(--vm-brand-deep, #0d2b3c);
  color: #fff;
}
body.vm-catalog .woocommerce-pagination .page-numbers.dots {
  color: var(--vm-fg-muted, #5a5a5a);
}
body.vm-catalog .woocommerce-pagination .page-numbers.prev,
body.vm-catalog .woocommerce-pagination .page-numbers.next {
  border: 1px solid var(--vm-border, #d1d1d1);
  color: var(--vm-brand-deep, #0d2b3c);
}

/* ============================================================
   KATEGORIAKUVAUS strippien ja filtterien välissä
   (kollapsoitu + fade + lue lisää)
   ============================================================ */
body.vm-catalog .vm-cat-desc {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(24px, calc(50vw - (var(--vm-container, 1280px) / 2) + 24px));
  padding-top: 16px;
}
.vm-cat-desc-text {
  font-size: var(--vm-fs-14, 0.875rem);
  line-height: 1.6;
  color: var(--vm-fg-muted, #5a5a5a);
  max-width: 86ch;
  max-height: 4.2em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  transition: max-height 240ms var(--vm-ease-out, ease-out);
}
.vm-cat-desc.open .vm-cat-desc-text {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.vm-cat-desc-text p { margin: 0 0 0.7em; }
.vm-cat-desc-text p:last-child { margin: 0; }
.vm-cat-desc-text a {
  color: var(--vm-brand, #2D5C87);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vm-cat-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 6px 0 0;
  color: var(--vm-brand, #2D5C87);
  font-weight: 700;
  font-size: var(--vm-fs-13, 0.8125rem);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vm-cat-desc-toggle:hover { color: var(--vm-brand-deep, #0d2b3c); }

/* Kuvausblokin sisäiset otsikot maltillisiksi + enemmän tekstiä ennen fadea */
.vm-cat-desc-text { max-height: 6.4em; }
.vm-cat-desc-text h2,
.vm-cat-desc-text h3 {
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vm-fg, #000);
  margin: 0 0 6px;
}

/* Lastenlapsi-pilli kevyemmällä visuaalilla */
.vm-subcat--sub {
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border-subtle, #dedede);
  font-weight: 500;
  padding: 8px 14px;
}

/* AJAX-skrollin ankkurointi: tilaa headerille + sticky-filterbarille */
ul.products.facetwp-template { scroll-margin-top: 140px; }