/* ──────────────────────────────────────────────────────────
   Vikingvask — catalog, brand, search, page, 404, product page and the
   generic purchase islands (ADR-0139 wave 1). Loaded after theme.css;
   reuses its tokens (--ks-*) and the vv-card / vv-chip / vv-merke rules.
   ────────────────────────────────────────────────────────── */

/* ── Shared bits ─────────────────────────────────────────── */
/* Doubled class: theme.css loads after this file and its `.vv-wrap`
   padding shorthand would otherwise reset the vertical spacing to 0. */
.ks-themed .vv-wrap.vv-crumbs-wrap {
  padding-top: 20px;
  padding-bottom: 24px;
}
.ks-themed .vv-crumbs {
  flex-wrap: wrap;
  row-gap: 4px;
}
.ks-themed .vv-crumbs a {
  color: inherit;
  text-decoration: none;
}
.ks-themed .vv-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-primary);
}
.ks-themed .vv-eyebrow a {
  color: inherit;
  text-decoration: none;
}
.ks-themed .vv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ks-control-height);
  padding: 0 20px;
  border: 1px solid var(--ks-primary);
  border-radius: var(--ks-radius-control);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease;
}
.ks-themed .vv-btn:hover {
  filter: brightness(1.06);
}
.ks-themed .vv-btn-ghost {
  background: transparent;
  color: var(--ks-primary);
}
.ks-themed .vv-btn-ghost:hover {
  background: var(--ks-surface);
  filter: none;
}
.ks-themed .vv-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ks-primary);
  text-decoration: none;
}
.ks-themed .vv-link:hover {
  text-decoration: underline;
}
.ks-themed .vv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ks-themed .vv-section-head h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ks-themed .vv-search-form {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 14px 0 0;
}
.ks-themed .vv-search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  height: var(--ks-control-height);
  padding: 0 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: var(--ks-control-font-size);
}
.ks-themed .vv-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--ks-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-primary) 12%, transparent);
}
.ks-themed .vv-chip small {
  font-weight: 400;
  color: var(--ks-text-muted);
}
.ks-themed .vv-chip.vv-on small {
  color: inherit;
}

/* ── Catalog with sidebar ────────────────────────────────── */
/* Keep the full listing clear of the footer, including a taller sidebar. */
.ks-themed .vv-wrap.vv-catalog {
  padding-bottom: 64px;
}
.ks-themed .vv-catalog.vv-has-sidebar {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.ks-themed .vv-catalog-main {
  min-width: 0;
}
.ks-themed .vv-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ks-themed .vv-side-block {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-bg);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04);
}
.ks-themed .vv-side-block > summary,
.ks-themed .vv-side-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-text);
  cursor: pointer;
  list-style: none;
}
.ks-themed .vv-side-block > summary::-webkit-details-marker {
  display: none;
}
.ks-themed .vv-side-block > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ks-text-muted);
  border-bottom: 2px solid var(--ks-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.ks-themed .vv-side-block[open] > summary::after {
  transform: rotate(-135deg);
}
.ks-themed .vv-side-clear {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ks-primary);
  text-decoration: none;
}
.ks-themed .vv-cat-tree,
.ks-themed .vv-cat-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-themed .vv-cat-tree {
  margin-top: 10px;
}
.ks-themed .vv-cat-children {
  margin: 2px 0 6px 12px;
  border-left: 1px solid var(--ks-border);
}
.ks-themed .vv-cat-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--ks-radius-control);
  font-size: 13.5px;
  color: var(--ks-text);
  text-decoration: none;
}
.ks-themed .vv-cat-link small {
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-cat-link:hover {
  background: var(--ks-surface);
  color: var(--ks-primary);
}
.ks-themed .vv-cat-link.vv-active {
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  font-weight: 600;
}
.ks-themed .vv-cat-link.vv-active small {
  color: inherit;
  opacity: 0.8;
}
.ks-themed .vv-facet {
  border-top: 1px solid var(--ks-border);
  padding: 10px 0 4px;
}
.ks-themed .vv-facet > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ks-themed .vv-facet > summary::-webkit-details-marker {
  display: none;
}
.ks-themed .vv-facet > summary::after {
  content: "+";
  color: var(--ks-text-muted);
}
.ks-themed .vv-facet[open] > summary::after {
  content: "−";
}
.ks-themed .vv-facet-count-active {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  font-size: 12px;
}
.ks-themed .vv-facet-values {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ks-themed .vv-facet-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-radius: var(--ks-radius-control);
  font-size: 13.5px;
  color: var(--ks-text);
  text-decoration: none;
}
.ks-themed .vv-facet-value:hover {
  background: var(--ks-surface);
}
.ks-themed .vv-facet-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ks-border);
  border-radius: calc(var(--ks-radius-control) / 2);
  background: var(--ks-bg);
  flex: none;
}
.ks-themed .vv-facet-value.vv-active .vv-facet-check {
  border-color: var(--ks-primary);
  background: var(--ks-primary) center / 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9.5 10 3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.ks-themed .vv-facet-label {
  flex: 1;
  min-width: 0;
}
.ks-themed .vv-facet-num {
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-themed .vv-catalog .vv-coll-count {
  padding: 0;
}
.ks-themed .vv-catalog .vv-prod-grid {
  margin-top: 18px;
}
.ks-themed .vv-prod-grid-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .ks-themed .vv-prod-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ks-themed .vv-card-visual {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ks-surface);
}
/* VI-KA-81: a product without a picture shows the store's emblem, faded.
   The selectors outrank the card/gallery `img` rules (size, padding), which
   are for real product photos. */
.ks-themed .vv-card-media img.vv-placeholder-emblem,
.ks-themed .vv-gallery-frame img.vv-placeholder-emblem {
  width: auto;
  height: 34%;
  padding: 0;
  object-fit: contain;
  opacity: 0.14;
}
.ks-themed .vv-gallery-frame img.vv-gallery-emblem {
  height: 26%;
}
.ks-themed .vv-card-brand a {
  color: inherit;
  text-decoration: none;
}
.ks-themed .vv-card-brand a:hover {
  color: var(--ks-primary);
}
.ks-themed .vv-card-atc-link {
  text-decoration: none;
}
.ks-themed .vv-card-atc .vv-icon {
  width: 15px;
  height: 15px;
}
.ks-themed .vv-card-atc[data-ks-unavailable] {
  opacity: 0.55;
  cursor: not-allowed;
}
.ks-themed .vv-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.ks-themed .vv-pager-list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-themed .vv-pager-num {
  display: inline-grid;
  place-items: center;
  min-width: var(--ks-tap-min);
  height: var(--ks-control-height);
  padding: 0 8px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  font-size: 13px;
  color: var(--ks-text);
  text-decoration: none;
}
.ks-themed .vv-pager-num:hover {
  border-color: var(--ks-primary);
  color: var(--ks-primary);
}
.ks-themed .vv-pager-num.vv-on {
  background: var(--ks-primary);
  border-color: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .vv-pager-btn.vv-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.ks-themed .vv-pager-status {
  margin-left: auto;
}
@media (max-width: 899px) {
  .ks-themed .vv-catalog.vv-has-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-themed .vv-sidebar {
    position: static;
    order: 2;
  }
  .ks-themed .vv-catalog-main {
    order: 1;
  }
  .ks-themed .vv-side-cats:not([open]) {
    padding-bottom: 14px;
  }
}

/* ── Brand page ──────────────────────────────────────────── */
.ks-themed .vv-brand-head {
  padding: 18px 0 8px;
}
.ks-themed .vv-brand-head-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ks-themed .vv-brand-logo {
  height: 64px;
  max-height: 80px;
  width: auto;
  max-width: 200px;
  flex: none;
  object-fit: contain;
  padding: 6px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
}
.ks-themed .vv-brand-head h1 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ks-themed .vv-brand-tagline {
  margin: 4px 0 0;
  color: var(--ks-text-muted);
}
.ks-themed .vv-brand-site {
  display: inline-block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ks-primary);
  text-decoration: none;
}
.ks-themed .vv-brand-site:hover {
  text-decoration: underline;
}
.ks-themed .vv-brand-count {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-brand-desc {
  max-width: 68ch;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ks-text-muted);
}

/* ── Content pages ───────────────────────────────────────── */
.ks-themed .vv-page-head {
  padding: 20px 0 8px;
}
.ks-themed .vv-page-head h1 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ks-themed .vv-page-lead {
  max-width: 60ch;
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ks-text-muted);
}
.ks-themed .vv-page-meta {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-page-media {
  margin-top: 20px;
  border-radius: var(--ks-radius-card);
  overflow: hidden;
  border: 1px solid var(--ks-border);
}
.ks-themed .vv-page-media img {
  display: block;
  width: 100%;
  height: auto;
}
.ks-themed .vv-page-body {
  padding: 16px 0 64px;
  line-height: 1.65;
}
.ks-themed .vv-page-body-prose {
  max-width: 72ch;
}

/* ── Articles (VI-KA-131) ────────────────────────────────── */
/* Header and body share one centred reading column. The body's block wrapper
   (.ks-page-blocks) pads 1rem / 1.5rem, so the header pads the same. */
.ks-themed .vv-article-head {
  max-width: 72ch;
  margin: 0 auto;
  padding: 20px 1rem 0;
}
.ks-themed .vv-page-body-article {
  margin-inline: auto;
}
.ks-themed .vv-page-body-article .ks-page-blocks {
  padding-top: 1.5rem;
}
.ks-themed .vv-article-head h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ks-themed .vv-article-lede {
  margin: 14px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ks-text-muted);
  text-wrap: pretty;
}
.ks-themed .vv-article-byline {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-article-author {
  font-weight: 600;
  color: var(--ks-text);
}
.ks-themed .vv-article-cover {
  margin: 24px 0 0;
  border-radius: var(--ks-radius-card);
  overflow: hidden;
  border: 1px solid var(--ks-border);
}
.ks-themed .vv-article-cover img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 640px) {
  .ks-themed .vv-article-head {
    padding-inline: 1.5rem;
  }
}

/* ── 404 ─────────────────────────────────────────────────── */
.ks-themed .vv-not-found {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 0 96px;
  text-align: center;
}
.ks-themed .vv-not-found h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ks-themed .vv-not-found-text {
  margin: 0 0 8px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-not-found .vv-search-form {
  margin: 20px auto 20px;
}
.ks-themed .vv-not-found .vv-chips {
  justify-content: center;
}

/* ── Product page ────────────────────────────────────────── */
.ks-themed .vv-pdp {
  padding: 16px 0 40px;
}
.ks-themed .vv-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
}
.ks-themed .vv-gallery-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
}
.ks-themed .vv-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
}
.ks-themed .vv-gallery-frame .vv-badge {
  top: 14px;
  left: 14px;
}
.ks-themed .vv-gallery-thumbs,
.ks-themed .vv-pdp [data-ks-part="gallery-thumbs"] {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}
.ks-themed .vv-gallery-thumb,
.ks-themed .vv-pdp [data-ks-part="gallery-thumb"] {
  flex: none;
  width: 72px;
  height: 72px;
  padding: 4px;
  overflow: hidden;
  border: 1.5px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
  cursor: pointer;
}
.ks-themed .vv-gallery-thumb img,
.ks-themed .vv-pdp [data-ks-part="gallery-thumb"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ks-themed .vv-gallery-thumb.vv-on,
.ks-themed .vv-gallery-thumb[data-ks-active],
.ks-themed .vv-pdp [data-ks-part="gallery-thumb"][data-ks-active] {
  border-color: var(--ks-primary);
}
.ks-themed .vv-pdp-info {
  position: sticky;
  top: 96px;
}
.ks-themed .vv-pdp-title {
  margin: 4px 0 6px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ks-themed .vv-pdp-sku {
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ks-text-muted);
}
/* VI-KA-84: Safari on a phone turns the item number in the first render into a
   phone link; the number the configurator writes later stays text. Same look on both. */
.ks-themed .vv-pdp-sku a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.ks-themed .vv-pdp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 6px;
}
.ks-themed .vv-pdp-now {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-pdp-vat {
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-pdp-note {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-pdp-price-alt {
  flex-basis: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ks-text-muted);
}
.ks-themed .vv-pdp-price {
  flex-wrap: wrap;
}
.ks-themed .vv-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
}
.ks-themed .vv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-success);
}
.ks-themed .vv-stock-out .vv-dot {
  background: var(--ks-danger);
}
/* VI-KA-87: sold out but still orderable, and price on request. */
.ks-themed .vv-stock-backorder .vv-dot {
  background: var(--ks-info);
}
.ks-themed .vv-pdp-por {
  font-weight: 600;
  color: var(--ks-b2b);
}
.ks-themed [data-ks-part="price-on-request"] form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.ks-themed [data-ks-part="price-on-request-field"] {
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.ks-themed [data-ks-part="price-on-request-label"] {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ks-b2b);
}
.ks-themed [data-ks-part="price-on-request-error"] {
  color: var(--ks-danger-strong);
  font-size: 14px;
}
.ks-themed [data-ks-part="backorder"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ks-themed [data-ks-part="lead-time"] {
  color: var(--ks-text-muted);
}
.ks-themed .vv-delivery {
  margin: 0 0 14px;
  font-size: 14px;
}
.ks-themed .vv-delivery small {
  display: block;
  color: var(--ks-text-muted);
}
.ks-themed .vv-buy-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 16px 0;
}
.ks-themed .vv-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
}
.ks-themed .vv-qty button {
  width: var(--ks-tap-min, 44px);
  height: var(--ks-control-height);
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}
.ks-themed .vv-qty span {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
}
/* VI-KA-238: the typed quantity. --ks-control-font-size (16px) keeps iOS from zooming in on
   focus; wide enough for four digits (consumables by the pallet). */
.ks-themed .vv-qty .vv-qty-input {
  width: 3.5em;
  min-width: 40px;
  height: var(--ks-control-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--ks-control-font-size);
  font-weight: 600;
  text-align: center;
}
.ks-themed .vv-qty .vv-qty-input:focus-visible {
  outline: 2px solid var(--ks-primary);
  outline-offset: -2px;
  border-radius: var(--ks-radius-control);
}
.ks-themed .vv-add-btn {
  flex: 1;
  min-height: var(--ks-control-height);
  font-size: 15px;
}
.ks-themed .vv-add-btn {
  white-space: nowrap;
}
@media (max-width: 420px) {
  /* The cart icon and «Legg i handlekurven» on one line beside the stepper at 360–420px. */
  .ks-themed .vv-add-btn {
    padding: 0 12px;
  }
}
/* A package's guidance label («Velg kobling til høytrykksvasker») wraps inside the button
   instead of running past the page edge beside the stepper on a phone. */
.ks-themed .vv-add-btn {
  min-width: 0;
}
.ks-themed .vv-configurator[data-ks-incomplete] .vv-add-btn {
  white-space: normal;
  line-height: 1.25;
}
/* No cart icon while a package still needs a choice («Velg merke»), as on the platform's button. */
.ks-themed .vv-configurator[data-ks-incomplete] .vv-add-btn .vv-icon {
  display: none;
}
.ks-themed .vv-add-btn[data-ks-unavailable] {
  opacity: 0.55;
  cursor: not-allowed;
}
.ks-themed .vv-trust {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--ks-border);
  font-size: 14px;
}
.ks-themed .vv-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ks-themed .vv-trust .vv-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ks-primary);
}
.ks-themed .vv-pdp-desc {
  max-width: 75ch;
  margin-top: 10px;
  line-height: 1.65;
}
.ks-themed .vv-pdp-desc p {
  margin: 0 0 12px;
}
.ks-themed .vv-pdp-desc p:last-child {
  margin-bottom: 0;
}
/* Rich-text lists: Tailwind Preflight zeroes list-style/padding on ul/ol,
   so the spec lists in product descriptions need them restored here. */
.ks-themed .vv-pdp-desc ul,
.ks-themed .vv-pdp-desc ol {
  margin: 0 0 12px;
  padding-left: 22px;
  list-style: disc;
}
.ks-themed .vv-pdp-desc ol {
  list-style: decimal;
}
.ks-themed .vv-pdp-desc li {
  margin: 4px 0;
}
.ks-themed .vv-pdp-desc h2,
.ks-themed .vv-pdp-desc h3,
.ks-themed .vv-pdp-desc h4 {
  margin: 18px 0 8px;
  font-weight: 700;
}
/* Description media (VI-KA-46). Imported spec icons carry their size inline
   (the platform translates the source's utility classes into `style`), and
   inline wins over these rules. Anything without an explicit size must still
   not render at its intrinsic 500 px: an unsized SVG is treated as an icon,
   an unsized raster image stays fluid but never taller than the viewport. */
.ks-themed .vv-pdp-desc img {
  max-width: 100%;
  height: auto;
}
.ks-themed .vv-pdp-desc img[src$=".svg" i]:not([style]):not([width]) {
  max-height: 48px;
  width: auto;
}
.ks-themed .vv-pdp-desc img:not([src$=".svg" i]) {
  max-height: min(520px, 70vh);
  width: auto;
  object-fit: contain;
}
@media (max-width: 899px) {
  .ks-themed .vv-pdp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .ks-themed .vv-pdp-info {
    position: static;
  }
}
@media (max-width: 599px) {
  /* Edge to edge on a phone. The square shape is dropped here: with the 40svh cap below it
     shrank the width too, and the box stopped short of the right edge. */
  .ks-themed .vv-gallery-frame {
    margin: 0 calc(-1 * var(--vv-gutter));
    border-radius: 0;
    aspect-ratio: auto;
    height: min(100vw, 40svh);
  }
  .ks-themed .vv-gallery-frame img {
    padding: 16px;
  }
}

/* ── Buy bar (VI-KA-78, commerce.sticky-buy.v1; VI-KA-180) ────── */
/* The platform sets data-ks-visible once the buy box is scrolled out above; the script in
   product-main.liquid sets data-vv-early while the in-page buy button is out of view (below
   the first screen or above it), so the bar shows from page load and hides while the button
   is on screen. It does so at every width: a 1260px desktop at 721px height has the button
   at y=784, below the fold. */
.ks-themed .vv-sticky-buy {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, calc((100vw - 1200px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ks-border);
  background: var(--ks-bg);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.ks-themed .vv-sticky-buy[data-ks-visible] {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}
.ks-themed:has(.vv-sticky-buy) {
  padding-bottom: 72px;
}
.ks-themed .vv-sticky-buy-info {
  display: grid;
  flex: 1;
  min-width: 0;
}
.ks-themed .vv-sticky-buy-title {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ks-text-muted);
}
.ks-themed .vv-sticky-buy-price {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-sticky-buy-price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ks-text-muted);
}
.ks-themed .vv-sticky-buy[data-ks-chosen] .vv-sticky-buy-info {
  /* «5L · 589,00 kr»: the chosen size and its price, written by the platform. */
  display: block;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ks-themed .vv-sticky-buy-btn {
  flex: none;
  min-height: var(--ks-control-height);
  padding: 0 18px;
}
@media (prefers-reduced-motion: reduce) {
  .ks-themed .vv-sticky-buy,
  .ks-themed .vv-sticky-buy[data-ks-visible] {
    transition: none;
  }
}

/* ── Product details (attributes / specs / documents) ──── */
.ks-themed .vv-details {
  padding: 8px 0 40px;
}
.ks-themed .vv-details-block {
  border-top: 1px solid var(--ks-border);
  padding: 14px 0;
}
.ks-themed .vv-details-block > summary {
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.ks-themed .vv-details-block > summary::-webkit-details-marker {
  display: none;
}
.ks-themed .vv-details-block > summary::after {
  content: "+";
  color: var(--ks-text-muted);
}
.ks-themed .vv-details-block[open] > summary::after {
  content: "−";
}
.ks-themed .vv-attr-group + .vv-attr-group {
  margin-top: 16px;
}
.ks-themed .vv-attr-group h3 {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed .vv-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 14px;
}
.ks-themed .vv-table th,
.ks-themed .vv-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ks-border);
  text-align: left;
  vertical-align: top;
}
.ks-themed .vv-table th {
  width: 38%;
  font-weight: 500;
  color: var(--ks-text-muted);
}
.ks-themed .vv-swatches {
  display: inline-flex;
  gap: 4px;
  margin-right: 8px;
  vertical-align: middle;
}
.ks-themed .vv-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 50%;
}
.ks-themed .vv-documents {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ks-themed .vv-document {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  color: var(--ks-text);
  text-decoration: none;
}
.ks-themed .vv-document:hover {
  border-color: var(--ks-primary);
}
.ks-themed .vv-document .vv-icon {
  width: 18px;
  height: 18px;
  color: var(--ks-primary);
}
.ks-themed .vv-document small {
  margin-left: auto;
  color: var(--ks-text-muted);
}
/* ── Sikkerhet/HMS (VI-KA-168) ── */
.ks-themed .vv-hms + .vv-hms {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ks-border);
}
.ks-themed .vv-hms-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.ks-themed .vv-hms-pictograms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-themed .vv-hms-pictograms img {
  display: block;
  width: 56px;
  height: 56px;
}
.ks-themed .vv-hms-signal {
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.ks-themed .vv-hms-statements h3 {
  margin: 14px 0 6px;
  font-size: 1rem;
}
.ks-themed .vv-hms-statements ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}
.ks-themed .vv-hms-code {
  font-weight: 600;
}
.ks-themed .vv-related {
  padding: 8px 0 56px;
}

/* ── Islands: product-purchase (commerce.product-purchase.v1) ── */
/* The server-rendered fallback hides once the React island claims the host. */
.ks-themed [data-ks-island-status="mounted"] [data-ks-island-ssr] {
  display: none;
}
.ks-themed .vv-purchase [data-ks-part="options"] {
  margin: 12px 0;
}
.ks-themed .vv-purchase [data-ks-part="price"] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 4px;
}
.ks-themed .vv-purchase [data-ks-part="price-amount"] {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-themed
  .vv-purchase
  [data-ks-part="price"][data-ks-reduced]
  [data-ks-part="price-amount"] {
  color: var(--ks-danger-strong);
}
.ks-themed .vv-purchase [data-ks-part="price-vat-label"],
.ks-themed .vv-purchase [data-ks-part="price-secondary"],
.ks-themed .vv-purchase [data-ks-part="price-note"] {
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-purchase [data-ks-part="price-secondary"],
.ks-themed .vv-purchase [data-ks-part="price-note"] {
  margin: 0 0 4px;
}
.ks-themed .vv-purchase [data-ks-part="price-was"],
.ks-themed .vv-configurator [data-ks-part="price-was"] {
  font-size: 14px;
  color: var(--ks-text-muted);
}
/* Omnibus prior-price line on a configurable product's selected variant. */
.ks-themed .vv-configurator [data-ks-part="price-note"] {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-purchase [data-ks-part="price-sale-label"] {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-danger-subtle);
  color: var(--ks-danger-strong);
  font-size: 12px;
  font-weight: 600;
}
.ks-themed .vv-purchase [data-ks-part="price-unavailable"] {
  color: var(--ks-text-muted);
}
.ks-themed .vv-purchase [data-ks-part="badge"] {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  border-radius: var(--ks-radius-control);
  background: var(--ks-surface);
  font-size: 12px;
}
.ks-themed .vv-purchase [data-ks-part="stock"] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
}
.ks-themed .vv-purchase [data-ks-part="stock"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-success);
}
.ks-themed
  .vv-purchase
  [data-ks-part="stock"][data-ks-in-stock="false"]::before {
  background: var(--ks-danger);
}
/* VI-KA-87: sold out but orderable keeps the backorder colour. */
.ks-themed
  .vv-purchase
  [data-ks-part="stock"][data-ks-in-stock="false"][data-ks-backorder]::before {
  background: var(--ks-info);
}
/* VI-KA-85: a sold-out product has no buy button, only the restock alert
   beside the stock line. The island still renders a disabled button. */
.ks-themed
  .vv-purchase
  [data-ks-part="stock"][data-ks-in-stock="false"]:not([data-ks-backorder])
  ~ [data-ks-part="purchase"] {
  display: none;
}
.ks-themed .vv-purchase [data-ks-part="stock"] {
  flex-wrap: wrap;
}
.ks-themed .vv-purchase [data-ks-part="purchase"] {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 16px 0;
}
.ks-themed .vv-purchase [data-ks-part="quantity"] {
  flex: none;
}
.ks-themed .vv-purchase [data-ks-part="add-to-cart"] {
  flex: 1;
  display: flex;
}
.ks-themed .vv-purchase [data-ks-part="add-to-cart"] > * {
  flex: 1;
  min-height: var(--ks-control-height);
  font-size: 15px;
}
.ks-themed .vv-purchase [data-ks-part="volume-tiers"] {
  margin-top: 10px;
  font-size: 13.5px;
}
.ks-themed .vv-purchase [data-ks-part="error"] {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-danger-subtle);
  color: var(--ks-danger-text);
  font-size: 13.5px;
}
.ks-themed .vv-purchase [data-ks-part="loading"] {
  color: var(--ks-text-muted);
  font-size: 13px;
}

/* ── Islands: product-configurator (commerce.product-configurator.v1) ── */
.ks-themed .vv-configurator:empty {
  min-height: 140px;
  margin: 16px 0;
  border: 1px dashed var(--ks-border);
  border-radius: var(--ks-radius-card);
}
/* VI-KA-78: the island's own sticky row repeated the name, price and stock
   under the title. The phone buy bar (.vv-sticky-buy) does that job now, so
   the row is never shown. */
.ks-themed .vv-configurator [data-ks-part="sticky-summary"] {
  display: none;
}
/* The island renders its own gallery; on this page the theme gallery column
   already shows the product, so the island's gallery frame is a compact
   strip of the option-driven images. */
.ks-themed .vv-configurator [data-ks-part="configuration-grid"] {
  display: grid;
  gap: 16px;
}
.ks-themed .vv-configurator [data-ks-part="gallery-frame"] {
  display: none;
}
.ks-themed .vv-configurator [data-ks-part="price-stock"] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 6px;
}
.ks-themed
  .vv-configurator
  [data-ks-part="price-stock"]
  [data-ks-part="price"] {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-part="price-vat-label"] {
  font-size: 13px;
  color: var(--ks-text-muted);
}
/* VI-KA-78: the same stock badge as a simple product — a coloured dot
   before plain text: green in stock, red sold out, blue backorder. */
.ks-themed
  .vv-configurator
  [data-ks-part="price-stock"]
  [data-ks-part="stock"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
.ks-themed .vv-configurator [data-ks-part="stock"]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-success);
}
.ks-themed .vv-configurator [data-ks-part="stock"][data-ks-in-stock="false"]::before {
  background: var(--ks-danger);
}
.ks-themed
  .vv-configurator
  [data-ks-part="stock"][data-ks-in-stock="false"][data-ks-backorder]::before {
  background: var(--ks-info);
}
.ks-themed .vv-configurator [data-ks-part="options"] {
  display: grid;
  gap: 14px;
}
.ks-themed .vv-configurator [data-ks-part="option-section"] {
  padding: 12px 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-bg);
}
.ks-themed .vv-configurator [data-ks-part="option-section"][data-ks-missing] {
  border-color: var(--ks-warning);
}
.ks-themed .vv-configurator [data-ks-part="option-heading"] {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed
  .vv-configurator
  [data-ks-part="option-section"][data-ks-required]
  [data-ks-part="option-heading"]::after {
  content: " *";
  color: var(--ks-danger-strong);
}
.ks-themed .vv-configurator [data-ks-part="option-description"] {
  margin: -4px 0 8px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
/* Server-rendered configurator controls (`[data-ks-island-ssr]`) — visible
   until the island has resolved every variant's price and stock. Mirrors the
   island's own option-choice pills so the handover does not jump. */
.ks-themed .vv-opt-label {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed .vv-opt-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-themed .vv-opt-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ks-control-height);
  min-width: var(--ks-tap-min);
  padding: 6px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ks-themed .vv-opt-value:hover {
  border-color: var(--ks-primary);
}
.ks-themed .vv-opt-value.sel {
  border-color: var(--ks-primary);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .vv-opt-value.vv-opt-out,
.ks-themed .vv-opt-value[disabled] {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}

.ks-themed .vv-configurator [data-ks-part="option-choices"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-themed .vv-configurator [data-ks-part="option-choice"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ks-control-height);
  padding: 6px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ks-themed .vv-configurator [data-ks-part="option-choice"]:hover {
  border-color: var(--ks-primary);
}
.ks-themed .vv-configurator [data-ks-part="option-choice"][data-ks-selected] {
  border-color: var(--ks-primary);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed
  .vv-configurator
  [data-ks-part="option-choice"][data-ks-unavailable] {
  opacity: 0.45;
  text-decoration: line-through;
}
.ks-themed .vv-configurator [data-ks-part="option-swatch"] {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 50%;
}
.ks-themed .vv-configurator [data-ks-part="option-choice-image"] {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: calc(var(--ks-radius-control) / 2);
  background: var(--ks-white);
}
.ks-themed .vv-configurator [data-ks-part="option-choice-surcharge"],
.ks-themed .vv-configurator [data-ks-part="option-surcharge"] {
  font-size: 12px;
  opacity: 0.8;
}
.ks-themed .vv-configurator [data-ks-part="option-text"] {
  width: 100%;
  min-height: var(--ks-control-height);
  padding: 0 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  font: inherit;
}
.ks-themed .vv-configurator [data-ks-part="option-checkbox"] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.ks-themed .vv-configurator [data-ks-part="purchase-summary"] {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
  font-size: 13.5px;
}
.ks-themed .vv-configurator [data-ks-part="summary-line"] {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="summary-line-price"] {
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-part="total"] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ks-border);
}
.ks-themed .vv-configurator [data-ks-part="total-label"] {
  font-weight: 600;
}
.ks-themed .vv-configurator [data-ks-part="total-price"] {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-part="purchase"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 16px 0 0;
}
.ks-themed .vv-configurator [data-ks-part="quantity"] {
  flex: none;
}
.ks-themed .vv-configurator [data-ks-part="add-to-cart"] {
  flex: 1;
  display: flex;
  min-width: 200px;
}
.ks-themed .vv-configurator [data-ks-part="add-to-cart"] > * {
  flex: 1;
  min-height: var(--ks-control-height);
  font-size: 15px;
}
.ks-themed .vv-configurator [data-ks-part="error"] {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-warning-subtle);
  color: var(--ks-warning-text);
  font-size: 13.5px;
}
.ks-themed .vv-configurator [data-ks-part="loading"] {
  color: var(--ks-text-muted);
  font-size: 13px;
}

/* Bundle product (data-ks-product-type="bundle", ADR-0186): the island renders
   "what's in the package" — one fieldset per slot, one row per component —
   then price, stock and the buy row (VI-KA-72). */
.ks-themed .vv-configurator [data-ks-part="bundle-slots"] {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-bg);
}
.ks-themed .vv-configurator [data-ks-part="bundle-heading"] {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot"] {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot"] + [data-ks-part="bundle-slot"] {
  border-top: 1px solid var(--ks-border);
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot-heading"] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot-heading"] small {
  letter-spacing: 0;
  text-transform: none;
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot-heading"] small {
  font-weight: 400;
  color: var(--ks-text-muted);
}
/* A fixed component shows a heading only when the merchant wrote one (VI-KA-72);
   the imported slot name is often just "pakke" or "produkt". Kept for screen readers. */
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-choice="false"]:not([data-ks-titled="true"])
  [data-ks-part="bundle-slot-heading"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot-options"] {
  display: grid;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option"] {
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-choice="false"]
  [data-ks-part="bundle-option"] {
  grid-template-columns: 56px minmax(0, 1fr) auto;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-choice="true"]
  [data-ks-part="bundle-option"] {
  cursor: pointer;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-choice="true"]
  [data-ks-part="bundle-option"][data-ks-selected="false"] {
  opacity: 0.7;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option"][data-ks-in-stock="false"] {
  opacity: 0.55;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-input"] {
  /* The shared Input styles a text field; a choice keeps the browser's own
     radio or checkbox so the picked one shows its mark (VI-KA-72). */
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  accent-color: var(--ks-primary);
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-choice="true"]
  [data-ks-part="bundle-option"][data-ks-selected="true"]
  [data-ks-part="bundle-option-label"] {
  color: var(--ks-primary);
}
/* The shopper pressed buy with this choice open (VI-KA-72). */
.ks-themed .vv-configurator [data-ks-part="bundle-slot"][data-ks-missing="true"] [data-ks-part="bundle-slot-heading"] {
  color: var(--ks-danger-strong);
}
.ks-themed .vv-configurator [data-ks-part="bundle-slot"][data-ks-missing="true"] [data-ks-part="bundle-variant"] {
  border-color: var(--ks-danger-strong);
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-image"] {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-white);
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-copy"] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-label"] {
  font-weight: 600;
  line-height: 1.3;
  color: var(--ks-text);
  text-decoration: none;
}
.ks-themed .vv-configurator a[data-ks-part="bundle-option-label"]:hover {
  color: var(--ks-primary);
  text-decoration: underline;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-sku"] {
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-stock"] {
  font-size: 12px;
  font-weight: 500;
  color: var(--ks-warning);
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-quantity"] {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-quantity-input"] {
  width: 64px;
  min-height: var(--ks-tap-min);
  padding: 0 8px;
  text-align: center;
}
/* VI-KA-97: the component's price sits small under its name, on one line. */
.ks-themed .vv-configurator [data-ks-part="bundle-option-price"] {
  font-size: 13px;
  white-space: nowrap;
  color: var(--ks-text-muted);
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option"][data-ks-unavailable="true"] {
  cursor: not-allowed;
}
/* VI-KA-97: a slot that asks first ("Hvilken høytrykksvasker har du?"), then a compact
   choice of short rows — label and what it fits — with the chosen coupling pictured below. */
.ks-themed .vv-configurator [data-ks-part="bundle-filter"] {
  padding: 8px 0 4px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-question"] {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ks-text);
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-values"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-value"] {
  min-height: var(--ks-tap-min);
  padding: 0 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-value"]:hover {
  border-color: var(--ks-primary);
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-value"][data-ks-selected="true"] {
  border-color: var(--ks-primary);
  box-shadow: 0 0 0 1px var(--ks-primary);
  font-weight: 600;
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-step"] {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ks-text);
}
.ks-themed .vv-configurator [data-ks-part="bundle-filter-empty"],
.ks-themed .vv-configurator [data-ks-part="bundle-filter-none"] {
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-display="compact"]
  [data-ks-part="bundle-slot-options"] {
  gap: 8px;
  padding: 8px 0 4px;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-display="compact"]
  [data-ks-part="bundle-option"] {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-display="compact"]
  [data-ks-part="bundle-option"][data-ks-selected="true"] {
  border-color: var(--ks-primary);
  box-shadow: 0 0 0 1px var(--ks-primary);
  opacity: 1;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-display="compact"]
  [data-ks-part="bundle-option"][data-ks-selected="false"] {
  opacity: 1;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-display="compact"]
  [data-ks-part="bundle-option"][data-ks-in-stock="false"] {
  opacity: 0.55;
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-note"] {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="bundle-option-chosen"] {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
  padding: 10px 0 0;
  font-size: 14px;
}
/* VI-KA-93: a product family as a bundle component — the variant picker
   under its row (open list, compact "Endre", or swatches). */
.ks-themed .vv-configurator [data-ks-part="bundle-option-variant"] {
  font-size: 13px;
  font-weight: 500;
  color: var(--ks-text);
}
/* VI-KA-200: the picker is a row of its own under the component, spanning every column; in
   the narrow auto column its size buttons took the row's width and hid the name and price. */
.ks-themed .vv-configurator [data-ks-part="bundle-option"] > [data-ks-slot="bundle-variant"] {
  grid-column: 1 / -1;
  min-width: 0;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-picker"] {
  padding: 0 0 12px 68px;
}
.ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-choice="true"]
  [data-ks-part="bundle-variant-picker"] {
  padding-left: 98px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-current"] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 13.5px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-change"] {
  min-height: var(--ks-tap-min);
  padding: 2px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg);
  color: var(--ks-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-options"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ks-tap-min);
  padding: 6px 12px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant"]:hover {
  border-color: var(--ks-primary);
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant"][data-ks-selected="true"] {
  border-color: var(--ks-primary);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant"][data-ks-in-stock="false"] {
  opacity: 0.55;
}
.ks-themed .vv-configurator [data-ks-display="open"] [data-ks-part="bundle-variant"] {
  border-radius: var(--ks-radius-card);
  padding: 6px 12px 6px 6px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-image"] {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--ks-radius-control);
  background: var(--ks-white);
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-sku"] {
  font-size: 12px;
  opacity: 0.75;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-stock"] {
  font-size: 12px;
  font-weight: 500;
}
.ks-themed .vv-configurator [data-ks-part="bundle-variant-swatch"] {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 50%;
  background-size: cover;
}
@media (max-width: 520px) {
  .ks-themed .vv-configurator [data-ks-part="bundle-variant-picker"],
  .ks-themed
    .vv-configurator
    [data-ks-part="bundle-slot"][data-ks-choice="true"]
    [data-ks-part="bundle-variant-picker"] {
    padding-left: 0;
  }
}
@media (max-width: 520px) {
  .ks-themed .vv-configurator [data-ks-part="bundle-option"],
  .ks-themed
    .vv-configurator
    [data-ks-part="bundle-slot"][data-ks-choice="false"]
    [data-ks-part="bundle-option"] {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .ks-themed
    .vv-configurator
    [data-ks-part="bundle-slot"][data-ks-choice="true"]
    [data-ks-part="bundle-option"] {
    grid-template-columns: auto 48px minmax(0, 1fr) auto;
  }
  .ks-themed .vv-configurator [data-ks-part="bundle-option-image"] {
    width: 48px;
    height: 48px;
  }
  .ks-themed
  .vv-configurator
  [data-ks-part="bundle-slot"][data-ks-display="compact"]
  [data-ks-part="bundle-option"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 8px 12px;
  }
  .ks-themed .vv-configurator [data-ks-part="bundle-option-chosen"] {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }
}
.ks-themed .vv-configurator [data-ks-bundle] > [data-ks-part="price"] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.ks-themed .vv-configurator [data-ks-bundle] [data-ks-part="price-amount"] {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-bundle] [data-ks-part="price-secondary"] {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
/* VI-KA-93: bundle summary above the buy button — ordinary price (struck
   through), the discount, "Du betaler" before the price, then the saving. */
.ks-themed .vv-configurator [data-ks-part="bundle-regular-price"],
.ks-themed .vv-configurator [data-ks-part="bundle-discount"] {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 320px;
  margin: 0 0 2px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-configurator [data-ks-part="bundle-regular-price"] s {
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="bundle-discount"] {
  color: var(--ks-success-strong);
  font-weight: 600;
}
.ks-themed .vv-configurator [data-ks-part="bundle-summary-label"] {
  color: var(--ks-text-muted);
  font-weight: 400;
}
.ks-themed
  .vv-configurator
  [data-ks-bundle]
  > [data-ks-part="price"]
  [data-ks-part="bundle-summary-label"] {
  font-size: 14px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-savings"] {
  margin: 0 0 6px;
  font-size: 13.5px;
}
.ks-themed .vv-configurator [data-ks-part="bundle-savings"] s {
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="bundle-savings"] strong {
  color: var(--ks-success-strong);
}
.ks-themed .vv-configurator [data-ks-bundle] > [data-ks-part="stock"] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ks-success-strong);
}
.ks-themed .vv-configurator [data-ks-bundle] > [data-ks-part="stock"]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ks-themed
  .vv-configurator
  [data-ks-bundle]
  > [data-ks-part="stock"][data-ks-in-stock="false"] {
  color: var(--ks-warning);
}
.ks-themed .vv-configurator [data-ks-part="stock-count"] {
  font-size: 12px;
  font-weight: 400;
  color: var(--ks-text-muted);
}
.ks-themed .vv-configurator [data-ks-part="action"] {
  flex: 1;
  display: flex;
  min-width: 200px;
}
.ks-themed .vv-configurator [data-ks-part="action"] > * {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ks-themed .vv-configurator [data-ks-part="action"] button {
  width: 100%;
  min-height: var(--ks-control-height);
  font-size: 15px;
}

/* Island loading stand-in (platform `data-ks-part="loading"`, K-Shop v1.140.2).
   On first paint the `[data-ks-island-ssr]` block below carries the visitor
   instead, and the island stays silent. This is what shows on the second
   product: a client-side navigation reuses the same host, the island remounts,
   and the fallback was removed the first time it went ready — so from then on
   this is the only thing between the visitor and an empty purchase box. The
   rows are empty by design; the platform emits them for exactly this. */
.ks-themed [data-ks-part="loading"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.ks-themed [data-ks-part^="loading-"]:not([data-ks-part="loading-label"]) {
  display: block;
  border-radius: var(--ks-radius-card);
  background: linear-gradient(
    90deg,
    var(--ks-surface) 0%,
    var(--ks-border) 50%,
    var(--ks-surface) 100%
  );
  background-size: 200% 100%;
  animation: vv-island-shimmer 1.3s ease-in-out infinite;
}
/* Sized to the real controls so the handover does not shift the page. */
.ks-themed [data-ks-part="loading-price"] {
  width: 42%;
  min-width: 120px;
  height: 30px;
}
.ks-themed [data-ks-part="loading-options"] {
  width: 100%;
  height: var(--ks-control-height);
}
.ks-themed [data-ks-part="loading-quantity"] {
  width: 120px;
  height: var(--ks-control-height);
}
.ks-themed [data-ks-part="loading-action"] {
  width: 100%;
  max-width: 320px;
  height: var(--ks-control-height);
  border-radius: var(--ks-radius-pill);
}
.ks-themed [data-ks-part="loading-label"] {
  color: var(--ks-text-muted);
  font-size: 13px;
}
@keyframes vv-island-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-themed [data-ks-part^="loading-"]:not([data-ks-part="loading-label"]) {
    animation: none;
    background: var(--ks-surface);
  }
}

/* ── Homepage ────────────────────────────────────────────── */
.ks-themed .vv-hero {
  padding: 32px 0 24px;
}
.ks-themed .vv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 40px;
  align-items: center;
}
.ks-themed .vv-hero-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.ks-themed .vv-hero-body {
  max-width: 52ch;
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ks-text-muted);
}
.ks-themed .vv-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ks-themed .vv-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.ks-themed .vv-hero-metric,
.ks-themed .vv-hero-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
  font-size: 13.5px;
}
.ks-themed .vv-hero-metric strong {
  font-size: 22px;
  color: var(--ks-primary);
}
.ks-themed .vv-hero-card span {
  color: var(--ks-text-muted);
}
.ks-themed .vv-hero-media {
  overflow: hidden;
  border-radius: var(--ks-radius-card);
  border: 1px solid var(--ks-border);
  background: var(--ks-surface);
}
.ks-themed .vv-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.ks-themed .vv-home-brands {
  padding: 24px 0 40px;
}
.ks-themed .vv-home-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ks-themed .vv-home-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
  color: var(--ks-text);
  text-decoration: none;
  overflow: hidden;
}
.ks-themed .vv-home-brand-card.vv-home-brand-dark {
  border-color: var(--ks-primary);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .vv-home-brand-logo {
  position: relative;
  display: block;
  max-width: 70%;
}
.ks-themed .vv-home-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  object-position: center;
}
.ks-themed .vv-home-brand-dark .vv-home-brand-cta.vv-home-brand-cta {
  border-color: color-mix(in srgb, var(--ks-primary-text) 45%, transparent);
  background: transparent;
  color: var(--ks-primary-text);
}
.ks-themed .vv-home-brand-name {
  font-size: 22px;
  font-weight: 700;
}
.ks-themed .vv-home-brand-cta {
  position: relative;
  align-self: center;
  padding: 8px 14px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 899px) {
  .ks-themed .vv-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Three small logo cards side by side instead of three tall cards stacked. */
  .ks-themed .vv-home-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .ks-themed .vv-home-brand-card {
    min-height: 84px;
    padding: 12px 8px;
  }
  .ks-themed .vv-home-brand-logo {
    max-width: 100%;
  }
  .ks-themed .vv-home-brand-logo img {
    max-height: 36px;
  }
  .ks-themed .vv-home-brand-cta {
    display: none;
  }
}

/* Homepage: reference-led merchandising and compact category navigation. */
.ks-themed .vv-hero {
  padding: 24px 0 32px;
}
.ks-themed .vv-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  isolation: isolate;
}
.ks-themed .vv-hero-copy {
  grid-area: 1 / 1;
  z-index: 1;
  padding: clamp(28px, 5vw, 72px);
  max-width: 650px;
  color: var(--ks-primary-text);
}
.ks-themed .vv-hero-copy h1 {
  font-size: clamp(36px, 4.5vw, 64px);
  max-width: 12ch;
  text-wrap: balance;
}
.ks-themed .vv-hero-copy .vv-eyebrow {
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.ks-themed .vv-hero-body {
  color: inherit;
  max-width: 35ch;
  margin: 20px 0 28px;
}
.ks-themed .vv-hero-media {
  grid-area: 1 / 1;
  height: 100%;
  border: 0;
  border-radius: var(--ks-radius-card);
  position: relative;
  background: var(--ks-primary);
}
.ks-themed .vv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ks-primary) 90%, transparent),
    transparent 85%
  );
}
.ks-themed .vv-hero-media img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  object-position: center;
}
.ks-themed .vv-hero-ctas .vv-btn {
  background: var(--ks-primary-text);
  color: var(--ks-primary);
  border-color: var(--ks-primary-text);
}
.ks-themed .vv-hero-ctas .vv-btn-ghost {
  background: transparent;
  color: var(--ks-primary-text);
}
.ks-themed .vv-hero-facts:empty {
  display: none;
}
.ks-themed .vv-cat-tile:focus-visible,
.ks-themed .vv-promo-card:focus-visible,
.ks-themed .vv-home-brand-card:focus-visible,
.ks-themed .vv-hero-ctas a:focus-visible {
  outline: 3px solid var(--ks-accent);
  outline-offset: 4px;
}
@media (max-width: 599px) {
  .ks-themed .vv-hero {
    padding-top: 12px;
  }
  .ks-themed .vv-hero-copy {
    padding: 24px 20px 28px;
  }
  /* The photo gets its own band above the text instead of sitting under a dark veil where
     it could hardly be seen (Rune, 2026-11-05). */
  .ks-themed .vv-hero-media {
    grid-area: 1 / 1;
    height: 190px;
    border-radius: var(--ks-radius-card) var(--ks-radius-card) 0 0;
  }
  .ks-themed .vv-hero-media img {
    object-position: 62% center;
  }
  .ks-themed .vv-hero-media::after {
    background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--ks-primary) 55%, transparent));
  }
  .ks-themed .vv-hero-copy {
    grid-area: 2 / 1;
    border-radius: 0 0 var(--ks-radius-card) var(--ks-radius-card);
    background: var(--ks-primary);
  }
  .ks-themed .vv-hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Homepage: USP row, category tiles, promo banners, product rows (VI-KA-76) ── */
.ks-themed .vv-usps-band {
  margin-top: -8px;
  padding: 0 0 8px;
}
.ks-themed .vv-usps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding: 12px 16px;
  list-style: none;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
}
.ks-themed .vv-usps-row.vv-usps-dup {
  display: none;
}
.ks-themed .vv-usp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 28px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ks-text);
  white-space: nowrap;
}
.ks-themed .vv-usp .vv-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ks-primary);
}

.ks-themed .vv-cat-tiles,
.ks-themed .vv-promo,
/* A Ragnar recommendation row (K-SHOP-3113) is fetched after the page is up.
   Until it lands the placeholder keeps the row's height, so nothing below it
   moves when the cards arrive (VI-KA-154). A row that comes back empty
   collapses. */
.ks-themed [data-ks-recommendations-section]:not([data-ks-recommendations-state]),
.ks-themed [data-ks-recommendations-section][data-ks-recommendations-state="loading"] {
  min-height: 480px;
}
@media (max-width: 639px) {
  .ks-themed [data-ks-recommendations-section]:not([data-ks-recommendations-state]),
  .ks-themed [data-ks-recommendations-section][data-ks-recommendations-state="loading"] {
    min-height: 420px;
  }
}
.ks-themed .vv-prod-row {
  padding: 24px 0;
}
.ks-themed .vv-cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ks-themed .vv-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-bg);
  color: var(--ks-text);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.ks-themed .vv-cat-tile:hover {
  border-color: var(--ks-primary);
  box-shadow: 0 8px 20px -12px rgba(2, 6, 23, 0.35);
  transform: translateY(-1px);
}
.ks-themed .vv-cat-tile-icon {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--ks-primary) 7%, var(--ks-bg));
  color: var(--ks-primary);
}
.ks-themed .vv-cat-tile-icon .vv-icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}
.ks-themed .vv-cat-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ks-themed .vv-cat-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}
.ks-themed .vv-cat-tile-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.ks-themed .vv-cat-tile-body small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ks-text-muted);
}

.ks-themed .vv-promo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ks-themed .vv-promo-grid-1 {
  grid-template-columns: minmax(0, 1fr);
}
.ks-themed .vv-promo-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ks-themed .vv-promo-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--ks-radius-card);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  text-decoration: none;
  isolation: isolate;
}
.ks-themed .vv-promo-grid-1 .vv-promo-card {
  min-height: 260px;
}
.ks-themed .vv-promo-accent {
  background: var(--ks-accent);
}
.ks-themed .vv-promo-surface {
  border: 1px solid var(--ks-border);
  background: var(--ks-surface);
  color: var(--ks-text);
}
.ks-themed .vv-promo-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ks-themed .vv-promo-card:hover .vv-promo-image {
  transform: scale(1.03);
}
.ks-themed .vv-promo-has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ks-primary) 10%, transparent) 20%,
    color-mix(in srgb, var(--ks-primary) 88%, transparent) 100%
  );
}
.ks-themed .vv-promo-surface.vv-promo-has-image::before {
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--ks-white) 92%, transparent) 100%);
}
.ks-themed .vv-promo-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 40ch;
  padding: 24px;
}
.ks-themed .vv-promo-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ks-themed .vv-promo-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ks-themed .vv-promo-text {
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.92;
}
.ks-themed .vv-promo-cta {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1023px) {
  .ks-themed .vv-cat-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ks-themed .vv-promo-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  /* The strip glides sideways on its own: two copies of the list in one track that moves
     left by exactly one copy, then starts over. The border sits on the band so the copies
     read as one strip. Touch or hover pauses it. */
  .ks-themed .vv-usps-band {
    margin-top: 0;
    padding: 0;
    border-block: 1px solid var(--ks-border);
    background: var(--ks-surface);
  }
  .ks-themed .vv-usps-band .vv-wrap {
    overflow: hidden;
    padding: 0;
  }
  .ks-themed .vv-usps-track {
    display: flex;
    width: max-content;
    animation: vv-usp-glide 28s linear infinite;
  }
  .ks-themed .vv-usps-track:hover,
  .ks-themed .vv-usps-track:active {
    animation-play-state: paused;
  }
  .ks-themed .vv-usps-row,
  .ks-themed .vv-usps-row.vv-usps-dup {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 24px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .ks-themed .vv-usp {
    flex: none;
  }
  .ks-themed .vv-cat-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ks-themed .vv-cat-tile {
    min-height: 0;
  }
  .ks-themed .vv-cat-tile-icon {
    aspect-ratio: 16 / 9;
  }
  .ks-themed .vv-promo-grid,
  .ks-themed .vv-promo-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-themed .vv-promo-card {
    min-height: 180px;
  }
  .ks-themed .vv-promo-body {
    padding: 18px;
  }
  /* Product rows scroll sideways on a phone: 70vw cards with snap points,
     the Magento carousel without its JavaScript. Three-class selectors on
     purpose: the platform links theme assets alphabetically, so theme.css
     (and its two-column .vv-prod-grid) lands after this file and would win a
     specificity tie. */
  .ks-themed .vv-prod-row .vv-wrap {
    padding-right: 0;
  }
  .ks-themed .vv-prod-row .vv-section-head {
    padding-right: var(--vv-gutter);
  }
  .ks-themed .vv-prod-row .vv-prod-row-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-right: var(--vv-gutter);
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--vv-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ks-themed .vv-prod-row .vv-prod-row-track::-webkit-scrollbar {
    display: none;
  }
  .ks-themed .vv-prod-row .vv-prod-row-track > .vv-card {
    flex: 0 0 70vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}

/* VI-KA-84: B2B-only products — own colour, apart from the stock chip. */
.ks-themed .vv-b2b-badge,
.ks-themed [data-ks-part="b2b-only-badge"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--ks-radius-control);
  background: var(--ks-b2b);
  color: var(--ks-b2b-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
/* Stock chip sits top-left and the merchandising badge top-right on a card. */
.ks-themed .vv-card .vv-b2b-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
}
.ks-themed .vv-gallery-frame .vv-b2b-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}
.ks-themed .vv-b2b-badge .vv-icon {
  width: 12px;
  height: 12px;
}
.ks-themed .vv-card-b2b-price,
.ks-themed [data-ks-part="b2b-only-price"] {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ks-b2b);
}
.ks-themed .vv-card-b2b-login {
  white-space: nowrap;
}
.ks-themed .vv-b2b-notice,
.ks-themed [data-ks-part="b2b-only"] {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--ks-b2b-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-b2b-subtle);
  color: var(--ks-text);
  font-size: 14px;
}
.ks-themed [data-ks-part="b2b-only"] > [data-ks-part="b2b-only-badge"] {
  justify-self: start;
}
.ks-themed [data-ks-part="b2b-only-message"] {
  margin: 0;
}
.ks-themed [data-ks-part="b2b-only-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-themed [data-ks-part="b2b-only-actions"] a {
  text-decoration: none;
}
.ks-themed [data-ks-part="b2b-only-sign-in"]:not(.vv-btn),
.ks-themed [data-ks-part="b2b-only-register"]:not(.vv-btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--ks-tap-min);
  padding: 6px 14px;
  border: 1px solid var(--ks-primary);
  border-radius: var(--ks-radius-pill);
  font-weight: 600;
}
.ks-themed [data-ks-part="b2b-only-sign-in"]:not(.vv-btn) {
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed [data-ks-part="b2b-only-register"]:not(.vv-btn) {
  color: var(--ks-primary);
}
/* A business-only size is a lock, not a sold-out strike-through. */
.ks-themed .vv-opt-value[data-ks-b2b-locked],
.ks-themed .vv-configurator [data-ks-part="option-choice"][data-ks-b2b-locked] {
  border-style: dashed;
  border-color: var(--ks-b2b);
}
.ks-themed .vv-opt-value .vv-lock,
.ks-themed [data-ks-part="option-choice-lock"] {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  color: var(--ks-b2b);
}
.ks-themed .vv-configurator [data-ks-part="option-choice"][data-ks-selected][data-ks-b2b-locked] [data-ks-part="option-choice-lock"] {
  color: currentColor;
}


/* Homepage refinement: product photography, merchandising and spacing.
   Scoped to homepage sections so category and product pages keep their layout. */
.ks-themed .vv-cat-tiles,
.ks-themed .vv-prod-row,
.ks-themed .vv-promo {
  padding-block: clamp(24px, 3.2vw, 44px);
}
.ks-themed .vv-cat-tiles .vv-section-head,
.ks-themed .vv-prod-row .vv-section-head {
  margin-bottom: 22px;
  align-items: baseline;
  gap: 16px;
}
.ks-themed .vv-cat-tile {
  border-color: color-mix(in srgb, var(--ks-border) 75%, transparent);
  background: var(--ks-bg);
}
.ks-themed .vv-cat-tile-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 18px 24px 10px;
  background: var(--ks-bg);
  transition: transform 180ms ease;
}
.ks-themed .vv-cat-tile-image:hover img {
  transform: scale(1.045);
}
.ks-themed .vv-cat-tile-body {
  position: relative;
  padding: 18px 16px;
  border-top: 1px solid var(--ks-border);
  background: var(--ks-surface);
  flex: 1;
}
.ks-themed .vv-cat-tile-title {
  padding-right: 14px;
  font-size: 15px;
  line-height: 1.35;
}
.ks-themed .vv-cat-tile-body::after {
  content: '→';
  position: absolute;
  right: 13px;
  top: 18px;
  color: var(--ks-primary);
  font-size: 15px;
}
.ks-themed .vv-cat-tile-body small {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
}
.ks-themed .vv-prod-row .vv-card {
  border-color: color-mix(in srgb, var(--ks-border) 75%, transparent);
  border-radius: var(--ks-radius-card);
}
.ks-themed .vv-prod-row .vv-card-media {
  aspect-ratio: 5 / 4;
  border-bottom: 0;
}
.ks-themed .vv-prod-row .vv-card-media img {
  padding: 24px;
}
.ks-themed .vv-prod-row .vv-card-body {
  padding: 16px 18px 18px;
}
.ks-themed .vv-prod-row .vv-card-title {
  min-height: 2.7em;
  line-height: 1.35;
}
.ks-themed .vv-prod-row .vv-card-brand {
  min-height: 18px;
  margin-bottom: 6px;
}
.ks-themed .vv-prod-row .vv-card-foot {
  padding-top: 18px;
  gap: 10px;
}
.ks-themed .vv-promo-grid {
  gap: 24px;
}
.ks-themed .vv-promo-card {
  min-height: 290px;
  align-items: center;
}
.ks-themed .vv-promo-body {
  padding: clamp(24px, 3vw, 40px);
  gap: 12px;
  max-width: 43ch;
}
.ks-themed .vv-promo-title {
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.12;
  text-wrap: balance;
}
.ks-themed .vv-promo-cta {
  align-self: flex-start;
  padding-block: 8px;
  text-underline-offset: 5px;
}
.ks-themed .vv-promo-surface.vv-promo-has-image {
  background: var(--ks-bg);
}
.ks-themed .vv-promo-surface.vv-promo-has-image::before {
  display: none;
}
.ks-themed .vv-promo-surface.vv-promo-has-image .vv-promo-image {
  inset: 0 0 0 auto;
  width: 44%;
  object-fit: contain;
  padding: 24px 16px 24px 0;
}
.ks-themed .vv-promo-surface.vv-promo-has-image .vv-promo-body {
  width: 60%;
  padding-right: 16px;
}
.ks-themed .vv-home-brands {
  padding-top: 40px;
  padding-bottom: 56px;
}
@media (max-width: 639px) {
  /* Keep the hydrated VAT switch, account and cart within the phone width. */
  .ks-themed .vv-header .vv-header-row {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
  }
  .ks-themed .vv-header .vv-header-actions {
    width: 100%;
    margin-left: 0;
    min-width: 0;
  }
  .ks-themed .vv-header .vv-price-display {
    margin-right: auto;
  }
  .ks-themed .vv-header .vv-header-actions .vv-action {
    width: 44px;
    height: var(--ks-tap-min);
    flex: none;
  }
  .ks-themed .vv-cat-tile-image img {
    aspect-ratio: 4 / 3;
    padding: 14px 18px 8px;
  }
  .ks-themed .vv-cat-tile-body {
    padding: 14px 12px;
  }
  .ks-themed .vv-cat-tile-title {
    font-size: 14px;
  }
  .ks-themed .vv-cat-tile-body::after {
    top: 14px;
    right: 10px;
  }
  .ks-themed .vv-promo-grid {
    gap: 16px;
  }
  .ks-themed .vv-promo-card {
    min-height: 250px;
  }
  .ks-themed .vv-promo-body {
    padding: 24px;
  }
  /* Picture above the text on a phone: side by side, the heading ran into the bottles
     (Rune, 2026-11-05). */
  .ks-themed .vv-promo-surface.vv-promo-has-image {
    flex-direction: column;
    align-items: stretch;
  }
  .ks-themed .vv-promo-surface.vv-promo-has-image .vv-promo-image {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: 150px;
    padding: 16px 16px 0;
  }
  .ks-themed .vv-promo-surface.vv-promo-has-image .vv-promo-body {
    width: auto;
    padding: 12px 18px 18px;
  }
  .ks-themed .vv-prod-row .vv-card-body {
    padding: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-themed .vv-cat-tile-image img,
  .ks-themed .vv-prod-row .vv-card-media img,
  .ks-themed .vv-promo-image {
    transition: none;
  }
  .ks-themed .vv-cat-tile-image:hover img,
  .ks-themed .vv-prod-row .vv-card:hover img,
  .ks-themed .vv-promo-card:hover .vv-promo-image {
    transform: none;
  }
}

/* ── Category header: count beside the title on phone, sub-category tiles (VI-KA-80) ── */
.ks-themed .vv-coll-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ks-themed .vv-coll-title-row h1 {
  min-width: 0;
}
.ks-themed .vv-catalog .vv-coll-count-head {
  display: none;
  flex: none;
  white-space: nowrap;
}
.ks-themed .vv-subcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.ks-themed .vv-subcat-tile {
  min-height: 0;
}
.ks-themed .vv-subcat-tile .vv-cat-tile-title {
  font-size: 14px;
}
.ks-themed .vv-subcat-tile-product img {
  object-fit: contain;
  padding: 10px;
  background: var(--ks-bg);
}
.ks-themed .vv-subcat-tile .vv-cat-tile-icon .vv-icon {
  width: 32px;
  height: 32px;
}
@media (max-width: 639px) {
  .ks-themed .vv-catalog .vv-coll-count-head {
    display: inline;
  }
  .ks-themed .vv-catalog:has(.vv-coll-count-head) .vv-coll-count-bar {
    display: none;
  }
  /* One swipeable row, so a parent with ten children doesn't push the products off screen. */
  .ks-themed .vv-subcat-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 136px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-right: calc(-1 * var(--vv-gutter));
    padding-right: var(--vv-gutter);
    padding-bottom: 4px;
  }
  .ks-themed .vv-subcat-grid > li {
    scroll-snap-align: start;
  }
}

/* ── Articles on product and category pages (VI-KA-107) ── */
.ks-themed .vv-articles {
  padding: 8px 0 48px;
}
.ks-themed .vv-article-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-themed .vv-article-card a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding-bottom: 12px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ks-border);
}
.ks-themed .vv-article-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ks-radius-card);
}
.ks-themed .vv-article-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}
.ks-themed .vv-article-card a:hover h3 {
  text-decoration: underline;
}
.ks-themed .vv-article-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ks-text-muted);
}
.ks-themed .vv-article-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-primary);
}
.ks-themed .vv-article-date {
  font-size: 13px;
  color: var(--ks-text-muted);
}

/* VI-KA-77: variant choices on a product card. Small, one line on a phone
   (scrolls sideways rather than wrapping), a greyed sold-out size, colour dots. */
.ks-themed .vv-card-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.ks-themed .vv-card-choice {
  min-width: 34px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.ks-themed .vv-card-choice:hover {
  border-color: var(--ks-primary);
}
.ks-themed .vv-card-choice.sel {
  border-color: var(--ks-primary);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .vv-card-choice-out,
.ks-themed .vv-card-choice:disabled {
  color: var(--ks-text-muted);
  background: var(--ks-surface);
  text-decoration: line-through;
}
.ks-themed .vv-card-choice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* VI-KA-143: a business-only size is a lock, never a sold-out strike-through
   (same look as the product page's locked option). */
.ks-themed .vv-card-choice-locked:disabled {
  text-decoration: none;
  opacity: 1;
  color: var(--ks-b2b);
  border-style: dashed;
  border-color: var(--ks-b2b);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ks-themed .vv-card-choice-locked .vv-lock {
  width: 12px;
  height: 12px;
  flex: none;
}
.ks-themed .vv-card-choice-out.sel {
  background: var(--ks-surface);
  color: var(--ks-text-muted);
}
.ks-themed .vv-card-choice-dot {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--vv-choice-color, var(--ks-surface));
  text-decoration: none;
}
.ks-themed .vv-card-choice-dot.sel {
  background: var(--vv-choice-color, var(--ks-surface));
  box-shadow: 0 0 0 2px var(--ks-bg), 0 0 0 3.5px var(--ks-primary);
}
.ks-themed .vv-card-choice-dot.vv-card-choice-out {
  opacity: 0.45;
}
.ks-themed .vv-card-choice-select {
  max-width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
  color: var(--ks-text);
  font: inherit;
  font-size: var(--ks-control-font-size);
}
.ks-themed .vv-card-choices.ks-needs-selection {
  outline: 2px solid var(--ks-danger-strong);
  outline-offset: 3px;
  border-radius: var(--ks-radius-control);
}
/* The bridge swaps the «Velg variant» link and the add button with `hidden`;
   the action's own display must not outrank it. */
.ks-themed .vv-card-foot [hidden] {
  display: none;
}
/* The stock chip follows the chosen size (`data-ks-state` set by the bridge). */
.ks-themed .vv-card-media .vv-stock[data-ks-state="out"]::before {
  background: var(--ks-danger);
}
.ks-themed .vv-card-media .vv-stock[data-ks-state="backorder"]::before {
  background: var(--ks-info);
}
.ks-themed .vv-card-media .vv-stock[data-ks-state="in"]::before {
  background: var(--ks-success);
}
@media (max-width: 639px) {
  .ks-themed .vv-card-choices {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .ks-themed .vv-card-choices::-webkit-scrollbar {
    display: none;
  }
  .ks-themed .vv-card-choice {
    flex: none;
  }
}

/* ── Category index (/categories): root tiles with their sub-categories ── */
.ks-themed .vv-cat-index {
  padding-top: 4px;
  padding-bottom: 48px;
}
.ks-themed .vv-cat-index .vv-coll-head {
  margin-bottom: 22px;
}
.ks-themed .vv-cat-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ks-themed .vv-cat-index-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ks-themed .vv-cat-index-item .vv-cat-tile {
  height: auto;
  min-height: 0;
}
.ks-themed .vv-cat-index-item .vv-cat-tile-body {
  flex: 0 0 auto;
}
.ks-themed .vv-cat-index-item .vv-cat-tile-icon {
  aspect-ratio: 16 / 9;
}
.ks-themed .vv-cat-index-item .vv-cat-tile img {
  aspect-ratio: 16 / 9;
}
.ks-themed .vv-cat-index-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 6px;
  list-style: none;
}
.ks-themed .vv-cat-index-children a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ks-text);
  text-decoration: none;
}
.ks-themed .vv-cat-index-children a:hover {
  color: var(--ks-primary);
  text-decoration: underline;
}
.ks-themed .vv-cat-index-children small {
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-cat-index-children .vv-cat-index-more {
  margin-top: 2px;
  font-weight: 500;
  color: var(--ks-primary);
}
@media (max-width: 639px) {
  .ks-themed .vv-cat-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

/* The sort row scrolls sideways on a narrow screen instead of widening the page. */
.ks-themed .vv-search-page-box {
  position: relative;
  max-width: 560px;
  margin: 14px 0 0;
}
.ks-themed .vv-search-page-box .vv-search-form {
  margin: 0;
}

/* Simple checkout chrome (checkout.simple). */
.ks-themed .vv-co-head {
  background: var(--ks-bg);
  border-bottom: 1px solid var(--ks-border);
}
.ks-themed .vv-co-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}
.ks-themed .vv-co-back,
.ks-themed .vv-co-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ks-text-muted);
  text-decoration: none;
}
.ks-themed .vv-co-back {
  min-height: var(--ks-tap-min);
  min-width: var(--ks-tap-min);
}
.ks-themed .vv-co-back:hover {
  color: var(--ks-primary);
}
.ks-themed .vv-co-secure {
  justify-self: end;
}
.ks-themed .vv-co-foot {
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  font-size: 13px;
}
.ks-themed .vv-co-foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.ks-themed .vv-co-foot a {
  color: inherit;
  opacity: 0.85;
}
.ks-themed .vv-co-foot a:hover {
  opacity: 1;
}
@media (max-width: 639px) {
  .ks-themed .vv-co-head-row {
    min-height: 60px;
  }
  .ks-themed .vv-co-back span,
  .ks-themed .vv-co-secure span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .ks-themed .vv-co-head .vv-logo {
    height: 30px;
  }

  /* One header row on a phone: account lives in the menu drawer, the VAT
     switch shows only the active side, the logo is a little smaller. */
  .ks-themed .vv-header .vv-header-row {
    flex-wrap: nowrap;
  }
  .ks-themed .vv-header .vv-header-actions {
    width: auto;
    margin-left: auto;
  }
  .ks-themed .vv-header .vv-price-display {
    margin-right: 0;
  }
  .ks-themed .vv-header .vv-header-actions .vv-action[href="/account"] {
    display: none;
  }
  .ks-themed .vv-header .vv-logo {
    height: 30px;
  }
  .ks-themed .vv-header .vv-price-display {
    flex: none;
  }
  .ks-themed .vv-header .vv-brand {
    min-width: 0;
  }
  .ks-themed .vv-price-display [data-ks-price-display-state] {
    gap: 6px;
    padding: 4px;
  }
  .ks-themed .vv-price-display [data-ks-price-display-state="incl"] > span:first-child,
  .ks-themed .vv-price-display [data-ks-price-display-state="excl"] > span:last-child {
    display: none;
  }
}
@media (max-width: 379px) {
  .ks-themed .vv-header .vv-wrap.vv-header-row {
    padding-left: 12px;
    padding-right: 12px;
    column-gap: 6px;
  }
  .ks-themed .vv-header .vv-logo {
    height: 26px;
  }
}
/* VI-KA-145 / VI-KA-180: «Leverer til» with the location picker sits on its own thin bar
   under the logo row, so it never shares a row with the VAT switch and the cart. The bar
   is not drawn while the platform has mounted nothing in it. */
.ks-themed .vv-delivery-bar {
  border-top: 1px solid var(--ks-border);
  background: var(--ks-surface);
}
.ks-themed .vv-delivery-bar:not(:has([data-ks-delivery-location]:not(:empty))) {
  display: none;
}
.ks-themed .vv-wrap.vv-delivery-bar-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--ks-control-height-sm);
  padding-top: var(--ks-space-1);
  padding-bottom: var(--ks-space-1);
}
.ks-themed .vv-delivery-location {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 899px) {
  .ks-themed .vv-wrap.vv-delivery-bar-row {
    justify-content: flex-start;
  }
}

/* VI-KA-163: the island's buy box looks exactly like the theme's server buy box, so
   nothing changes when JavaScript takes over. The platform's button and stepper sit one
   level inside [data-ks-part="add-to-cart"] / [data-ks-part="quantity"]; size them here
   to .vv-add-btn and .vv-qty (46px, 6px radius, the cart icon). */
.ks-themed .vv-purchase [data-ks-part="add-to-cart"] > *,
.ks-themed .vv-configurator [data-ks-part="add-to-cart"] > * {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ks-themed .vv-purchase [data-ks-part="add-to-cart"] button,
.ks-themed .vv-configurator [data-ks-part="add-to-cart"] button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: var(--ks-control-height);
  padding: 0 20px;
  border-radius: var(--ks-radius-control);
  font: inherit;
  font-size: var(--ks-control-font-size);
  font-weight: 600;
}
.ks-themed .vv-purchase [data-ks-part="add-to-cart"] button:not(:disabled)::before,
.ks-themed .vv-configurator [data-ks-part="add-to-cart"] button:not(:disabled)::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 8H7'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 8H7'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ks-themed .vv-purchase [data-ks-part="quantity"] [role="group"],
.ks-themed .vv-configurator [data-ks-part="quantity"] [role="group"] {
  height: var(--ks-control-height);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
}
.ks-themed .vv-purchase [data-ks-part="quantity"] [role="group"] button,
.ks-themed .vv-configurator [data-ks-part="quantity"] [role="group"] button {
  width: var(--ks-tap-min, 44px);
  height: var(--ks-control-height);
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ks-themed .vv-purchase [data-ks-part="quantity"] [role="group"] input,
.ks-themed .vv-configurator [data-ks-part="quantity"] [role="group"] input {
  width: 32px;
  height: var(--ks-control-height);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-size: var(--ks-control-font-size);
}

/* K-SHOP-4279: the theme's own buy box, enhanced by the purchase island. */
.ks-themed .vv-pdp-was-row:has(> [data-ks-bind]:not([hidden])) {
  margin: 0 0 2px;
  font-size: 14px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-pdp-was-row:not(:has(> [data-ks-bind]:not([hidden]))) {
  display: none;
}
.ks-themed .vv-pdp-sale-label {
  margin-left: 6px;
  font-weight: 600;
  color: var(--ks-primary);
}
.ks-themed .vv-purchase-options:empty,
.ks-themed .vv-volume-tiers:empty,
.ks-themed .vv-stock-alert:empty {
  display: none;
}
.ks-themed .vv-purchase-options,
.ks-themed .vv-volume-tiers,
.ks-themed .vv-stock-alert {
  margin-top: 12px;
}
.ks-themed .vv-add-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ks-danger-strong);
}
/* The live check found it sold out after the page was rendered. */
.ks-themed .vv-purchase[data-ks-sold-out] .vv-buy-row [data-ks-add-to-cart] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ks-themed .vv-purchase[data-ks-busy] [data-ks-add-to-cart] {
  opacity: 0.7;
}
/* K-SHOP-4279: a size the visitor may not buy here (business only, an assortment,
   price on request) shows the platform's notice instead of the buy row. */
.ks-themed .vv-configurator[data-ks-state="b2b-locked"] .vv-buy-row,
.ks-themed .vv-configurator[data-ks-state="assortment-locked"] .vv-buy-row,
.ks-themed .vv-configurator[data-ks-state="price-on-request"] .vv-buy-row {
  display: none;
}
.ks-themed .vv-purchase-notice:empty {
  display: none;
}
/* VI-KA-84: on a business-only size «Pris for bedriftskunder» is the notice's own
   title, so the price slot stands aside instead of saying it twice. */
.ks-themed .vv-configurator[data-ks-state="b2b-locked"] [data-ks-part="price-stock"] {
  display: none;
}
/* The notice's badge and title share a line, so the notice adds less height
   than before over the price and buy row it replaces. */
.ks-themed [data-ks-part="b2b-only"]:has(> [data-ks-part="b2b-only-badge"] + [data-ks-part="b2b-only-price"]) {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
}
.ks-themed [data-ks-part="b2b-only"]:has(> [data-ks-part="b2b-only-badge"]) > :not([data-ks-part="b2b-only-badge"], [data-ks-part="b2b-only-price"]) {
  grid-column: 1 / -1;
}
.ks-themed .vv-purchase-notice {
  margin-top: 12px;
}
.ks-themed .vv-configurator .vv-opt-value[data-ks-unavailable] {
  opacity: 0.45;
  text-decoration: line-through;
}
/* K-SHOP-4279: the package summary rows show only while the island has figures for them. */
.ks-themed .vv-bundle-row:not(:has([data-ks-bind]:not([hidden]))) {
  display: none;
}
.ks-themed .vv-bundle-upgrade:empty {
  display: none;
}
.ks-themed [data-ks-part="bundle-option"][hidden] {
  display: none;
}


/* ── Touch targets (VI-KA-178 / VI-KA-180) ──────────────────
   Every interactive element is at least --ks-tap-min (44px) tall and wide on a
   phone or any coarse pointer. Small visuals keep their look; the hit area is
   what grows. Wide screens with a mouse keep the compact desktop sizes. */
@media (max-width: 899px), (pointer: coarse) {
  .ks-themed .vv-price-switch {
    min-height: var(--ks-tap-min);
  }
  .ks-themed .vv-chip.vv-chip,
  .ks-themed .vv-pager-btn.vv-pager-btn,
  .ks-themed .vv-sort select {
    height: auto;
    min-height: var(--ks-tap-min);
  }
  .ks-themed .vv-cat-link {
    align-items: center;
    min-height: var(--ks-tap-min);
  }
  .ks-themed .vv-facet > summary,
  .ks-themed .vv-side-block > summary {
    min-height: var(--ks-tap-min);
  }
  .ks-themed .vv-facet-value {
    min-height: var(--ks-tap-min);
  }
  /* The box is drawn at 16px on a desktop; on a phone it is a 22px box inside a 44px row. */
  .ks-themed .vv-facet-check {
    width: 22px;
    height: 22px;
  }
  .ks-themed .vv-side-clear {
    display: inline-flex;
    align-items: center;
    min-height: var(--ks-tap-min);
  }
  .ks-themed .vv-card-choice {
    min-width: var(--ks-tap-min);
    min-height: var(--ks-tap-min);
  }
  .ks-themed .vv-card-choice-select {
    min-height: var(--ks-tap-min);
  }
  /* A colour dot: the button is the 44px hit area, the dot is drawn inside it. */
  .ks-themed .vv-card-choice-dot {
    position: relative;
    width: var(--ks-tap-min);
    min-width: var(--ks-tap-min);
    height: var(--ks-tap-min);
    min-height: var(--ks-tap-min);
    border: 0;
    background: transparent;
  }
  .ks-themed .vv-card-choice-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--ks-border);
    border-radius: 50%;
    background: var(--vv-choice-color, var(--ks-surface));
  }
  .ks-themed .vv-card-choice-dot.sel {
    background: transparent;
    box-shadow: none;
  }
  .ks-themed .vv-card-choice-dot.sel::before {
    box-shadow: 0 0 0 2px var(--ks-bg), 0 0 0 3.5px var(--ks-primary);
  }
  .ks-themed .vv-gallery-thumb,
  .ks-themed .vv-pdp [data-ks-part="gallery-thumb"] {
    width: var(--ks-tap-min);
    height: var(--ks-tap-min);
    padding: 3px;
  }
  .ks-themed .vv-merke-letter,
  .ks-themed .vv-merke-letter-off {
    min-width: var(--ks-tap-min);
    height: var(--ks-tap-min);
  }
}

/* ── Header on a phone: compact, and «Leverer til» on its own bar ─── */
@media (max-width: 899px) {
  /* The info bar is a fixed 32px and the sticky header's top is pulled up by exactly that,
     so contact and free shipping scroll away and only the logo row (with the delivery bar
     under it) stays on screen. */
  .ks-themed {
    --vv-info-h: 32px;
  }
  .ks-themed .vv-info-bar {
    height: var(--vv-info-h);
    overflow: hidden;
  }
  .ks-themed .vv-wrap.vv-info-row {
    height: var(--vv-info-h);
    padding-top: 0;
    padding-bottom: 0;
  }
  .ks-themed .vv-header.vv-sticky:has(.vv-info-bar) {
    top: calc(-1 * var(--vv-info-h));
  }
  .ks-themed .vv-header .vv-wrap.vv-header-row {
    padding-top: var(--ks-space-2);
    padding-bottom: var(--ks-space-2);
    gap: var(--ks-space-2);
  }
  /* The picker button is 44px on a phone (tap size), so the row keeps a little room above
     and below it; with none, the button's border sat on the bar's own lines. */
  .ks-themed .vv-wrap.vv-delivery-bar-row {
    min-height: 32px;
    padding-top: var(--ks-space-1);
    padding-bottom: var(--ks-space-1);
  }
}

/* ── Product page on a phone: price and buy in the first screen ──── */
@media (max-width: 899px) {
  .ks-themed .vv-pdp {
    padding-top: var(--ks-space-2);
  }
  .ks-themed .vv-pdp-grid {
    gap: var(--ks-space-3);
  }
  /* The photo no longer takes a whole square screen; the packshot is fitted, not cropped. */
  .ks-themed .vv-gallery-frame {
    max-height: 40svh;
  }
  .ks-themed .vv-gallery-frame img {
    padding: var(--ks-space-3);
  }
  /* VI-KA-233: with the frame's height capped (40svh, and min(100vw, 40svh) under 600px) the
     grid row still sized itself to the square picture, so a 390px phone showed the top 266px of
     a 390px image. The picture fills the frame instead and is fitted inside it, never cut. */
  .ks-themed .vv-gallery-frame > img.vv-gallery-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .ks-themed .vv-gallery-thumbs,
  .ks-themed .vv-pdp [data-ks-part="gallery-thumbs"] {
    margin-top: var(--ks-space-2);
  }
  .ks-themed .vv-pdp-title {
    margin: 2px 0 var(--ks-space-1);
    font-size: clamp(20px, 5.4vw, 24px);
  }
  .ks-themed .vv-pdp-sku {
    margin-bottom: var(--ks-space-2);
  }
  .ks-themed .vv-pdp-info .vv-delivery {
    margin-bottom: var(--ks-space-2);
  }
}
/* VI-KA-180: the bar shows from the first screen (data-vv-early) as well as once the buy box
   has scrolled out above (data-ks-visible, the platform's). */
.ks-themed .vv-sticky-buy[data-vv-early] {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}
/* The in-page buy button is on screen: the bar steps aside, whatever the platform says. */
.ks-themed .vv-sticky-buy[data-vv-hidden] {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

/* ── Filter drawer on a phone (VI-KA-180) ───────────────────
   Without JavaScript, or wider than a phone, the filters stay the sidebar block they
   always were. The script in collection-catalog.liquid adds .vv-filters-js, shows the
   Filter button and opens the block as an off-canvas panel. */
.ks-themed .vv-filter-open,
.ks-themed .vv-filters-close,
.ks-themed .vv-filters-foot,
.ks-themed .vv-filters-backdrop {
  display: none;
}
@media (max-width: 899px) {
  .ks-themed .vv-coll-toolbar .vv-filter-open:not([hidden]) {
    display: inline-flex;
  }
  .ks-themed .vv-filters-js .vv-sidebar {
    position: static;
  }
  .ks-themed .vv-filters-js .vv-side-filters {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 71;
    width: min(92vw, 420px);
    padding: 0;
    border: 0;
    border-radius: var(--ks-radius-card) 0 0 var(--ks-radius-card);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 40px rgb(2 6 23 / 0.28);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .ks-themed .vv-filters-js .vv-side-filters[data-open] {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  .ks-themed .vv-filters-js .vv-side-filters > .vv-side-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--ks-space-2) var(--ks-space-2) var(--ks-space-2) var(--ks-space-4);
    border-bottom: 1px solid var(--ks-border);
    background: var(--ks-bg);
    cursor: default;
  }
  .ks-themed .vv-filters-js .vv-side-heading > span {
    margin-right: auto;
  }
  .ks-themed .vv-filters-js .vv-filters-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--ks-tap-min);
    height: var(--ks-tap-min);
    border: 0;
    border-radius: var(--ks-radius-control);
    background: transparent;
    color: var(--ks-text);
    cursor: pointer;
  }
  .ks-themed .vv-filters-js .vv-side-filters > .vv-facet {
    margin: 0 var(--ks-space-4);
  }
  .ks-themed .vv-filters-js .vv-filters-foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: var(--ks-space-3) var(--ks-space-4) calc(var(--ks-space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ks-border);
    background: var(--ks-bg);
  }
  .ks-themed .vv-filters-js .vv-filters-apply {
    width: 100%;
  }
  .ks-themed .vv-filters-js .vv-filters-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgb(2 6 23 / 0.5);
  }
  html.vv-filters-lock {
    overflow: hidden;
  }
  .ks-themed .vv-coll-toolbar .vv-filter-open {
    flex: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-themed .vv-filters-js .vv-side-filters,
  .ks-themed .vv-filters-js .vv-side-filters[data-open] {
    transition: none;
  }
}

/* Forsiden (4.11.2026): kategoriflisene og kampanjene er ikke Ragnar-rader og skal ikke holde
   plass på 480px; det ga et stort tomt felt under dem. */
.ks-themed .vv-cat-tiles,
.ks-themed .vv-promo {
  min-height: 0;
}

@keyframes vv-usp-glide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .ks-themed .vv-usps-band .vv-wrap {
    overflow-x: auto;
  }
  .ks-themed .vv-usps-track {
    animation: none;
  }
  .ks-themed .vv-usps-row.vv-usps-dup {
    display: none;
  }
}

/* Phone: category tiles are compact rows, a small picture beside the name, so all six fit in
   about one screen instead of three (Rune, 2026-11-05). Doubled classes out-rank the tile rules
   that come later in this file. */
@media (max-width: 639px) {
  .ks-themed .vv-cat-tile.vv-cat-tile {
    flex-direction: row;
    align-items: center;
    min-height: 68px;
  }
  .ks-themed .vv-cat-tile.vv-cat-tile img {
    flex: none;
    width: 60px;
    height: 60px;
    aspect-ratio: 1;
    padding: 6px;
  }
  .ks-themed .vv-cat-tile.vv-cat-tile .vv-cat-tile-icon {
    flex: none;
    width: 60px;
    aspect-ratio: 1;
  }
  .ks-themed .vv-cat-tile.vv-cat-tile .vv-cat-tile-body {
    padding: 8px 10px 8px 2px;
    border-top: 0;
    background: none;
  }
  .ks-themed .vv-cat-tile.vv-cat-tile .vv-cat-tile-title {
    padding-right: 0;
    font-size: 14px;
  }
  .ks-themed .vv-cat-tile.vv-cat-tile .vv-cat-tile-body small,
  .ks-themed .vv-cat-tile.vv-cat-tile .vv-cat-tile-body::after {
    display: none;
  }
}

/* ── Listing filters as on live vikingvask.no (K-SHOP-8050) ──────────────────────────
   One white card on the left with «Kategori» and «Merke» as radio lists, no counts, every
   group open; the sort is a dropdown with a direction toggle beside it. */
.ks-themed .vv-radio-group > summary {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ks-themed .vv-facet.vv-radio-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.ks-themed .vv-facet.vv-radio-group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ks-primary);
  border-bottom: 2px solid var(--ks-primary);
  transform: rotate(45deg);
  color: inherit;
}
.ks-themed .vv-facet.vv-radio-group[open] > summary::after {
  content: "";
  transform: rotate(-135deg);
}
.ks-themed .vv-side-block.vv-radio-group > summary::after {
  border-color: var(--ks-primary);
}
.ks-themed .vv-radio-group .vv-facet-values {
  margin-top: 10px;
  gap: 4px;
}
.ks-themed .vv-radio-group .vv-facet-value {
  gap: 12px;
  padding: 6px 4px;
}
.ks-themed .vv-radio-group .vv-facet-check {
  width: 20px;
  height: 20px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  background: var(--ks-bg);
}
.ks-themed .vv-radio-group .vv-facet-value.vv-active .vv-facet-check {
  border-color: var(--ks-primary);
  background: radial-gradient(circle, var(--ks-primary) 0 4px, var(--ks-bg) 5px);
}
.ks-themed .vv-sort-dir {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ks-text);
}
.ks-themed .vv-sort-dir .vv-icon {
  width: 24px;
  height: 24px;
}
@media (min-width: 900px) {
  .ks-themed .vv-sidebar {
    gap: 0;
    padding: 8px 24px;
    border: 1px solid var(--ks-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.06);
  }
  .ks-themed .vv-sidebar .vv-side-block {
    padding: 16px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .ks-themed .vv-sidebar .vv-side-block + .vv-side-block {
    border-top: 1px solid var(--ks-border);
  }
  .ks-themed .vv-sidebar .vv-side-filters > .vv-side-heading,
  .ks-themed .vv-sidebar .vv-filters-foot {
    display: none;
  }
}

/* ── CMS content blocks (VI-KA-132) ───────────────────────── */
/* Steps, callout, comparison table, contact box and logo row. The platform draws the
   markup and a zero-specificity default look; these rules are Vikingvask's own. Only
   --ks-* variables, no !important. Steps and callout carry Tailwind utilities from the
   platform, so every rule here starts at .ks-themed (two classes) to win over them. */

/* Steps. --vv-step-size is the number disc; the timeline line is placed from it. */
.ks-themed .ks-steps {
  --vv-step-size: var(--ks-space-6);
  margin-block: var(--ks-space-5);
}
.ks-themed .ks-steps__title {
  margin: 0 0 var(--ks-space-4);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ks-text);
}
.ks-themed .ks-steps__item {
  gap: var(--ks-space-4);
}
.ks-themed .ks-steps__number {
  width: var(--vv-step-size);
  height: var(--vv-step-size);
  font-size: 14px;
  font-weight: 700;
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .ks-steps__item-title {
  margin: 0;
  padding-top: var(--ks-space-1);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ks-text);
}
.ks-themed .ks-steps__body {
  margin-top: var(--ks-space-1);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ks-text);
}
.ks-themed .ks-steps__media {
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
}
/* numbered: each step is a tinted card with the disc beside it */
.ks-themed .ks-steps[data-variant="numbered"] .ks-steps__item {
  padding: var(--ks-space-4);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
}
/* timeline: one line down the middle of the discs, in the B2B blue border tone */
.ks-themed .ks-steps[data-variant="timeline"] .ks-steps__item > span[aria-hidden]:not(.ks-steps__number) {
  left: calc(var(--vv-step-size) / 2);
  top: var(--vv-step-size);
  background-color: var(--ks-b2b-border);
}
.ks-themed .ks-steps[data-variant="timeline"] .ks-steps__number {
  background: var(--ks-b2b);
  color: var(--ks-b2b-text);
}

/* Callout. Left bar in the variant colour, tinted box, bold title. */
.ks-themed .ks-callout {
  --vv-callout: var(--ks-primary);
  --vv-callout-bg: var(--ks-surface);
  --vv-callout-ink: var(--ks-primary);
  gap: var(--ks-space-3);
  margin-block: var(--ks-space-5);
  padding: var(--ks-space-4);
  border: 1px solid var(--ks-border);
  border-left: 4px solid var(--vv-callout);
  border-radius: var(--ks-radius-card);
  background: var(--vv-callout-bg);
  color: var(--ks-text);
}
.ks-themed .ks-callout[data-variant="warning"] {
  --vv-callout: var(--ks-warning);
  --vv-callout-bg: var(--ks-warning-subtle);
  --vv-callout-ink: var(--ks-warning-text);
}
.ks-themed .ks-callout[data-variant="info"] {
  --vv-callout: var(--ks-info);
  --vv-callout-bg: var(--ks-info-subtle);
  --vv-callout-ink: var(--ks-info-text);
}
.ks-themed .ks-callout[data-variant="success"] {
  --vv-callout: var(--ks-success);
  --vv-callout-bg: var(--ks-success-subtle);
  --vv-callout-ink: var(--ks-success-text);
}
.ks-themed .ks-callout__icon {
  color: var(--vv-callout-ink);
}
.ks-themed .ks-callout__content {
  min-width: 0;
}
.ks-themed .ks-callout__title {
  margin: 0 0 var(--ks-space-1);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--vv-callout-ink);
}
.ks-themed .ks-callout__body {
  font-size: 15px;
  line-height: 1.6;
}

/* Comparison table. The wrapper scrolls sideways; the page never does. */
.ks-themed .ks-compare {
  margin-block: var(--ks-space-5);
  color: var(--ks-text);
}
.ks-themed .ks-compare__scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  overscroll-behavior-x: contain;
}
.ks-themed .ks-compare__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.ks-themed .ks-compare__title {
  padding: var(--ks-space-3) var(--ks-space-4);
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: var(--ks-text);
}
.ks-themed .ks-compare__corner,
.ks-themed .ks-compare__col,
.ks-themed .ks-compare__label,
.ks-themed .ks-compare__cell {
  padding: var(--ks-space-3) var(--ks-space-4);
  text-align: left;
  vertical-align: top;
}
.ks-themed .ks-compare__col {
  font-weight: 700;
  background: var(--ks-surface);
  border-bottom: 2px solid var(--ks-primary);
}
.ks-themed .ks-compare__label {
  min-width: 120px;
  font-weight: 700;
  color: var(--ks-text);
}
.ks-themed .ks-compare__table tbody tr {
  border-bottom: 1px solid var(--ks-border);
}
.ks-themed .ks-compare__table tbody tr:last-child {
  border-bottom: 0;
}
.ks-themed .ks-compare[data-variant="striped"] .ks-compare__table tbody tr {
  border-bottom: 0;
}
.ks-themed .ks-compare[data-variant="striped"] .ks-compare__table tbody tr:nth-child(even) {
  background: var(--ks-surface);
}
.ks-themed .ks-compare__col[data-highlight="true"] {
  background: var(--ks-b2b);
  color: var(--ks-b2b-text);
  border-bottom-color: var(--ks-b2b);
}
.ks-themed .ks-compare__cell[data-highlight="true"] {
  background: var(--ks-b2b-subtle);
  box-shadow: inset 1px 0 0 var(--ks-b2b-border), inset -1px 0 0 var(--ks-b2b-border);
}
.ks-themed .ks-compare__product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ks-space-2);
}
.ks-themed .ks-compare__product-link {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-2);
  color: inherit;
  text-decoration: none;
}
.ks-themed .ks-compare__product-link:hover .ks-compare__product-name {
  text-decoration: underline;
}
.ks-themed .ks-compare__product-image {
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--ks-space-1);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-white);
}
.ks-themed .ks-compare__product-name {
  font-weight: 700;
}
.ks-themed .ks-compare__heading,
.ks-themed .ks-compare__heading-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed .ks-compare__col[data-highlight="true"] .ks-compare__heading,
.ks-themed .ks-compare__col[data-highlight="true"] .ks-compare__heading-text {
  color: inherit;
}
.ks-themed .ks-compare__price {
  font-size: 16px;
  font-weight: 700;
}

/* Contact box. Card: tinted box with the photo beside the text. Banner: navy band. */
.ks-themed .ks-contact {
  display: flex;
  align-items: center;
  gap: var(--ks-space-4);
  margin-block: var(--ks-space-5);
  padding: var(--ks-space-4);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface);
  color: var(--ks-text);
}
.ks-themed .ks-contact[data-variant="banner"] {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--ks-space-5);
  border-color: var(--ks-primary);
  background: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .ks-contact__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid var(--ks-white);
  border-radius: var(--ks-radius-pill);
  object-fit: cover;
}
.ks-themed .ks-contact__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ks-space-1);
  min-width: 0;
}
.ks-themed .ks-contact[data-variant="banner"] .ks-contact__body {
  flex-direction: column;
  gap: var(--ks-space-2);
}
.ks-themed .ks-contact__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.ks-themed .ks-contact__role {
  margin: 0;
  font-size: 14px;
  color: var(--ks-text-muted);
}
.ks-themed .ks-contact[data-variant="banner"] .ks-contact__role {
  color: inherit;
  opacity: 0.85;
}
.ks-themed .ks-contact__phone,
.ks-themed .ks-contact__email {
  display: inline-flex;
  align-items: center;
  min-height: var(--ks-tap-min);
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.ks-themed .ks-contact__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ks-control-height);
  margin-top: var(--ks-space-2);
  padding-inline: var(--ks-space-5);
  border-radius: var(--ks-cta-radius);
  background: var(--ks-cta-bg);
  color: var(--ks-cta-fg);
  font-weight: var(--ks-cta-weight);
  text-decoration: none;
}
.ks-themed .ks-contact__button:hover {
  background: var(--ks-cta-hover-bg);
}
.ks-themed .ks-contact[data-variant="banner"] .ks-contact__button {
  background: var(--ks-white);
  color: var(--ks-primary);
}
.ks-themed .ks-contact[data-variant="banner"] .ks-contact__button:hover {
  background: var(--ks-b2b-subtle);
}
@media (max-width: 639px) {
  .ks-themed .ks-contact:not([data-variant="banner"]) {
    align-items: flex-start;
  }
  .ks-themed .ks-contact__button {
    width: 100%;
  }
}
@media (min-width: 640px) {
  .ks-themed .ks-contact[data-variant="banner"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ks-space-4) var(--ks-space-6);
  }
  .ks-themed .ks-contact[data-variant="banner"] .ks-contact__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-space-2) var(--ks-space-5);
  }
  .ks-themed .ks-contact[data-variant="banner"] .ks-contact__button {
    margin-top: 0;
  }
}

/* Logo row. Row: logos in a wrapping line. Grid: bordered tiles that wrap. */
.ks-themed .ks-logos {
  margin-block: var(--ks-space-5);
}
.ks-themed .ks-logos__title {
  margin: 0 0 var(--ks-space-4);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ks-text);
}
.ks-themed .ks-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ks-space-5) var(--ks-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ks-themed .ks-logos[data-variant="grid"] .ks-logos__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--ks-space-3);
}
.ks-themed .ks-logos[data-variant="grid"] .ks-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--ks-space-4);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-white);
}
.ks-themed .ks-logos__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ks-tap-min);
  border-radius: var(--ks-radius-control);
}
.ks-themed .ks-logos__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}
.ks-themed .ks-logos[data-grayscale="true"] .ks-logos__image {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.ks-themed .ks-logos[data-grayscale="true"] .ks-logos__item:hover .ks-logos__image,
.ks-themed .ks-logos[data-grayscale="true"] .ks-logos__link:focus-visible .ks-logos__image {
  filter: none;
  opacity: 1;
}
@media (min-width: 640px) {
  .ks-themed .ks-logos[data-variant="grid"] .ks-logos__list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-themed .ks-logos[data-grayscale="true"] .ks-logos__image {
    transition: none;
  }
}

/* Contact box in the theme section (VI-KA-132): heading and intro text above the name. */
.ks-themed .vv-contact-wrap {
  padding-bottom: var(--ks-space-6);
}
.ks-themed .ks-contact__heading {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: inherit;
}
.ks-themed .ks-contact__text {
  margin: 0 0 var(--ks-space-1);
  font-size: 15px;
  line-height: 1.5;
}
@media (min-width: 640px) {
  .ks-themed .ks-contact[data-variant="banner"] .ks-contact__heading,
  .ks-themed .ks-contact[data-variant="banner"] .ks-contact__text {
    flex-basis: 100%;
  }
}

/* Tone (VI-KA-132). The platform puts data-tone="light|dark|brand" on the root of the hero,
   fact box, quote, testimonials, FAQ and product-grid blocks and draws the panel itself
   (storefront-content-blocks.css: background, text, links, buttons and borders follow the tone).
   The theme only picks the colours: light = tinted panel, dark = the footer's deep navy,
   brand = the primary navy, with the card radius. */
.ks-themed .vv-page-body {
  --ks-tone-light-bg: var(--ks-surface);
  --ks-tone-light-fg: var(--ks-text);
  --ks-tone-dark-bg: var(--ks-footer-bg);
  --ks-tone-dark-fg: var(--ks-white);
  --ks-tone-brand-bg: var(--ks-primary);
  --ks-tone-brand-fg: var(--ks-primary-text);
  --ks-tone-padding: var(--ks-space-5);
}
.ks-themed .vv-page-body [data-tone] {
  border-radius: var(--ks-radius-card);
}

/* Article body (VI-KA-132): reading column plus a sticky product column.
   Without products it is one centred column; on phones the products follow the body. */
.ks-themed .vv-article-layout {
  display: block;
}
.ks-themed .vv-article-aside {
  padding-bottom: var(--ks-space-6);
}
.ks-themed .vv-article-aside-title {
  margin: 0 0 var(--ks-space-3);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}
.ks-themed .vv-article-aside-list {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px) {
  .ks-themed .vv-article-layout-has-aside {
    display: grid;
    grid-template-columns: minmax(0, 72ch) minmax(280px, 340px);
    justify-content: center;
    gap: var(--ks-space-6);
    align-items: start;
  }
  .ks-themed .vv-article-layout-has-aside .vv-page-body-article {
    margin-inline: 0;
  }
  .ks-themed .vv-article-aside {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    padding-top: var(--ks-space-4);
  }
}

/* Compact product card in the aside: small photo beside the text. */
.ks-themed .vv-article-aside .vv-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: stretch;
}
.ks-themed .vv-article-aside .vv-card-media {
  aspect-ratio: auto;
  min-height: 78px;
  border-bottom: 0;
  border-right: 1px solid var(--ks-border);
}
.ks-themed .vv-article-aside .vv-card-media .vv-stock,
.ks-themed .vv-article-aside .vv-card-media .vv-badge,
.ks-themed .vv-article-aside .vv-card-media .vv-b2b-badge {
  display: none;
}
.ks-themed .vv-article-aside .vv-card-body {
  padding: var(--ks-space-2) var(--ks-space-3);
}
.ks-themed .vv-article-aside .vv-card-title {
  font-size: 14px;
}
.ks-themed .vv-article-aside .vv-card-foot {
  padding-top: var(--ks-space-2);
}

/* Vikingvask theme — Liquid port of the bespoke React chrome
   (vikingvask-header.tsx / DefaultFooter branded variant / VIKINGVASK_CLASSES).
   All selectors are scoped under .ks-themed so themed chrome never restyles
   platform components (cart drawer, banners, CMS/React page body).
   Identity comes from --ks-* custom properties set by layout/theme.liquid. */

.ks-themed {
  box-sizing: border-box;
  --ks-container: 1480px;
}
.ks-themed *,
.ks-themed *::before,
.ks-themed *::after {
  box-sizing: border-box;
}
.ks-themed {
  background: var(--ks-bg);
  color: var(--ks-text);
  font-family: var(
    --ks-font-body,
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ks-themed img {
  max-width: 100%;
  display: block;
}
.ks-themed a {
  text-decoration: none;
}
.ks-themed a:where(:not(.btn):not(.ksd-btn)) {
  color: inherit;
}
.ks-themed h1,
.ks-themed h2,
.ks-themed h3,
.ks-themed h4 {
  font-family: var(--ks-font-heading, var(--ks-font-body, inherit));
  line-height: 1.2;
  margin: 0;
}
.ks-themed button {
  font: inherit;
  cursor: pointer;
}

/* Page side space: 24px, 10px on a phone (Rune, 2026-11-05). */
.ks-themed {
  --vv-gutter: 24px;
}
@media (max-width: 639px) {
  .ks-themed {
    --vv-gutter: 10px;
  }
}
.ks-themed .vv-wrap {
  max-width: var(--ks-container, 1480px);
  margin: 0 auto;
  padding: 0 var(--vv-gutter);
}

/* ── Announcement (optional promo strip) ──────────────── */
.ks-themed .vv-announcement {
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  font-size: 12.5px;
}
.ks-themed .vv-announcement .vv-wrap {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
}
.ks-themed .vv-announcement a:hover {
  text-decoration: underline;
}

/* ── Header shell ─────────────────────────────────────── */
.ks-themed .vv-header {
  background: color-mix(in srgb, var(--ks-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--ks-border);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.03);
  z-index: 40;
  overflow: visible;
}
.ks-themed .vv-header.vv-sticky {
  position: sticky;
  top: 0;
  overflow: visible;
}

/* The platform wraps each section in a .ks-section box. A sticky header inside its own
   93px wrapper could never stick; without the wrapper's box it sticks to the page. */
.ks-themed [data-ks-theme-chrome] > .ks-section[data-section-type="header"] {
  display: contents;
}

/* Info bar — contact + opening hours + free-shipping highlight */
.ks-themed .vv-info-bar {
  background: var(--ks-surface);
  border-bottom: 1px solid var(--ks-border);
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-wrap.vv-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.ks-themed .vv-info-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ks-themed .vv-info-contact a:hover {
  color: var(--ks-text);
}
.ks-themed .vv-info-divider {
  width: 1px;
  height: 12px;
  background: var(--ks-border);
}
.ks-themed .vv-info-highlight {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--ks-text);
  white-space: nowrap;
}

/* Primary row — logo · search · actions */
.ks-themed .vv-wrap.vv-header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.ks-themed .vv-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ks-themed .vv-logo {
  height: 36px;
  width: auto;
}
.ks-themed .vv-wordmark {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.ks-themed .vv-search {
  position: relative;
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
}
.ks-themed .vv-search form,
.ks-themed .vv-search [data-storefront-search] {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.ks-themed .vv-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ks-text-muted);
  pointer-events: none;
}
.ks-themed .vv-search input,
.ks-themed .vv-search [data-storefront-search] input {
  width: 100%;
  height: var(--ks-control-height);
  background: var(--ks-bg);
  color: var(--ks-text);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  padding: 0 16px 0 40px;
  font: inherit;
  font-size: var(--ks-control-font-size);
  outline: none;
}
.ks-themed .vv-search input::placeholder,
.ks-themed .vv-search [data-storefront-search] input::placeholder {
  color: var(--ks-text-muted);
}
.ks-themed .vv-search input:focus,
.ks-themed .vv-search [data-storefront-search] input:focus {
  border-color: var(--ks-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-primary) 12%, transparent);
}
.ks-themed .vv-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ks-themed .vv-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ks-tap-min);
  height: var(--ks-tap-min);
  border-radius: var(--ks-radius-control);
  border: 0;
  background: transparent;
  color: var(--ks-text-muted);
}
.ks-themed .vv-action:hover {
  background: var(--ks-surface);
  color: var(--ks-text);
}
.ks-themed .vv-price-display {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.ks-themed .vv-price-display:empty {
  display: none;
}
/* VI-KA-163: the incl./ekskl. mva switch, drawn by the theme (was the platform's button). */
.ks-themed .vv-price-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ks-tap-min, 44px);
  padding: 6px 8px;
  border: 0;
  border-radius: var(--ks-radius-control);
  background: none;
  color: var(--ks-text);
  font: inherit;
  cursor: pointer;
}
.ks-themed .vv-price-switch:hover {
  background: var(--ks-bg);
}
.ks-themed .vv-price-switch[aria-busy="true"] {
  opacity: 0.6;
}
.ks-themed .vv-price-switch-label {
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-price-switch[aria-checked="false"] .vv-price-switch-excl,
.ks-themed .vv-price-switch[aria-checked="true"] .vv-price-switch-incl {
  font-weight: 600;
  color: var(--ks-text);
}
.ks-themed .vv-price-switch-track {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  width: 36px;
  height: 20px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-border);
  transition: background 0.15s;
}
.ks-themed .vv-price-switch[aria-checked="true"] .vv-price-switch-track {
  background: var(--ks-primary);
}
.ks-themed .vv-price-switch-knob {
  width: 14px;
  height: 14px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transform: translateX(4px);
  transition: transform 0.15s;
}
.ks-themed .vv-price-switch[aria-checked="true"] .vv-price-switch-knob {
  transform: translateX(18px);
}
.ks-themed .vv-icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.ks-themed .vv-cart-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  border-radius: var(--ks-radius-pill);
  /* A flex box centres the digit in the pill; line-height and padding alone left it off-centre. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Subnav — navy bar + Magento full-width mega menu (live vikingvask.no) */
.ks-themed .vv-subnav {
  background: var(--ks-primary);
  border-top: 1px solid var(--ks-primary-hover);
  color: var(--ks-primary-text);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.1);
  position: relative;
  z-index: 45;
  overflow: visible;
}
.ks-themed .vv-subnav-row {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: visible;
}
/* static so .vv-mega positions against .vv-subnav (full width) */
.ks-themed .vv-nav-item {
  position: static;
  flex: none;
}
.ks-themed .vv-subnav-row > .vv-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ks-white) 92%, transparent);
}
.ks-themed .vv-subnav-row > .vv-nav-item > a:hover,
.ks-themed .vv-nav-item:focus-within > a,
.ks-themed .vv-nav-item:hover > a {
  background: color-mix(in srgb, var(--ks-white) 8%, transparent);
  color: var(--ks-white);
  border-bottom-color: var(--ks-nav-underline);
}
.ks-themed .vv-subnav-row > .vv-nav-item > a.vv-active {
  color: var(--ks-white);
  border-bottom-color: color-mix(in srgb, var(--ks-white) 85%, transparent);
}
.ks-themed .vv-nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.75;
}
.ks-themed .vv-mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ks-white);
  color: var(--ks-text);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.18);
  z-index: 50;
}
.ks-themed .vv-nav-item:hover > .vv-mega,
.ks-themed .vv-nav-item:focus-within > .vv-mega {
  display: block;
}
.ks-themed .vv-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 32px;
  padding: 24px 0 32px;
}
.ks-themed .vv-mega-grid-flat {
  grid-template-columns: repeat(4, minmax(12rem, 1fr));
  justify-items: start;
}
.ks-themed .vv-mega-col {
  min-width: 0;
}
.ks-themed .vv-mega-heading {
  display: block;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ks-ink);
}
.ks-themed .vv-mega-heading:hover,
.ks-themed .vv-mega-heading.vv-active {
  text-decoration: underline;
}
.ks-themed .vv-mega-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}
.ks-themed .vv-mega-list a {
  display: block;
  padding: 3px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ks-ink-soft);
}
.ks-themed .vv-mega-list a:hover,
.ks-themed .vv-mega-list a.vv-active {
  text-decoration: underline;
  color: var(--ks-ink);
}
@media (max-width: 1024px) {
  .ks-themed .vv-mega-grid,
  .ks-themed .vv-mega-grid-flat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ks-themed .vv-mega-grid,
  .ks-themed .vv-mega-grid-flat {
    grid-template-columns: 1fr;
  }
}

/* ── Platform CMS pages (ADR-0094) ─────────────────────── */
/* CMS routes render in .ks-main with platform bg-surface (often white) while
   informational blocks use the theme surface (--ks-surface). The footer margin
   exposed that mismatch as a white band above the newsletter band. */
.ks-themed .ks-main[data-page-type='page'],
.ks-themed .ks-main[data-page-type='article'],
.ks-themed .ks-main[data-page-type='blog'],
.ks-themed .ks-main:has(.ks-page-blocks) {
  background: var(--ks-surface);
}
.ks-themed .ks-main:has([data-section-type='collection-main']),
.ks-themed .ks-main:has([data-section-type='product-main']) {
  background: var(--ks-bg);
}

/* ── Footer ──────────────────────────────────────────── */
.ks-themed .vv-footer {
  margin-top: 0;
  background: var(--ks-footer-bg);
  color: var(--ks-footer-text);
}
.ks-themed .vv-footer-band {
  background: var(--ks-primary);
  color: var(--ks-white);
  padding: 52px 0;
}
.ks-themed .vv-footer .vv-footer-band-inner { max-width: 1440px; }
.ks-themed .vv-newsletter-island,
.ks-themed .vv-footer-band-ssr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  text-align: left;
  align-items: center;
}
.ks-themed .vv-newsletter-island h2,
.ks-themed .vv-footer-band-title {
  grid-column: 1;
  margin: 0 !important;
  font-size: clamp(1.6rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em;
  color: var(--ks-white) !important;
}
.ks-themed .vv-newsletter-island > p,
.ks-themed .vv-footer-band-text {
  grid-column: 1;
  margin: 12px 0 0 !important;
  font-size: 15px;
  color: var(--ks-footer-text) !important;
  line-height: 1.6;
}
.ks-themed .vv-newsletter-island form,
.ks-themed .vv-footer-band-form-slot {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: none !important;
  margin: 0;
}
.ks-themed .vv-newsletter-island form > div { align-items: stretch; gap: 10px; }
.ks-themed .vv-newsletter-island form input[type='email'],
.ks-themed .vv-newsletter-island form button[type='submit'] {
  height: var(--ks-control-height) !important;
  min-height: var(--ks-control-height) !important;
  max-height: 52px !important;
  border-radius: var(--ks-radius-control);
  padding: 0 18px !important;
  box-sizing: border-box;
}
.ks-themed .vv-newsletter-island form input[type='email'] {
  background: var(--ks-white);
  border: 1px solid var(--ks-white);
  color: var(--ks-footer-bg);
}
.ks-themed .vv-newsletter-island form button[type='submit'] {
  background: var(--ks-footer-action-bg);
  color: var(--ks-footer-bg);
  border: 1px solid var(--ks-footer-action-bg);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.ks-themed .vv-newsletter-island form button[type='submit']:disabled { opacity: 0.65; }
.ks-themed .vv-newsletter-island form button[type='submit']:not(:disabled):hover { background: var(--ks-white); }
.ks-themed .vv-footer-band-form-slot { height: var(--ks-control-height); }
.ks-themed [data-ks-newsletter]:has(.vv-newsletter-island) .vv-footer-band-ssr { display: none; }
.ks-themed .vv-footer .vv-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1.3fr repeat(3, 1fr);
  gap: 32px;
  padding-top: 60px;
  padding-bottom: 56px;
}
.ks-themed .vv-footer-col { min-width: 0; }
.ks-themed .vv-footer-home { display: inline-flex; }
.ks-themed .vv-footer-logo { width: 180px; max-width: 100%; height: auto; max-height: 54px; filter: brightness(0) invert(1); }
.ks-themed .vv-footer .vv-wordmark { color: var(--ks-white); }
.ks-themed .vv-footer-tagline { color: var(--ks-footer-muted); font-size: 14px; max-width: 23ch; margin: 18px 0 0; line-height: 1.7; }
.ks-themed .vv-footer-main .vv-footer-heading { margin: 0 0 20px; font-size: 14px; font-weight: 700; color: var(--ks-white); }
.ks-themed .vv-footer-main ul { list-style: none; margin: 0; padding: 0; }
.ks-themed .vv-footer-main li { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--ks-footer-text); overflow-wrap: anywhere; }
.ks-themed .vv-footer-main li a { color: var(--ks-footer-text); text-decoration: none; }
.ks-themed .vv-footer-cookie-settings button { all: unset; cursor: pointer; color: inherit; font: inherit; }
.ks-themed .vv-footer-main li a:hover,
.ks-themed .vv-footer-cookie-settings button:hover { color: var(--ks-white); text-decoration: underline; text-underline-offset: 4px; }
.ks-themed .vv-footer a:focus-visible,
.ks-themed .vv-footer button:focus-visible,
.ks-themed .vv-footer input:focus-visible { outline: 2px solid var(--ks-footer-focus); outline-offset: 4px; }
.ks-themed .vv-footer-address span { display: block; }
.ks-themed .vv-footer .vv-footer-fine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 28px;
  border-top: 1px solid var(--ks-footer-line);
  color: var(--ks-footer-muted);
  font-size: 12px;
  line-height: 1.7;
}
.ks-themed .vv-footer-payments { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex-shrink: 0; }
.ks-themed .vv-pay-logo { display: block; height: 16px; width: auto; opacity: 0.9; }
.ks-themed .vv-pay-logo-vipps { height: 18px; }
.ks-themed .vv-pay-logo-mc { height: 20px; }
.ks-themed .vv-pay-logo-img { height: 20px; max-width: 88px; object-fit: contain; background: var(--ks-white); border-radius: calc(var(--ks-radius-control) / 2); padding: 2px 5px; box-sizing: content-box; }
.ks-themed .vv-pay-text { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: color-mix(in srgb, var(--ks-white) 85%, transparent); }
@media (max-width: 1100px) {
  .ks-themed .vv-footer .vv-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ks-themed .vv-footer-brand { grid-column: 1 / -1; }
  .ks-themed .vv-footer-tagline { max-width: none; margin-top: 12px; }
  .ks-themed .vv-newsletter-island, .ks-themed .vv-footer-band-ssr { column-gap: 32px; }
}
@media (max-width: 700px) {
  .ks-themed .vv-newsletter-island, .ks-themed .vv-footer-band-ssr { display: block; }
  .ks-themed .vv-newsletter-island form, .ks-themed .vv-footer-band-form-slot { margin-top: 24px; }
  .ks-themed .vv-footer .vv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 40px; padding-bottom: 32px; }
  .ks-themed .vv-footer .vv-footer-fine { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 24px; padding-bottom: 28px; }
  .ks-themed .vv-footer-payments { gap: 12px; }
  .ks-themed .vv-footer-contact-col { grid-column: 1 / -1; }
  .ks-themed .vv-footer-payments .vv-pay-logo { max-width: 78px; height: 15px; }
  .ks-themed .vv-footer-main .vv-footer-heading { margin-bottom: 14px; }
}
@media (max-width: 380px) {
  .ks-themed .vv-newsletter-island form > div { flex-direction: column; }
  .ks-themed .vv-newsletter-island form input[type='email'] { width: 100%; flex: auto; }
  .ks-themed .vv-footer-band-form-slot { height: 114px; }
  .ks-themed .vv-footer-payments { gap: 12px; }
  .ks-themed .vv-footer-payments .vv-pay-logo { max-width: 70px; height: 12px; }
  .ks-themed .vv-footer-payments { gap: 10px; }
  .ks-themed .vv-footer-main li { font-size: 13px; }
}

/* ── Collection page (ADR-0094 P4) ────────────────────── */
.ks-themed .vv-collection {
  padding-top: 20px;
  padding-bottom: 64px;
}

/* Breadcrumbs */
.ks-themed .vv-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-crumbs a:hover {
  color: var(--ks-primary);
  text-decoration: underline;
}
.ks-themed .vv-crumb-sep {
  color: var(--ks-border);
}
.ks-themed .vv-crumbs .vv-crumb-home {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-crumbs .vv-crumb-home .vv-icon {
  width: 16px;
  height: 16px;
}

/* On a phone the trail is the house icon and the category path («⌂ / Eksteriør / Bilvask /
   Skumsåpe»): the page heading names the page, so the current page is left out (Rune,
   2026-11-05). One line; a long path scrolls sideways inside the bar. A trail with nothing
   between home and the current page shows nothing. Search engines still get the full trail
   from the BreadcrumbList data. */
@media (max-width: 639px) {
  .ks-themed .vv-crumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .ks-themed .vv-crumbs::-webkit-scrollbar {
    display: none;
  }
  .ks-themed .vv-crumbs > [aria-current],
  .ks-themed .vv-crumbs > .vv-crumb-sep:has(+ [aria-current]) {
    display: none;
  }
  .ks-themed .vv-crumbs > a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  .ks-themed .vv-wrap.vv-crumbs-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .ks-themed .vv-wrap.vv-crumbs-wrap:not(:has(.vv-crumbs > a:nth-of-type(2))) {
    display: none;
  }
}

/* Title + description */
.ks-themed .vv-coll-head {
  padding: 14px 0 4px;
}
.ks-themed .vv-coll-head h1 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
}
.ks-themed .vv-coll-desc {
  color: var(--ks-text-muted);
  max-width: 68ch;
  margin: 8px 0 0;
  font-size: 14.5px;
}

/* Toolbar — category chips + sort */
.ks-themed .vv-coll-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0 0;
}
/* Phone and tablet: Filter and Sort share the first line, the product count and active
   filters go under it (Rune, 2026-11-05). */
@media (max-width: 899px) {
  .ks-themed .vv-coll-toolbar {
    gap: 10px 12px;
  }
  .ks-themed .vv-coll-toolbar .vv-filter-open {
    order: 1;
  }
  .ks-themed .vv-coll-toolbar .vv-sort {
    order: 2;
    margin-left: auto;
  }
  .ks-themed .vv-coll-toolbar .vv-active-filters {
    order: 3;
    flex-basis: 100%;
  }
}
.ks-themed .vv-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ks-themed .vv-chip {
  display: inline-block;
  background: var(--ks-bg);
  color: var(--ks-text);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.ks-themed .vv-chip:hover {
  border-color: var(--ks-primary);
  color: var(--ks-primary);
}
.ks-themed .vv-chip.vv-on {
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  border-color: var(--ks-primary);
}
.ks-themed .vv-sort-form {
  margin-left: auto;
}
.ks-themed .vv-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-sort select {
  height: var(--ks-control-height);
  background: var(--ks-bg);
  color: var(--ks-text);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  padding: 0 10px;
  font: inherit;
  font-size: var(--ks-control-font-size);
}
/* Every single-line select draws its own arrow with room to the edge; the browser's arrow
   sat almost on the right border (Rune, 2026-11-05). */
.ks-themed select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.ks-themed .vv-sort select:focus {
  border-color: var(--ks-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-primary) 12%, transparent);
}

.ks-themed .vv-coll-count {
  padding: 10px 0 18px;
  font-size: 13px;
  color: var(--ks-text-muted);
}

/* Product grid — matches platform ProductCard / brand listing (storefrontProductGridClass) */
.ks-themed .vv-prod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 640px) {
  .ks-themed .vv-prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ks-themed .vv-prod-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ks-themed .vv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ks-bg);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.ks-themed .vv-card:hover {
  border-color: color-mix(in srgb, var(--ks-border) 70%, var(--ks-text) 30%);
  box-shadow:
    0 10px 15px -3px rgba(2, 6, 23, 0.08),
    0 4px 6px -4px rgba(2, 6, 23, 0.06);
}
/* Product photography sits on white, so the frame is white too: a white
   product shot blends into the card instead of floating in a grey box. Dark
   photography (Paul's) still reads as a dark rectangle here on purpose — the
   fix for that is white-background imagery from the client (VI-KA-81), not
   cropping every bottle to a 4:3 frame. */
.ks-themed .vv-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--ks-border);
  background: var(--ks-white);
}
.ks-themed .vv-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.3s ease;
}
.ks-themed .vv-card:hover .vv-card-media img {
  transform: scale(1.04);
}
/* Stock chip (top-left) and merchandising badge (top-right) on the image.
   Scoped to the card image: the product page has its own .vv-stock line
   (catalog.css), and an unscoped chip pinned it over the title (VI-KA-85). */
.ks-themed .vv-card-media .vv-stock {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  border-radius: var(--ks-radius-pill);
  background: color-mix(in srgb, var(--ks-white) 92%, transparent);
  border: 1px solid var(--ks-border);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ks-text);
}
.ks-themed .vv-card-media .vv-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-success);
}
.ks-themed .vv-card-media .vv-stock-out {
  color: var(--ks-text-muted);
}
.ks-themed .vv-card-media .vv-stock-out::before {
  background: var(--ks-danger);
}
.ks-themed .vv-card-media .vv-stock-backorder::before {
  background: var(--ks-info);
}
.ks-themed .vv-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--ks-primary);
  color: var(--ks-primary-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ks-radius-control);
  padding: 2px 8px;
}
.ks-themed .vv-card .vv-badge {
  top: 10px;
  left: auto;
  right: 10px;
  font-size: 12px;
}
.ks-themed .vv-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 12px 14px 14px;
}
.ks-themed .vv-card-brand {
  order: -1;
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ks-text-muted);
}
.ks-themed .vv-card-brand a {
  color: inherit;
  text-decoration: none;
}
.ks-themed .vv-card-brand a:hover {
  text-decoration: underline;
}
.ks-themed .vv-card-title-link {
  text-decoration: none;
  color: inherit;
}
.ks-themed .vv-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ks-text);
  transition: color 0.15s ease;
}
.ks-themed .vv-card:hover .vv-card-title {
  color: var(--ks-primary);
}
.ks-themed .vv-card-meta {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ks-text-muted);
}
.ks-themed .vv-card-sku {
  font-variant-numeric: tabular-nums;
}
.ks-themed .vv-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: auto;
  padding-top: 12px;
}
.ks-themed .vv-card-price-block {
  flex: 1 1 auto;
  min-width: 0;
}
/* A text action that does not fit beside the price drops to its own line,
   still right-aligned, instead of covering the secondary price. */
.ks-themed .vv-card-atc-link {
  margin-left: auto;
}
.ks-themed .vv-card-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
.ks-themed .vv-card-price {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ks-text);
}
.ks-themed .vv-card-vat {
  font-size: 12px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-card-price-alt {
  margin: 1px 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ks-text-muted);
}
/* Actions are deliberately lighter than the navy PDP button: an outlined icon
   button for a simple product, an outlined text button for a family. */
.ks-themed .vv-card-atc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ks-control-height);
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ks-primary) 45%, var(--ks-border));
  border-radius: var(--ks-radius-control);
  background: var(--ks-bg);
  color: var(--ks-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}
.ks-themed .vv-card-atc:hover {
  background: var(--ks-primary);
  border-color: var(--ks-primary);
  color: var(--ks-primary-text);
}
.ks-themed .vv-card-atc-icon {
  width: var(--ks-tap-min, 44px);
  min-height: var(--ks-control-height);
  padding: 0;
}
.ks-themed .vv-card-atc .vv-icon {
  width: 18px;
  height: 18px;
}
.ks-themed .vv-card-atc[data-ks-busy] {
  opacity: 0.65;
  cursor: wait;
}
.ks-themed .vv-card-atc[data-ks-error] {
  background: var(--ks-danger-strong);
  border-color: var(--ks-danger-strong);
  color: var(--ks-white);
}
.ks-themed .vv-card-out .vv-card-atc-icon {
  border-color: var(--ks-border);
  color: var(--ks-text-muted);
  background: var(--ks-surface);
  cursor: not-allowed;
}
.ks-themed .vv-card-out .vv-card-atc-icon:hover {
  background: var(--ks-surface);
  border-color: var(--ks-border);
  color: var(--ks-text-muted);
}
.ks-themed .vv-card-out .vv-card-media img {
  opacity: 0.75;
}
@media (max-width: 639px) {
  .ks-themed .vv-card-body {
    padding: 10px 10px 12px;
  }
  .ks-themed .vv-card-title {
    font-size: 14px;
    line-height: 1.3;
  }
  .ks-themed .vv-card-brand {
    font-size: 12px;
  }
  .ks-themed .vv-card-price {
    font-size: 15px;
  }
  /* One price line on a phone: the other display mode is a tap away on the PDP. */
  .ks-themed .vv-card-price-alt {
    display: none;
  }
  .ks-themed .vv-card-atc-label {
    display: none;
  }
  .ks-themed .vv-card-atc {
    width: var(--ks-tap-min, 44px);
    min-height: var(--ks-control-height);
    padding: 0;
  }
  .ks-themed .vv-card-media .vv-stock {
    top: 8px;
    left: 8px;
    padding: 2px 7px 2px 6px;
    font-size: 12px;
  }
}

/* Empty state */
.ks-themed .vv-coll-empty {
  border: 1px dashed var(--ks-border);
  border-radius: var(--ks-radius-card);
  padding: 48px 24px;
  text-align: center;
  color: var(--ks-text-muted);
}
.ks-themed .vv-coll-empty p {
  margin: 0 0 16px;
}

/* Pagination */
.ks-themed .vv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 32px;
}
.ks-themed .vv-pager-btn {
  display: inline-block;
  background: var(--ks-bg);
  color: var(--ks-text);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
}
.ks-themed .vv-pager-btn:hover {
  border-color: var(--ks-primary);
  color: var(--ks-primary);
}
.ks-themed .vv-pager-status {
  font-size: 13px;
  color: var(--ks-text-muted);
}

/* ── Brand index /merke (A–Å) ─────────────────────────── */
.ks-themed .vv-merke {
  padding: 32px 0 64px;
}
.ks-themed .vv-merke-head {
  margin-bottom: 32px;
}
.ks-themed .vv-merke-head h1 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ks-text);
}
.ks-themed .vv-merke-head p {
  margin: 8px 0 0;
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ks-text-muted);
}
.ks-themed .vv-merke-letters {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ks-border);
  background: color-mix(in srgb, var(--ks-bg) 95%, transparent);
  backdrop-filter: blur(8px);
}
.ks-themed .vv-merke-letter,
.ks-themed .vv-merke-letter-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: calc(var(--ks-radius-control) / 2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}
.ks-themed .vv-merke-letter:hover {
  color: var(--ks-primary);
  background: var(--ks-surface);
}
.ks-themed .vv-merke-letter-off {
  color: color-mix(in srgb, var(--ks-text-muted) 40%, transparent);
  cursor: default;
}
.ks-themed .vv-merke-empty {
  border: 1px dashed var(--ks-border);
  border-radius: var(--ks-radius-card);
  padding: 48px 24px;
  text-align: center;
  color: var(--ks-text-muted);
}
.ks-themed .vv-merke-empty p {
  margin: 0;
}
.ks-themed .vv-merke-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}
@media (min-width: 640px) {
  .ks-themed .vv-merke-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ks-themed .vv-merke-logos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.ks-themed .vv-merke-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 20px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-white);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.ks-themed .vv-merke-logo-tile:hover,
.ks-themed .vv-merke-logo-tile:focus-visible {
  border-color: var(--ks-primary);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.ks-themed .vv-brand-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-card);
  background: var(--ks-white);
}
.ks-themed .vv-merke-logo-tile img {
  max-height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.ks-themed .vv-merke-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ks-themed .vv-merke-group {
  scroll-margin-top: 64px;
}
.ks-themed .vv-merke-group h2 {
  margin: 0 0 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ks-border);
  font-size: 22px;
  font-weight: 700;
  color: var(--ks-text);
}
.ks-themed .vv-merke-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
}
@media (min-width: 640px) {
  .ks-themed .vv-merke-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .ks-themed .vv-merke-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ks-themed .vv-merke-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.ks-themed .vv-merke-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 0;
  font-size: 13.5px;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ks-themed .vv-merke-link:hover,
.ks-themed .vv-merke-link:focus-visible {
  color: var(--ks-primary);
}
.ks-themed .vv-merke-count {
  color: var(--ks-text-muted);
}

/* ── Homepage brand promo cards (Magento forside parity) ── */
.ks-themed .home-brand-card__cta {
  background-color: color-mix(in srgb, var(--ks-surface) 75%, transparent);
  color: var(--ks-primary);
}

/* ── Mobile navigation drawer ─────────────────────────── */
/* Pure-CSS off-canvas (ADR-0094 — themes ship no JS). Two load-bearing
   details, both borrowed from the samson theme's drawer:
   1. the open <summary> stretches to a fixed full-viewport backdrop that sits
      UNDER the panel, so any tap outside the panel toggles the drawer shut;
   2. the panel is a sibling of that summary inside [open], so no wrapper
      element is needed to escape the header's flex row.
   Hidden above the breakpoint — the navy subnav is the desktop nav. */
.ks-themed .vv-mobile-nav {
  display: none;
}
.ks-themed .vv-mobile-nav > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: var(--ks-tap-min);
  margin-left: -10px;
  border-radius: var(--ks-radius-control);
  list-style: none;
  cursor: pointer;
  color: var(--ks-text);
}
.ks-themed .vv-mobile-nav > summary::-webkit-details-marker {
  display: none;
}
.ks-themed .vv-mobile-nav > summary .vv-icon {
  width: 24px;
  height: 24px;
}
.ks-themed .vv-mobile-nav .vv-close {
  display: none;
}
.ks-themed .vv-mobile-nav[open] > summary .vv-close {
  display: block;
}
.ks-themed .vv-mobile-nav[open] > summary .vv-burger {
  display: none;
}
/* touch-action stops the backdrop from panning the page behind the drawer —
   the no-JS stand-in for a body scroll lock. */
.ks-themed .vv-mobile-nav[open] > summary {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  padding: 14px 16px;
  align-items: flex-start;
  justify-content: flex-end;
  background: rgba(2, 6, 23, 0.5);
  color: var(--ks-white);
  touch-action: none;
}
.ks-themed .vv-drawer {
  display: none;
}
.ks-themed .vv-mobile-nav[open] > .vv-drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  width: min(86vw, 360px);
  background: var(--ks-bg);
  color: var(--ks-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 0 40px rgba(2, 6, 23, 0.28);
}
.ks-themed .vv-drawer-head {
  flex: none;
  padding: 18px 20px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}
.ks-themed .vv-drawer-search {
  flex: none;
  position: relative;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--ks-border);
}
.ks-themed .vv-drawer-search form,
.ks-themed .vv-drawer-search [data-storefront-search] {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.ks-themed .vv-drawer-search .vv-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ks-text-muted);
  pointer-events: none;
}
.ks-themed .vv-drawer-search input {
  width: 100%;
  height: var(--ks-control-height);
  background: var(--ks-surface);
  color: var(--ks-text);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-control);
  padding: 0 14px 0 40px;
  font: inherit;
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: var(--ks-control-font-size);
  outline: none;
}
.ks-themed .vv-drawer-search input:focus {
  border-color: var(--ks-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-primary) 12%, transparent);
}
.ks-themed .vv-drawer-nav {
  flex: 1 0 auto;
  padding-bottom: 8px;
}
.ks-themed .vv-m-top,
.ks-themed .vv-m-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ks-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--ks-text);
  list-style: none;
  cursor: pointer;
}
.ks-themed .vv-m-group > summary::-webkit-details-marker {
  display: none;
}
.ks-themed .vv-m-group[open] > summary {
  background: var(--ks-surface);
  color: var(--ks-primary);
}
.ks-themed .vv-m-caret {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: transform 0.18s ease;
}
.ks-themed .vv-m-group[open] > summary .vv-m-caret {
  transform: rotate(-135deg);
}
.ks-themed .vv-m-sub {
  background: var(--ks-surface);
  border-bottom: 1px solid var(--ks-border);
  padding: 4px 0 8px;
}
/* A parent row toggles rather than navigates, so its own page needs an
   explicit way in — otherwise every category with children is unreachable. */
.ks-themed .vv-m-all {
  display: block;
  padding: 11px 20px 11px 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ks-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ks-themed .vv-m-sub .vv-m-link {
  display: block;
  min-height: var(--ks-tap-min);
  padding: 11px 20px 11px 32px;
  font-size: 15px;
  color: var(--ks-text);
}
.ks-themed .vv-m-sub .vv-m-link.vv-active {
  color: var(--ks-primary);
  font-weight: 600;
}
.ks-themed .vv-m-group-2 > summary {
  min-height: var(--ks-tap-min);
  padding: 11px 20px 11px 32px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 0;
}
.ks-themed .vv-m-sub-2 {
  background: var(--ks-bg);
  border-top: 1px solid var(--ks-border);
  border-bottom: 1px solid var(--ks-border);
  padding: 2px 0 6px;
}
.ks-themed .vv-m-sub-2 .vv-m-all,
.ks-themed .vv-m-sub-2 .vv-m-link {
  padding-left: 44px;
}
.ks-themed .vv-drawer-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 28px;
  border-top: 1px solid var(--ks-border);
  font-size: 14px;
  color: var(--ks-text-muted);
}
.ks-themed .vv-drawer-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ks-tap-min);
  font-size: 15px;
  font-weight: 600;
  color: var(--ks-text);
}
.ks-themed .vv-drawer-account .vv-icon {
  width: 20px;
  height: 20px;
}
.ks-themed .vv-drawer-contact {
  display: inline-flex;
  align-items: center;
  /* Phone and e-mail are the two links a B2B customer most often reaches for
     here; a bare text line is a 22px target. */
  min-height: var(--ks-tap-min);
  color: var(--ks-primary);
}
@media (prefers-reduced-motion: reduce) {
  .ks-themed .vv-m-caret {
    transition: none;
  }
}
@media (max-width: 900px) {
  .ks-themed .vv-mobile-nav {
    display: block;
    flex: none;
  }
  /* The desktop bar can't work here: its items are `flex: none; nowrap` so
     they run off-screen, and the mega panels only open on :hover. */
  .ks-themed .vv-subnav {
    display: none;
  }
  /* backdrop-filter makes the header a containing block for fixed-position
     descendants, which would clip the drawer to the header band. */
  .ks-themed .vv-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--ks-bg);
  }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 960px) {
  .ks-themed .vv-info-wide {
    display: none;
  }
  .ks-themed .vv-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ks-themed .vv-hide-sm {
    display: none;
  }
  .ks-themed .vv-info-bullet {
    display: none;
  }
  .ks-themed .vv-search {
    display: none;
  }
  .ks-themed .vv-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ks-themed .vv-footer-band {
    padding: 36px 0 40px;
  }
  .ks-themed .vv-footer-fine {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ks-themed .vv-sort-form {
    margin-left: 0;
  }
}
.ks-themed a:focus-visible,
.ks-themed button:focus-visible,
.ks-themed input:focus-visible {
  outline: 2px solid var(--ks-primary);
  outline-offset: 2px;
}

/* The islands bridge hides the no-JS fallback form once the real
   (Ragnar-backed) SearchAutocomplete portal mounts. Theme CSS that sets
   `display` on the form outranks the UA sheet's [hidden], so without this the
   fallback renders underneath the autocomplete as a second search box. */
[data-ks-search-autocomplete] form[hidden] {
  display: none;
}

/* The portaled autocomplete field is a daisyUI `.input`, which paints its own
   pill with a box-shadow. The theme rules above already style this input as
   the visible field, so that shadow lands as a second pill nested inside the
   first, clipping the placeholder. Reset the shadow only: border, radius and
   background stay under the theme's control, and the focus ring is untouched.
   This rule sits last on purpose — it ties on specificity with the theme's own
   `.xx-search input` rules, so anything more than the shadow would override
   them and leave the field with no chrome at all. */
[data-ks-search-autocomplete] input.input, [data-ks-search-autocomplete] input.ksd-input {
  box-shadow: none;
}