/* Kavio Store homes (releases 20261441 + 20261442): "Packs & store kits" (.kvhp, common/kv/home_packs.tpl and
   common/kv/plat/home_packs.tpl), the compact add-on tiles (.kvcx, blocks/static_templates/kv_home_catalog.tpl and
   common/kv/plat/home_groups.tpl), the compact theme cards (.kvtm, common/kv/home_themes.tpl) and the compatibility matrix
   height of the platform homes. Linked on the home of every host (templates/index.tpl): CS-Cart after store.css, OpenCart /
   PrestaShop / WooCommerce after css/kv/plat/common.css. Tokens from b.css / kv.css. CSS only, no script. */

/* ---------- Packs & store kits ---------- */
.kv .kvhp:not(.kvhp--plat) { padding-top: 56px; padding-bottom: 24px; }
.kv .kvhp__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kv .kvhp__item { display: flex; min-width: 0; }
.kv .kvhp__card { flex: 1; min-width: 0; gap: 8px; padding: 20px 20px 18px; }
.kv .kvhp__card::before, .kv .kvhp__card::after { height: 112px; }
.kv .kvhp__card .pkg__name { margin-top: 20px; font-size: 19px; line-height: 1.2; }
.kv .kvhp__card .pkg__tag { -webkit-line-clamp: 2; }
.kv .kvhp__kind { position: absolute; top: 14px; right: 14px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(16, 20, 24, .4); }
.kv .kvhp__members { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvhp__price { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.kv .kvhp__price b { font-size: 24px; letter-spacing: -0.03em; }
.kv .kvhp__price small { font-size: 12px; color: var(--ink-3); }
.kv .kvhp__sep { font-size: 12.5px; color: var(--ink-3); }
.kv .kvhp__sep .tnum { color: var(--ink-2); font-weight: 600; }
.kv .kvhp__soon { font-size: 12px; color: var(--ink-3); }
.kv .kvhp__card:focus-visible { outline: 3px solid var(--focus, #4A2ECB); outline-offset: 3px; }
@media (max-width: 1100px) {
  .kv .kvhp__rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 31%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter, 20px) * -1); padding: 4px var(--gutter, 20px) 16px; scroll-padding-inline: var(--gutter, 20px); }
  .kv .kvhp__rail::-webkit-scrollbar { display: none; }
  .kv .kvhp__item { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .kv .kvhp:not(.kvhp--plat) { padding-top: 40px; }
  .kv .kvhp__rail { grid-auto-columns: 78%; }
}

/* ---------- Browse add-ons: category tiles ---------- */
.kv .kvcx .shead { margin-bottom: 28px; }
.kv .kvcx__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kv .kvcx__cat { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 12px; border-radius: 18px; background: #fff;
  border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: box-shadow .25s, border-color .25s, transform .35s var(--ease-out, ease); }
.kv .kvcx__cat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 64px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, #5A606B) 9%, #fff), #fff); }
.kv .kvcx__cat:hover { border-color: color-mix(in srgb, var(--c, #5A606B) 35%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.kv .kvcx__head { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding-bottom: 10px; }
.kv .kvcx__ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--c, var(--ink-3));
  background: color-mix(in srgb, var(--c, #5A606B) 12%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #5A606B) 24%, transparent); }
.kv .kvcx__ico .ico { width: 18px; height: 18px; }
.kv .kvcx__name { flex: 1; min-width: 0; font-weight: 650; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; }
.kv .kvcx__n { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: var(--c, var(--ink-2));
  background: color-mix(in srgb, var(--c, #5A606B) 10%, #fff); }
.kv .kvcx__head:hover .kvcx__name { color: var(--c, var(--ink)); }
.kv .kvcx__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.kv .kvcx__list li { min-width: 0; }
.kv .kvcx__list a { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 36px; padding: 2px 6px; margin: 0 -6px; border-radius: 9px; color: var(--ink-2);
  font-size: 13.5px; line-height: 1.3; text-decoration: none; }
.kv .kvcx__list a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv .kvcx__list .pi { width: 26px; height: 26px; border-radius: 7px; }
.kv .kvcx__list a:hover { background: var(--bg-2, #F4F5F7); color: var(--ink); }
.kv .kvcx__txt { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.kv .kvcx__all { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 600;
  color: color-mix(in srgb, var(--c, #5A606B) 80%, #000); text-decoration: none; }
.kv .kvcx__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.kv .kvcx__cat--x { --c: #4A2ECB; background: color-mix(in srgb, #4A2ECB 4%, #fff); border-style: dashed; }
.kv .kvcx__cat--x + .kvcx__cat--x { --c: #141922; }
.kv .kvcx__cat--x::before { display: none; }
.kv .kvcx a:focus-visible { outline: 3px solid var(--focus, #4A2ECB); outline-offset: 2px; border-radius: 8px; }
/* the custom-work tile is left out when it would sit alone in a new row (the link is also in the header and footer) */
@media (min-width: 1101px) { .kv .kvcx__cat--q:nth-child(4n+1) { display: none; } }
@media (min-width: 768px) and (max-width: 1100px) { .kv .kvcx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv .kvcx__cat--q:nth-child(3n+1) { display: none; } }
@media (max-width: 767px) {
  .kv .kvcx__grid { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter, 16px) * -1); padding: 4px var(--gutter, 16px) 14px;
    scroll-padding-inline: var(--gutter, 16px); gap: 12px; }
  .kv .kvcx__grid::-webkit-scrollbar { display: none; }
  .kv .kvcx__cat { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .kv .kvcx__cat { transition: none; } .kv .kvcx__cat:hover { transform: none; } }

/* ---------- Platform homes (release 20261442): packs head, goal tiles, focus ring in the host colour ---------- */
.kv .kvhp__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--link, var(--ink)); text-decoration: none; white-space: nowrap; }
.kv .kvhp__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.kv .kvcx__grid--plat { margin-top: 8px; }
html[data-kv-plat] .kvhp__card:focus-visible, html[data-kv-plat] .kvtm a:focus-visible, html[data-kv-plat] .kvcx a:focus-visible { outline: 3px solid var(--brand-ink, #101418); outline-offset: 2px; }

/* ---------- Compact theme cards (.kvtm, common/kv/home_themes.tpl) ---------- */
.kv .kvthsec--compact { overflow: visible; }
.kv .kvthsec--compact .shead { margin-bottom: 28px; }
.kv .kvthsec__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kv .kvtm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.kv .kvtm__card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden;
  transition: box-shadow .25s, transform .35s var(--ease-out, ease), border-color .25s; }
.kv .kvtm__card:hover { box-shadow: var(--shadow-2, 0 12px 28px -14px rgba(16, 20, 24, .35)); transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 18%, var(--line)); }
.kv .kvtm__shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2, #F4F5F7); border-bottom: 1px solid var(--line); }
.kv .kvtm__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out, ease); }
.kv .kvtm__card:hover .kvtm__shot img { transform: scale(1.035); }
.kv .kvtm__flag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: #fff; background: rgba(16, 20, 24, .86); }
.kv .kvtm__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 12px; }
.kv .kvtm__name { margin: 0; font-size: 16.5px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
.kv .kvtm__name a { color: var(--ink); text-decoration: none; }
.kv .kvtm__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kv .kvtm__price { font-size: 12.5px; color: var(--ink-3); }
.kv .kvtm__price b { font-size: 14px; color: var(--ink); font-weight: 650; }
.kv .kvtm__vert { margin: 4px 0 0; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvtm__links { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.kv .kvtm__demo { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  color: #0B6B3F; background: #E7F6EE; text-decoration: none; white-space: nowrap; }
.kv .kvtm__demo i { width: 7px; height: 7px; border-radius: 50%; background: #17A057; box-shadow: 0 0 0 3px rgba(23, 160, 87, .2); }
.kv .kvtm__demo:hover { background: #D4F0E1; }
.kv .kvtm__go { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; font-size: 13px; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap; }
.kv .kvtm__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.kv .kvtm__rest { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kv .kvtm__rest-l { margin-right: 4px; font-size: 12.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.kv .kvtm__rest a { display: inline-flex; align-items: baseline; gap: 7px; min-height: 32px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; box-sizing: border-box; }
.kv .kvtm__rest a small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.kv .kvtm__rest a:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.kv .kvtm a:focus-visible, .kv .kvtm__rest a:focus-visible { outline: 3px solid #4A2ECB; outline-offset: 2px; }
@media (min-width: 1101px) { .kv .kvtm__card--x { display: none; } }
@media (max-width: 1100px) {
  .kv .kvtm { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 30%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter, 20px) * -1); padding: 4px var(--gutter, 20px) 14px; scroll-padding-inline: var(--gutter, 20px); }
  .kv .kvtm::-webkit-scrollbar { display: none; }
  .kv .kvtm__card { scroll-snap-align: start; }
  .kv .kvtm__rest { display: none; }
}
@media (max-width: 767px) { .kv .kvtm { grid-auto-columns: 72%; gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .kv .kvtm__card, .kv .kvtm__shot img { transition: none; }
  .kv .kvtm__card:hover, .kv .kvtm__card:hover .kvtm__shot img { transform: none; }
}

/* themes block inside the catalogue section of the platform homes (common/kv/plat/home_themes.tpl) */
.kv .kvtm-sub { margin-top: 48px; }
.kv .kvtm-sub__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 20px; }
.kv .kvtm-sub__head > div { flex: 1 1 420px; min-width: 0; }
.kv .kvtm-sub__h { margin: 0 0 6px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.015em; }
.kv .kvtm-sub__head p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.kv .kvtm-sub__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kv .kvtm-sub__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-weight: 650; font-size: 14px;
  color: #fff; background: var(--brand-ink, #101418); text-decoration: none; white-space: nowrap; }
.kv .kvtm-sub__btn:hover { filter: brightness(1.1); }
.kv .kvtm-sub__lnk { font-weight: 600; font-size: 14px; color: var(--link, var(--ink)); }

/* compatibility matrix of the platform homes: a scroll box instead of the full height (every product row and link stays) */
.kv .ocx-matrix-wrap, .kv .psx-matrix-wrap, .kv .wcx-table-wrap { max-height: 560px; overflow: auto; }
@media (min-width: 768px) {
  .kv .ocx-matrix thead th, .kv .psx-matrix thead th, .kv .wcx-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
  .kv .wcx-table-wrap thead th { background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
}
@media (max-width: 767px) { .kv .ocx-matrix-wrap, .kv .psx-matrix-wrap, .kv .wcx-table-wrap { max-height: 620px; } }
.kv .kvcm-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.kv .ocx-matrix-wrap::after, .kv .psx-matrix-wrap::after, .kv .wcx-table-wrap::after { content: ""; position: sticky; bottom: 0; display: block; height: 32px;
  pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
@media (max-width: 767px) {
  .kv .ocx-matrix-wrap, .kv .psx-matrix-wrap, .kv .wcx-table-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
  .kv .ocx-matrix-wrap::after, .kv .psx-matrix-wrap::after, .kv .wcx-table-wrap::after { display: none; }
}