/* Kavio Store: bridge between CS-Cart (Responsive) markup and the B site design system (css/kv/b/*.css, generated).
   Loaded last. Scope: the CS-Cart page shell, core widgets (notifications, dialogs, forms, buttons, tables),
   cart/checkout/account pages and the kavio_store templates. Tokens come from b.css/kv.css (:root). */

/* ---------- Shell ---------- */
html.kv, html.kv body { background: var(--bg); }
.kv .ty-tygh { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.kv .ty-helper-container { flex: 1 0 auto; display: flex; flex-direction: column; }
.kv .kvc { width: 100%; }
.kv .kvc--content { flex: 1 0 auto; }
.kv .kvrow { display: flex; gap: 0; width: 100%; }
.kv .kvg { flex: 1 1 auto; min-width: 0; }
.kv .kvg--16 { width: 100%; }
.kv .tygh-top-panel, .kv .tygh-header, .kv .tygh-footer { background: none; }

/* page width for core pages (cart, checkout, account, search, sign-in) */
.kv .kv-page { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 72px; box-sizing: border-box; width: 100%; }
.kv .kv-full { width: 100%; }

/* core page titles (mainbox) in the B style */
.kv .kv-page .ty-mainbox-title, .kv .kv-page h1.ty-mainbox-title { font: 600 40px/1.08 var(--font); font-stretch: 94%; letter-spacing: -0.035em; color: var(--ink); margin: 12px 0 28px; padding: 0; border: 0; text-transform: none; }
.kv .ty-mainbox-container { margin: 0; }
.kv .ty-mainbox-body { padding: 0; }

/* breadcrumbs as B .crumbs */
.kv .ty-breadcrumbs { padding: 28px 0 0; margin: 0; font: 400 13px/1.4 var(--font); color: var(--ink-3); border: 0; background: none; }
.kv .ty-breadcrumbs__a { color: var(--ink-3); text-decoration: none; }
.kv .ty-breadcrumbs__a:hover { color: var(--ink); text-decoration: underline; }
.kv .ty-breadcrumbs__slash { margin: 0 6px; color: var(--line-2); }
.kv .ty-breadcrumbs__current { color: var(--ink-2); }
.kv .ty-breadcrumbs .ty-product-switcher { display: none; }

/* ---------- Buttons: orange primary with Ink text, quiet secondary ---------- */
.kv .ty-btn, .kv .ty-btn__primary, .kv .ty-btn__secondary, .kv .ty-btn__tertiary, .kv .ty-btn__big, .kv .ty-btn__text, .kv .ty-btn__add-to-cart, .kv .ty-btn__primary.ty-btn__big {
  font: 600 14.5px/1 var(--font); border-radius: var(--r-2); padding: 11px 18px; text-transform: none; letter-spacing: 0; box-shadow: none; text-shadow: none; transition: background .15s, border-color .15s, transform .15s; }
.kv .ty-btn__primary, .kv .ty-btn__add-to-cart, .kv .ty-btn__big.ty-btn__primary, .kv .cm-checkout-place-order, .kv .litecheckout__submit-btn {
  background: var(--brand); color: var(--brand-on, #101418); border: 1px solid var(--brand); }
.kv .ty-btn__primary:hover, .kv .ty-btn__add-to-cart:hover, .kv .litecheckout__submit-btn:hover { background: var(--brand-700, #F04A1D); color: #101418; border-color: var(--brand-700, #F04A1D); }
.kv .ty-btn__secondary, .kv .ty-btn__tertiary, .kv .ty-btn__text { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.kv .ty-btn__secondary:hover, .kv .ty-btn__tertiary:hover { background: var(--bg-2); color: var(--ink); }
.kv .ty-btn__big { padding: 14px 22px; font-size: 15.5px; }

/* ---------- Forms ---------- */
.kv .ty-input-text, .kv .ty-input-text-medium, .kv .ty-input-text-large, .kv .ty-input-text-full, .kv input.ty-input-text, .kv .ty-input-textarea, .kv .ty-input-textarea-long,
.kv select.ty-input-text, .kv .ty-profile-field__select, .kv .litecheckout__input, .kv .ty-search-block__input, .kv .ty-login__input, .kv .ty-input-height {
  font: 400 15px/1.4 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 10px 12px; box-shadow: none; height: auto; }
.kv .ty-input-text:focus, .kv .litecheckout__input:focus, .kv .ty-input-textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 255, 91, 46), .18); }
.kv .ty-control-group__title, .kv .ty-control-group__label, .kv .litecheckout__label { font: 500 13.5px/1.3 var(--font); color: var(--ink-2); }
.kv .ty-control-group { margin-bottom: 14px; }

/* ---------- Notifications (CS-Cart) ---------- */
.kv .cm-notification-container .cm-notification-content, .kv .notification-content { font-family: var(--font); border-radius: var(--r-3); box-shadow: var(--shadow-3); border: 1px solid var(--line); background: #fff; color: var(--ink); }
.kv .alert-success, .kv .notification-n { border-left: 4px solid var(--ok, #1F8A4C); }
.kv .alert-error, .kv .notification-e { border-left: 4px solid var(--bad, #B23A14); }
.kv .alert-warning, .kv .notification-w { border-left: 4px solid var(--warn, #B88200); }
.kv .ui-dialog { border-radius: var(--r-3); font-family: var(--font); }
.kv .ui-dialog .ui-dialog-titlebar { background: #fff; border-bottom: 1px solid var(--line); }
.kv .ui-dialog .ui-dialog-title { font: 600 17px/1.3 var(--font); color: var(--ink); }

/* ---------- Tables (orders, licenses in core markup) ---------- */
.kv .ty-table { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; font-size: 14.5px; }
.kv .ty-table th { background: var(--bg-2); font: 500 11.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.kv .ty-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.kv .ty-table tr:last-child td { border-bottom: 0; }

/* ---------- Account pages: side navigation + main ---------- */
.kv .kv-account { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 0 40px; align-items: start; }
.kv .kv-account > div:first-child { grid-column: 1 / -1; }
.kv .kv-account__side { grid-column: 1; padding-top: 36px; position: sticky; top: 16px; }
.kv .kv-account__main { grid-column: 2; min-width: 0; }
@media (max-width: 1024px) {
  .kv .kv-account { grid-template-columns: minmax(0, 1fr); }
  .kv .kv-account__main .ty-table { display: block; overflow-x: auto; }
  .kv .kv-account__side, .kv .kv-account__main { grid-column: 1; position: static; padding-top: 16px; }
}

/* ---------- Core widgets keep their unstyled lists (the base list reset was removed from styles.less) ---------- */
.kv ul[class^="ty-"], .kv ul[class*=" ty-"], .kv [class^="ty-"] > ul, .kv .litecheckout ul, .kv .cm-notification-container ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Misc core cleanup ---------- */
.kv .ty-footer, .kv .ty-footer-grid { display: none; }
.kv .ty-wysiwyg-content { font-family: var(--font); }
.kv .ty-price, .kv .ty-price-num { font-family: var(--font); }
.kv .ty-no-items { background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r-3); color: var(--ink-2); padding: 40px; font-size: 15px; }
.kv .ty-pagination { font-family: var(--font); }

/* Responsive pads the header container for its top panel (.tygh-header > div); the Kavio header has its own bar.
   Below 768 px Responsive also adds 10 px left and right: the header row then had 20 px less than on the home page
   (which renders it outside .tygh-header) and the platform headers overflowed at 375 px (theme-sync9). */
.tygh-header > div.kv-header { padding-top: 0; padding-left: 0; padding-right: 0; }

/* ---------- Checkout (Lite Checkout blocks, b-utility checkout.html look) ---------- */
.kv .kv-checkout > .kvrow { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 72px; gap: 32px; box-sizing: border-box; align-items: flex-start; }
.kv .kv-checkout .main-content-grid { flex: 1 1 0; min-width: 0; }
.kv .kv-checkout .side-grid { flex: 0 0 360px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-3, 14px); padding: 20px; box-shadow: var(--shadow-1); position: sticky; top: 92px; box-sizing: border-box; }
.kv .kv-checkout .litecheckout__page-title { font: 600 clamp(30px, 3.2vw, 40px)/1.1 var(--font); letter-spacing: -.02em; margin: 0 0 20px; }
.kv .kv-checkout .litecheckout__step-title, .kv .kv-checkout .litecheckout__group-title { font: 600 19px/1.3 var(--font); letter-spacing: -.01em; }
.kv .kv-checkout .litecheckout__group { gap: 12px; }
.kv .kv-checkout .ty-order-products__list { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kv .kv-checkout .ty-order-products__item { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.kv .kv-checkout .ty-order-products__item a { font: 600 15px/1.3 var(--font); color: var(--ink); text-decoration: none; }
.kv .kv-checkout .ty-checkout-summary__block td { padding: 6px 0; font-size: 14px; }
.kv .kv-checkout .ty-checkout-summary__order_total td { font-weight: 600; font-size: 16px; color: var(--ink); }
.kv .kv-checkout .litecheckout__payment-method { border-radius: var(--r-2, 10px); border-color: var(--line); background: #fff; }
.kv .kv-checkout .litecheckout__payment-method--active, .kv .kv-checkout .litecheckout__payment-method.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 255, 91, 46), .14); }
.kv .kv-checkout .litecheckout__payment-title { color: var(--ink); font-weight: 600; }
@media (max-width: 1024px) {
  .kv .kv-checkout > .kvrow { flex-direction: column; }
  /* stacked: full-width summary on the same .5rem gutter as the checkout panels */
  .kv .kv-checkout .side-grid { position: static; width: auto; flex-basis: auto; align-self: stretch; margin: 8px .5rem 0; }
}

/* licenses search: the core input reset leaves content-box sizing */
.kv .lsearch .input, .kv .pg-tsearch .input, .kv .input-pre .input { box-sizing: border-box; max-width: 100%; }
.kv .lsearch .input { width: 100%; }

/* order details: give the product column (options, license keys) the room */
.kv .ty-orders-detail__table { width: 100%; }
.kv .ty-orders-detail__table > thead > tr > th:first-child, .kv .ty-orders-detail__table > tbody > tr > td:first-child { width: 62%; }
.kv .ty-orders-detail__table > thead > tr > th:not(:first-child), .kv .ty-orders-detail__table > tbody > tr > td:not(:first-child) { white-space: nowrap; }
.kv .ty-orders-detail__table-image { margin-right: 16px; }
.kv .ty-orders-detail__table .ty-orders-detail__table-image + div, .kv .ty-orders-detail__table .ty-overflow-hidden { overflow: hidden; }

/* account pages rendered by kv_store (overview, downloads, support): vertical rhythm between blocks */
.kv .kv-store > * + * { margin-top: 20px; }
.kv .kv-store > .ahead + * { margin-top: 24px; }
.kv .kv-store .pg-dls > * + * { margin-top: 16px; }
.kv .kv-store-support .checks li { position: relative; padding-left: 22px; }
.kv .kv-store-support .checks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.kv .kv-checkout #litecheckout_step_location .litecheckout__group { align-items: center; }
.kv .kv-checkout #litecheckout_step_location select, .kv .kv-checkout #litecheckout_step_location .litecheckout__input { text-align: left; text-align-last: left; min-width: 280px; height: 44px; padding: 0 12px; }

/* ---------- QA round: core pages ---------- */
/* the main submit of a core form (Register, Save, Send, Continue) is the primary action, as on B */
.kv .buttons-container button[type="submit"].ty-btn__secondary, .kv .ty-profile-field__buttons .ty-btn__secondary, .kv .ty-form-builder .ty-btn__secondary[type="submit"] {
  background: var(--brand); color: var(--brand-on, #101418); border-color: var(--brand); }
.kv .buttons-container button[type="submit"].ty-btn__secondary:hover { background: var(--brand-700, #F04A1D); border-color: var(--brand-700, #F04A1D); }
.kv .buttons-container { background: none; padding: 8px 0 0; border: 0; }
/* account layout for guests (registration): no side navigation column */
.kv .kv-account:not(:has(.kv-account__side .side)) { grid-template-columns: minmax(0, 1fr); }
.kv .kv-account:not(:has(.kv-account__side .side)) .kv-account__side { display: none; }
.kv .kv-account:not(:has(.kv-account__side .side)) .kv-account__main { grid-column: 1; max-width: 760px; }
/* focus rings everywhere (keyboard) */
.kv a:focus-visible, .kv button:focus-visible, .kv .ty-btn:focus-visible, .kv input:focus-visible, .kv select:focus-visible, .kv textarea:focus-visible, .kv summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 255, 91, 46), .25); }
.kv .kv-search__form { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 8px 0 28px; position: relative; }
.kv .kv-search__form .ico { position: absolute; left: 12px; color: var(--ink-3); }
.kv .kv-search__form .input { flex: 1; padding-left: 36px; }
.kv .kv-search .cards { margin-bottom: 48px; }
.kv .kv-404 { padding: 72px var(--gutter, 24px) 96px; }
.kv .kv-404 .eyebrow { margin: 14px 0 4px; color: var(--ink-3); }
.kv .kv-404 h1 { font: 600 clamp(28px, 3vw, 38px)/1.1 var(--font); letter-spacing: -.02em; margin: 0 0 10px; }

/* custom-development request form (core Form builder inside the B .cdform panel) */
.kv .kv-cdform .cdform__body { padding: 24px; }
.kv .kv-cdform .ty-form-builder form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.kv .kv-cdform .ty-form-builder .ty-control-group { margin: 0; display: grid; gap: 6px; }
.kv .kv-cdform .ty-form-builder .ty-control-group:has(textarea), .kv .kv-cdform .ty-form-builder .ty-control-group:has(input[type="radio"]),
.kv .kv-cdform .ty-form-builder .ty-control-group:has(input[type="checkbox"]), .kv .kv-cdform .ty-form-builder .ty-control-group:has(.fileuploader),
.kv .kv-cdform .ty-form-builder .buttons-container, .kv .kv-cdform .ty-form-builder .ty-control-group:nth-of-type(3) { grid-column: 1 / -1; }
.kv .kv-cdform .ty-control-group__title { font: 600 13.5px/1.3 var(--font); color: var(--ink); }
.kv .kv-cdform select, .kv .kv-cdform .ty-form-builder__select, .kv .kv-cdform textarea, .kv .kv-cdform input[type="text"] {
  width: 100%; box-sizing: border-box; font: 400 15px/1.4 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 10px 12px; height: auto; }
.kv .kv-cdform textarea { min-height: 140px; }
.kv .kv-cdform .ty-form-builder__radio-group, .kv .kv-cdform .ty-control-group:has(input[type="radio"]) > div { display: flex; flex-wrap: wrap; gap: 8px; }
.kv .kv-cdform .ty-form-builder__radio-label, .kv .kv-cdform label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; }
.kv .kv-cdform label:has(> input[type="radio"]:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kv .kv-cdform .ty-control-group:has(input[type="checkbox"]) { grid-template-columns: auto 1fr; align-items: start; }
.kv .kv-cdform .ty-control-group:has(input[type="checkbox"]) > label { order: 2; font-weight: 400; }
.kv .kv-cdform .buttons-container { padding: 4px 0 0; background: none; }
.kv .kv-cdform .buttons-container .ty-btn { width: 100%; padding: 14px 22px; font-size: 15.5px; background: var(--brand); color: var(--brand-on, #101418); border-color: var(--brand); }
@media (max-width: 767px) { .kv .kv-cdform .ty-form-builder form { grid-template-columns: 1fr; } }
.kv .kv-cdform .ty-control-group > input[type="text"], .kv .kv-cdform .ty-control-group > textarea, .kv .kv-cdform .ty-control-group > select { width: 100% !important; max-width: none !important; }
.kv .kv-cdform .ty-control-group:has(> .ty-form-builder__radio-label) { display: flex; flex-wrap: wrap; gap: 8px; }
.kv .kv-cdform .ty-control-group:has(> .ty-form-builder__radio-label) > .ty-control-group__title { flex-basis: 100%; }
.kv .kv-cdform .ty-form-builder__radio-label { width: auto; }
/* Lite Checkout payment method card: B colours instead of the stock green */
.kv .litecheckout__shipping-method__wrapper, .kv .litecheckout__payment-methods .litecheckout__shipping-method { border-color: var(--line-2) !important; }
.kv .litecheckout__shipping-method__radio:checked + .litecheckout__shipping-method__wrapper, .kv .litecheckout__shipping-method--active .litecheckout__shipping-method__wrapper { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 255, 91, 46), .16) !important; }
.kv .litecheckout__shipping-method__title { color: var(--ink) !important; font-weight: 600; }
.kv .litecheckout__payment-instructions { background: none; padding: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.kv .litecheckout__submit-btn { color: var(--brand-on, #101418) !important; font-weight: 600; }
.kv .kv-complete { padding-bottom: 72px; }
.kv .kv-next { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); }
.kv .kv-next b { color: var(--ink); }

/* drawer utility links: ".drawer__panel nav a" (block, 12px 4px) outranked the B grid tiles */
.kv .drawer__panel nav .drawer__util a { display: flex; gap: 8px; align-items: center; padding: 10px 12px; }
.kv .cmdk input:focus-visible, .kv .cmdk__bar input:focus-visible { outline: none; box-shadow: none; }

/* License table: the account sidebar leaves less room than on B, so switch to the B card rows up to 1100 px */
@media (max-width: 1100px) {
  .ltable-wrap { border: 0; background: none; }
  .ltable thead { display: none; }
  .ltable, .ltable tbody, .ltable tr, .ltable td { display: block; }
  .ltable tr.lrow { border: 1px solid var(--line); border-radius: var(--r-3); background: #fff; margin-top: 12px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .ltable tr.lrow.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .ltable td { padding: 0; border: 0; background: none !important; }
  .ltable td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
  .ltable td.c-prod, .ltable td.c-key, .ltable td.c-act { grid-column: 1 / -1; }
  .ltable td.c-act .lact { justify-content: flex-start; flex-wrap: wrap; }
  .ltable tr.ldetail td { display: block; }
}

/* ---- Stripe card form (templates/addons/stripe/views/checkout/components/payments/card.tpl) ---- */
.kv .kv-checkout [data-ca-stripe-element="form"] { background: transparent; padding: 0; margin: 0; }
.kv .kv-checkout .litecheckout__group[data-ca-stripe-element="form"] { display: block; background: transparent; box-shadow: none; border: 0; padding: 0; }
.kv .kv-card { display: block; box-sizing: border-box; flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-3, 14px); padding: 20px 22px 18px; margin: .5rem; box-shadow: var(--shadow-1); float: none; width: auto; }
.kv .kv-card > * { width: auto; float: none; }
.kv .kv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kv .kv-card__title { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--font); color: var(--ink); }
.kv .kv-card__brands { display: inline-flex; gap: 6px; }
.kv .kv-card__brand { font: 500 11px/1 var(--mono); letter-spacing: .03em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; background: var(--bg-2); }
.kv .kv-card__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 14px; }
.kv .kv-card__f { margin: 0; padding: 0; min-width: 0; }
.kv .kv-card__f--number, .kv .kv-card__f--name { grid-column: 1 / -1; }
.kv .kv-card__f .ty-control-group__title { display: block; margin: 0 0 6px; padding: 0; }
.kv .kv-card__el, .kv .kv-card .litecheckout__input { display: block; width: 100%; box-sizing: border-box; min-height: 46px; padding: 13px 12px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2, 10px); transition: border-color .15s, box-shadow .15s; font: 400 15px/1.3 var(--font); }
.kv .kv-card .litecheckout__input { padding: 12px; }
.kv .kv-card__el.sc-field--focus, .kv .kv-card .litecheckout__input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-ring, rgba(255, 91, 46, .22)); outline: none; }
.kv .kv-card__el.sc-field--invalid, .kv .kv-card .error .kv-card__el { border-color: var(--bad, #a3231b); box-shadow: 0 0 0 3px rgba(163, 35, 27, .12); }
.kv .kv-card .cm-failed-label { color: var(--bad, #a3231b); }
.kv .kv-card__note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font: 400 13px/1.45 var(--font); color: var(--ink-3); }
.kv .kv-card__note .ico { flex: none; margin-top: 1px; color: var(--ok, #1d6b3a); }
@media (max-width: 767px) {
  .kv .kv-card { padding: 16px 14px; }
  .kv .kv-card__grid { grid-template-columns: 1fr 1fr; }
  .kv .kv-card__f--number, .kv .kv-card__f--name { grid-column: 1 / -1; }
  .kv .kv-card__grid > .kv-card__f:nth-child(4) { grid-column: 1 / -1; }
}
.kv .kv-card .kv-card__el { max-width: none; min-width: 0; width: 100%; }
.kv .kv-checkout .litecheckout__payment-methods + .litecheckout__group, .kv .kv-checkout .litecheckout__container > .litecheckout__group:has(> .litecheckout__group[data-ca-stripe-element="form"]) { background: transparent; box-shadow: none; }

/* ---- Help desk (kv_support_tickets): B tokens for the add-on's themeable properties ---- */
.kv .kv-support-tickets { --kv-st-ink: var(--ink); --kv-st-muted: var(--ink-3); --kv-st-line: var(--line); --kv-st-surface: #fff; --kv-st-soft: var(--bg-2); --kv-st-accent: var(--brand); --kv-st-mine: var(--paper, #F6F4EF); --kv-st-staff: #fff; --kv-st-radius: var(--r-3, 14px); font-family: var(--font); max-width: none; }
.kv .kv-support-tickets select, .kv .kv-support-tickets .kv-support-tickets__select { font: 400 15px/1.4 var(--font); color: var(--ink); background-color: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2, 10px); padding: 10px 12px; height: auto; max-width: 100%; }
.kv .kv-support-tickets select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-ring, rgba(255, 91, 46, .22)); }
.kv .kv-support-tickets .ty-btn__primary { background: var(--brand); color: var(--brand-on, #101418); }
/* support page contact form (views/pages/view.tpl + kv-store.js) */
.kv form[data-contact] .is-invalid { border-color: var(--bad, #a3231b); box-shadow: 0 0 0 3px rgba(163, 35, 27, .12); }
.kv form[data-contact] .kv-ticket-link { font-weight: 600; color: var(--ink); }
/* native file inputs (help desk attachments, form builder) */
.kv input[type="file"] { font: 400 14px/1.4 var(--font); color: var(--ink-2); max-width: 100%; }
.kv input[type="file"]::file-selector-button { font: 500 14px/1.2 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-2, 10px); padding: 9px 14px; margin-right: 12px; cursor: pointer; transition: background .15s; }
.kv input[type="file"]::file-selector-button:hover { background: var(--bg-2); }

/* ---- Legal pages (legal/*.md -> CMS pages, <div class="kv-legal prose">): one reading measure for every element ---- */
.kv .kv-legal { max-width: 76ch; }
.kv .kv-legal p, .kv .kv-legal ul, .kv .kv-legal ol, .kv .kv-legal table { max-width: none; }
.kv .kv-legal ul, .kv .kv-legal ol { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.kv .kv-legal ul { list-style: disc; }
.kv .kv-legal ol { list-style: decimal; }
.kv .kv-legal li { margin: 0 0 6px; padding-left: 2px; }
.kv .kv-legal li::marker { color: var(--ink-3); }
.kv .kv-legal h2 { margin-top: 32px; }
.kv .kv-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.kv .kv-legal table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; }
.kv .kv-legal th, .kv .kv-legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv .kv-legal th { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }

/* the payment method wrapper is white in core: let the card be the only panel, aligned with the other .5rem-gutter items */
.kv .kv-checkout .litecheckout__payment-method { background: transparent; }
.kv .kv-legal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-2, 10px); background: #fff; }
.kv .kv-legal .table-wrap table { margin: 0; min-width: 560px; }
.kv .kv-legal ul ul { margin: 6px 0 0; list-style: circle; }
/* B panel tables (support page services, response times): CS-Cart's table reset removes the edge padding */
.kv .panel > table.table th:first-child, .kv .panel > table.table td:first-child { padding-left: 18px; }
.kv .panel > table.table th:last-child, .kv .panel > table.table td:last-child { padding-right: 18px; }

/* ==== Visual review round (user feedback 2026-10-13) ==== */
/* store domain field: the "https://" prefix never wraps, the input takes the rest and never pushes past the border */
.kv .input-pre { min-width: 0; max-width: 100%; }
.kv .input-pre > span { white-space: nowrap; flex: none; }
.kv .input-pre .input { flex: 1 1 auto; min-width: 0; width: auto; }
/* product card meta: the editions sit on their own line, so a wrapped "·" never starts a line */
.kv .pcard__meta > span:not(.tag):not(.tnum) { flex-basis: 100%; }
.kv .pcard__meta > span:not(.tag):not(.tnum)::before { content: none; }
/* catalog "no match" state: a real empty panel instead of a bare line of text */
.kv [data-empty]:not([hidden]) { display: block; margin: 8px 0 0; padding: 40px 24px; text-align: center; font-size: 15px; color: var(--ink-2); background: #fff; border: 1px dashed var(--line-2); border-radius: 16px; }
.kv [data-empty] .linkbtn { font-size: 15px; margin-left: 4px; }
.kv-nobr { white-space: nowrap; }
/* search page: the field and the button share one height, the icon is centred in the field */
.kv .kv-search__form { max-width: 640px; align-items: stretch; }
.kv .kv-search__form .input { height: 44px; min-height: 44px; font-size: 15px; }
.kv .kv-search__form .ico { top: 50%; transform: translateY(-50%); left: 14px; }
.kv .kv-search__form .btn { height: 44px; min-height: 44px; padding-inline: 20px; }
/* search "no results": one centred composition (icon, heading, text, actions) */
.kv .kv-search .empty { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; background: #fff; color: var(--ink-2); margin-bottom: 48px; }
.kv .kv-search .empty h2 { font-size: 22px; color: var(--ink); margin-top: 8px; }
.kv .kv-search .empty p { margin: 0; max-width: 46ch; }
.kv .kv-search .empty .empty__actions { justify-content: center; flex-wrap: wrap; margin-top: 12px; }
/* package card in search results: the package colour band with its add-on icons instead of an empty image box */
.kv .kv-pkgmedia { position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--h1), var(--h2)); }
.kv .kv-pkgmedia .pkg__stack { height: auto; padding: 0; }
/* package product page: same band as the gallery stage (no "Real screenshot" bar, no zoom), larger icons */
.kv .gallery__stage.kv-pkgstage { padding-top: 0 !important; cursor: default; border-bottom: 1px solid var(--line); }
.kv .gallery__stage.kv-pkgstage::before, .kv .gallery__stage.kv-pkgstage::after { content: none; }
.kv .kv-pkgstage .pkg__stack img.pi { width: clamp(56px, 11vw, 96px); height: clamp(56px, 11vw, 96px); border-radius: 24%; }
.kv .kv-pkgstage .pkg__stack span { margin-left: clamp(-16px, -1.6vw, -8px); }
.kv .kv-pkgstage .pkg__stack span:first-child { margin-left: 0; }
.kv .kv-pkgmedia .pkg__save { position: absolute; right: 14px; top: 14px; font-weight: 650; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--ink); }
/* product head meta: the vertical separators dangled at the end of a wrapped line; spacing alone separates the items */
.kv .ph__meta .sep { display: none; }
.kv .ph__meta { gap: 8px 22px; }
/* product facts: the label column never breaks mid-word ("Teste / d on"), long values wrap instead */
.kv .side-facts dt { flex: none; white-space: nowrap; }
.kv .side-facts dd { min-width: 0; overflow-wrap: break-word; }
/* compatibility matrix: the CS-Cart table reset removed the edge padding, text touched the bordered box */
.kv table.matrix th, .kv table.matrix td { padding: 11px 14px; }
.kv table.matrix th:first-child, .kv table.matrix td:first-child { padding-left: 16px; }
.kv table.matrix th:last-child, .kv table.matrix td:last-child { padding-right: 16px; }
/* B fields over the Responsive base: core `input[type=text|password|tel|number]`, textarea and select rules (tan border,
   4px radius, 4px 8px padding, Open Sans) outranked `.input`, so e.g. the password field next to the e-mail field
   looked different. Same specificity as core (0,1,1) and loaded later; contextual B rules (0,2,0) still win. */
input.input, textarea.input, select.select { min-height: 38px; height: auto; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: var(--r-2); background-color: #fff; font-family: var(--font); font-size: 14.5px; color: var(--ink); }
textarea.input { min-height: 84px; }
select.select { padding-right: 32px; }
input.input:focus, textarea.input:focus, select.select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.pg-pwfield input.input { padding-right: 42px; }
/* disabled primary buttons ("Add selected" before anything is chosen): a neutral disabled fill, not washed-out orange */
.kv .btn--primary[disabled], .kv .btn--primary[disabled]:hover { opacity: 1; background: var(--bg-3); border-color: var(--line-2); color: var(--ink-3); box-shadow: none; }
/* consecutive tight sections share their padding only on the same background; where the background changes
   (white "alt" band <-> paper) the heading sat on the border line ("Ways to work with us", "Questions") */
.kv .section--tight.section--alt + .section--tight:not(.section--alt), .kv .section--tight:not(.section--alt) + .section--tight.section--alt { padding-top: 56px; }
@media (max-width: 767px) { .kv .section--tight.section--alt + .section--tight:not(.section--alt), .kv .section--tight:not(.section--alt) + .section--tight.section--alt { padding-top: 40px; } }
/* custom-development form: no empty description block above the first field; consent checkbox next to its text;
   the error line under it; the file uploader is a real button */
.kv .kv-cdform .ty-form-builder__description:empty, .kv .kv-cdform .ty-form-builder__description:not(:has(*:not(br))) { display: none; }
.kv .kv-cdform .ty-form-builder .ty-control-group:has(input[type="checkbox"]) { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 4px 10px; }
.kv .kv-cdform .ty-form-builder .ty-control-group:has(input[type="checkbox"]) > input[type="checkbox"] { grid-column: 1; grid-row: 1; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.kv .kv-cdform .ty-form-builder .ty-control-group:has(input[type="checkbox"]) > label { grid-column: 2; grid-row: 1; padding: 0; font: 400 14px/1.4 var(--font); color: var(--ink-2); }
.kv .kv-cdform .ty-form-builder .ty-control-group:has(input[type="checkbox"]) > .help-inline { grid-column: 2; grid-row: 2; }
.kv .kv-cdform .ty-control-group .help-inline { margin: 2px 0 0; font: 400 13px/1.4 var(--font); color: var(--bad); }
.kv .kv-cdform .ty-control-group .help-inline p { margin: 0; }
.kv .kv-cdform .ty-fileuploader__a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: #fff; font: 500 14px/1.2 var(--font); color: var(--ink); text-decoration: none; cursor: pointer; }
.kv .kv-cdform .ty-fileuploader__a:hover { background: var(--bg-2); }
.kv .kv-cdform .ty-fileuploader__a::before { content: ""; width: 16px; height: 16px; background: 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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* wide matrices (about: release checklist, 16 add-on columns): a horizontal scroller with readable columns and a
   sticky first column instead of 16 squeezed columns, 5-line headers and a clipped right edge */
.kv .matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-4, 20px); background: #fff; }
.kv .matrix-wrap > .matrix { border: 0; border-radius: 0; }
.kv .matrix-wrap .matrix:has(thead th:nth-child(8)) { width: max-content; min-width: 100%; }
.kv .matrix-wrap .matrix:has(thead th:nth-child(8)) thead th { min-width: 132px; max-width: 160px; white-space: normal; vertical-align: bottom; line-height: 1.3; }
.kv .matrix-wrap .matrix:has(thead th:nth-child(8)) td { white-space: nowrap; }
.kv .matrix-wrap .matrix:has(thead th:nth-child(8)) tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 190px; box-shadow: 1px 0 0 var(--line); }
.kv .matrix-wrap .matrix:has(thead th:nth-child(8)) thead tr > :first-child { background: var(--bg-2); }
/* about: release history, the date column no longer takes half of the table */
.kv table.log th:first-child, .kv table.log td.date { width: 128px; white-space: nowrap; }
.kv table.log th:first-child, .kv table.log td:first-child { padding-left: 14px; }
.kv table.log th:last-child, .kv table.log td:last-child { padding-right: 14px; }
@media (max-width: 767px) { .kv table.log td:first-child { padding-left: 0; } .kv table.log th:first-child, .kv table.log td.date { width: auto; } }
/* data tables: every cell starts on the same baseline (CS-Cart centred some cells vertically, e.g. licensing editions) */
.kv table.table th, .kv table.table td { vertical-align: top; }
/* CS-Cart validation messages in the B style: 13px under the field (they were 16px with a bold field name and wrapped
   badly in narrow columns), and the failed field gets the red border */
.kv .help-inline p { margin: 0; padding: 6px 0 0; font: 400 13px/1.4 var(--font); color: var(--bad) !important; }
.kv .help-inline p b, .kv .help-inline p strong { font-weight: 600; }
.kv input.cm-failed-field, .kv select.cm-failed-field, .kv textarea.cm-failed-field, .kv .cm-failed-field input.input, .kv .cm-failed-field textarea { border-color: var(--bad); }
/* profile forms: first and last name share the row exactly (core 47% + 4.8% + inline-block gap left the last name 6px
   short of the full-width fields) */
@media (min-width: 768px) {
  .kv .ty-profile-field__item.ty-first-name, .kv .ty-profile-field__item.ty-last-name { display: block; float: left; width: calc(50% - 8px); margin-left: 0; }
  .kv .ty-profile-field__item.ty-first-name + .ty-profile-field__item.ty-last-name { float: right; margin-left: 0; }
  .kv .ty-profile-field__item.ty-last-name + * { clear: both; }
}
/* phone with country selection: the flag button is part of the field (same height, border and radius) */
.kv .ty-input-append--phone-mask { display: flex; align-items: stretch; }
.kv .ty-input-append--phone-mask .ty-input-phone { flex: 1 1 auto; min-width: 0; border-radius: var(--r-2) 0 0 var(--r-2); }
.kv .ty-input-append--phone-mask .ty-btn-group--phone-mask { display: flex; }
.kv .ty-input-append--phone-mask .ty-select-block__a--phone-mask { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 var(--r-2) var(--r-2) 0; background: #fff; box-sizing: border-box; }
/* checkout floating labels: label and value had no room (label 2px from the top edge over a 15px value, label 6px from
   the left while the text starts at 12px). Fixed padding in every state, label aligned with the value. */
.kv .litecheckout .litecheckout__input:has(+ .litecheckout__label) { min-height: 54px; padding: 24px 12px 8px; font-size: 15px; line-height: 1.4; }
.kv .litecheckout textarea.litecheckout__input:has(+ .litecheckout__label) { padding-top: 26px; min-height: 120px; }
.kv .litecheckout .litecheckout__input + .litecheckout__label { top: 8px; left: 13px; width: calc(100% - 26px); font: 500 12px/1.3 var(--font); color: var(--ink-3); }
.kv .litecheckout .litecheckout__input:placeholder-shown:not(:focus):not(:focus-within) + .litecheckout__label { top: 17px; font-size: 15px; font-weight: 400; color: var(--ink-3); }
.kv .litecheckout textarea.litecheckout__input:placeholder-shown:not(:focus) + .litecheckout__label { top: 16px; }
.kv .ty-input-append--phone-mask .litecheckout__input { border-radius: var(--r-2) 0 0 var(--r-2); }
/* terms checkbox: regular weight sentence, the link stays the emphasis */
.kv .litecheckout__terms label, .kv .litecheckout__terms .ty-checkbox-label { font-weight: 400; }
/* option lines (checkout summary, order pages): a long store domain never breaks at its hyphens; it moves to its own
   line and is ellipsised only if it is wider than the column */
.kv .ty-product-options { display: flex; flex-wrap: wrap; column-gap: 4px; }
.kv .ty-product-options-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; }
/* empty states with an icon tile (404/403, search without results): one centred composition */
.kv .empty:has(> .tile) { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; background: #fff; }
.kv .empty:has(> .tile) .empty__actions { justify-content: center; flex-wrap: wrap; }
.kv .empty:has(> .tile) > p { margin: 0; max-width: 56ch; }
/* orders list (theme views/orders/search.tpl) */
.kv .kv-otable-wrap { margin-top: 22px; }
.kv .kv-otable th:first-child, .kv .kv-otable td:first-child { padding-left: 16px; }
.kv .kv-otable th:last-child, .kv .kv-otable td:last-child { padding-right: 16px; }
.kv .kv-otable td { vertical-align: middle; }
.kv .kv-otable td.mono a { font-weight: 600; color: var(--ink); text-decoration: none; }
.kv .kv-otable td.mono a:hover { text-decoration: underline; }
.kv .kv-nowrap { white-space: nowrap; }
.kv .kv-otable__items { min-width: 220px; color: var(--ink); line-height: 1.5; }
.kv .kv-otable__act { white-space: nowrap; }
.kv .kv-otable__act .btn + .btn { margin-left: 6px; }
.kv .kv-otable__empty { display: grid; justify-items: center; gap: 6px; padding: 32px 12px; text-align: center; color: var(--ink-2); }
.kv .kv-otable__empty .btn { margin-top: 8px; }
.kv .kv-otable__hint { margin-top: 14px; }
.kv .summary b a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
/* profile/register selects (country, state): same height and width as the text fields next to them */
.kv select.ty-profile-field__select, .kv .ty-profile-field__item select { min-height: 43px; height: auto; width: 100%; max-width: none; padding: 10px 36px 10px 12px; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%233e464c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; }
/* downloads: package file names never break inside the name ("kv_b2b_quote_request-" / "1.0.0.zip") */
.kv .kv-store-downloads .pg-vtable td.mono { white-space: nowrap; }
.kv .kv-store-downloads .pg-vtable td.mono:first-child { width: 1%; }
/* account overview "Needs attention": rows have no meta column (B has one), so the Manage button sits right of the text
   instead of in a 190px meta column; on phones it goes under the text */
.kv .kv-store-dashboard .pg-arow { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 760px) { .kv .kv-store-dashboard .pg-arow { grid-template-columns: auto minmax(0, 1fr); } }
/* downloads table (fixed layout from 761px): narrow version, date and button columns, the package name gets the rest
   (the B widths 30/17/19/16 % pushed long package names under the download button at tablet widths) */
@media (min-width: 761px) {
  .kv .kv-store-downloads .pg-vtable th:nth-child(1) { width: 9.5em; }
  .kv .kv-store-downloads .pg-vtable th:nth-child(2) { width: 9.5em; }
  .kv .kv-store-downloads .pg-vtable th:nth-child(3) { width: auto; }
  .kv .kv-store-downloads .pg-vtable th:nth-child(4) { width: 72px; }
  .kv .kv-store-downloads .pg-vtable td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }
}
/* downloads: the sites (domain, edition, update period) of an add-on's licenses, between the panel head and the versions */
.kv .pg-dl__sites { list-style: none; margin: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
.kv .pg-dl__sites li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 6px 18px; font-size: 13.5px; }
.kv .pg-dl__sites li > :first-child { overflow-wrap: anywhere; color: var(--ink); }
.kv .pg-dl__sites li > .muted:first-child { color: var(--ink-3); }
.kv .pg-dl__sites .tag { justify-self: end; white-space: nowrap; }
@media (max-width: 760px) {
  .kv .pg-dl__sites li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 16px; }
  .kv .pg-dl__sites li > :first-child { grid-column: 1 / -1; }
}
.kv .ty-pagination__text { color: var(--ink-3); }
/* home FAQ cards: the question text ran under the chevron (r3 summary padding dropped the right gutter) */
.kv .faq--r3 summary { padding-right: 34px; }
.kv .faq--r3 summary::after { right: 4px; }
/* touch widths: filter rows are 40px tap targets */
@media (max-width: 1023px) { .kv .fopt { min-height: 40px; padding: 0; } }
/* phones: the breadcrumb keeps to one line (the current page is the heading right below it); a wrapped trail started
   its second line with a "/" */
@media (max-width: 767px) {
  .kv .crumbs ol { flex-wrap: nowrap; overflow: hidden; }
  .kv .crumbs li { flex: none; white-space: nowrap; }
  .kv .crumbs li[aria-current] { display: none; }
}
/* packages page on phones: a list of all six packages, not a sideways carousel showing one and a sliver */
@media (max-width: 767px) {
  .kv .pkgs.kv-pkgs-page { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; gap: 16px; }
}
.kv .kv-pkgs-page { margin-bottom: 56px; }
/* cart: a long store domain stays inside the item column (ellipsis, full value in the title) */
.kv .kv-tag--domain { max-width: 100%; min-width: 0; }
.kv .kv-tag--domain .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* checkout payment cards: 130 px fixed core height for two short lines; 96 px desktop, 76 px phones */
.kv .kv-checkout .litecheckout__payment-methods .litecheckout__shipping-method, .kv .kv-checkout .litecheckout__payment-methods .litecheckout__shipping-method__wrapper { height: 96px; }
@media (max-width: 767px) { .kv .kv-checkout .litecheckout__payment-methods .litecheckout__shipping-method, .kv .kv-checkout .litecheckout__payment-methods .litecheckout__shipping-method__wrapper { height: 76px; } }
/* Stripe Checkout card: official payment marks above its name (common/kv/pay_marks.tpl, pays--tile), 34 px row.
   Visa / Mastercard in equal hairline chips, Amex Blue Box, Apple Pay mark and Google Pay pill self-contained (no chip).
   Both payment cards grow together on desktop; on phones the Stripe card takes its own height. */
.kv .kv-checkout .litecheckout__group:has(.pays--tile) .litecheckout__shipping-method,
.kv .kv-checkout .litecheckout__group:has(.pays--tile) .litecheckout__shipping-method__wrapper { height: 150px; }
.kv .kv-checkout .litecheckout__group:has(.pays--tile) .litecheckout__shipping-method__wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kv .pays.pays--tile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.kv .pays--tile .pay { width: 54px; height: 34px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #DCDFE4; overflow: hidden; }
.kv .pays--tile .pay--visa img { height: 14px; width: auto; }
.kv .pays--tile .pay--mastercard img { height: 24px; width: auto; }
.kv .pays--tile .pay--amex { width: 34px; box-shadow: none; background: transparent; border-radius: 4px; }
.kv .pays--tile .pay--amex img { width: 34px; height: 34px; border-radius: 4px; }
.kv .pays--tile .pay--applepay, .kv .pays--tile .pay--googlepay { width: auto; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.kv .pays--tile .pay--applepay img, .kv .pays--tile .pay--googlepay img { height: 34px; width: auto; }
.kv .pays--tile .pay--paypal img { height: 14px; width: auto; }
.kv .pays--tile img { display: block; }
@media (max-width: 767px) {
  .kv .kv-checkout .litecheckout__group:has(.pays--tile) .litecheckout__shipping-method,
  .kv .kv-checkout .litecheckout__group:has(.pays--tile) .litecheckout__shipping-method__wrapper { height: auto; }
  .kv .kv-checkout .litecheckout__group:has(.pays--tile) .litecheckout__shipping-method__wrapper { min-height: 76px; padding-top: 16px; padding-bottom: 16px; }
  .kv .pays.pays--tile { gap: 5px; margin-bottom: 10px; }
}
/* custom-development form: one inner padding (the panel's 28px plus the body's 24px squeezed the fields) */
.kv .cdform.kv-cdform { padding: 0; }
.kv .kv-cdform .cdform__body { padding: 28px; }
@media (max-width: 767px) { .kv .kv-cdform .cdform__body { padding: 18px; } }
/* support tables on phones: rows become cards (request / reply / included), no squeezed 3-column grid */
@media (max-width: 599px) {
  .kv .panel > table.table thead { display: none; }
  .kv .panel > table.table, .kv .panel > table.table tbody, .kv .panel > table.table tr, .kv .panel > table.table td, .kv .panel > table.table th { display: block; width: auto; }
  .kv .panel > table.table tr { padding: 12px 18px; border-bottom: 1px solid var(--line); }
  .kv .panel > table.table tr:last-child { border-bottom: 0; }
  .kv .panel > table.table td, .kv .panel > table.table th { padding: 2px 0 !important; border: 0; }
  .kv .panel > table.table td:first-child, .kv .panel > table.table th:first-child { font-weight: 600; color: var(--ink); padding-bottom: 4px !important; }
  .kv .panel > table.table td:not(:first-child) { color: var(--ink-2); }
}
@media (max-width: 599px) {
  .kv .panel > table.table td:not(:first-child)[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 13px; }
}
.kv .empty:has(> .tile) h1, .kv .empty:has(> .tile) h2 { color: var(--ink); }
.kv .empty:has(> .tile) > p:not(.empty__actions) { color: var(--ink-2); }
/* headings and card titles: balanced lines, no single orphan word on the last line */
.kv h1, .kv h2, .kv h3, .kv .th__name, .kv .card__name, .kv .fcard__name, .kv .pg-bundle__name { text-wrap: balance; }
.kv p, .kv .card__sum, .kv .fcard__sum { text-wrap: pretty; }
/* home "Browse add-ons" tiles: name at the top, version/price row pinned to the bottom, so every tile in a row has the
   same baselines whatever the name length */
.kv .btile:not(.btile--all):not(.btile--req) { grid-template-rows: 1fr auto; align-items: start; }
.kv .btile:not(.btile--all):not(.btile--req) .pi { align-self: center; }
.kv .btile:not(.btile--all):not(.btile--req) .btile__meta { align-self: end; }
/* a page that ends with a full-width dark band (home CTA) meets the dark footer directly, without a 40px paper strip */
.kv .kvc--content:has(> .kvrow:last-child .cta:last-child) { padding-bottom: 0; }
/* FAQ cards (r3): no stray top rule above the first card */
.kv .faq--r3 { border-top: 0; }
/* product gallery: the "browser bar" strip belongs to real screenshots only; covers fill the stage edge to edge */
.kv .gallery__stage.is-cover { padding-top: 0 !important; }
.kv .gallery__stage.is-cover::before { content: none; }
.kv .gallery__stage.is-cover img { object-fit: cover; }
@media (max-width: 767px) { .kv table.matrix th, .kv table.matrix td { padding: 9px 10px; } }
/* registration: form on the left, "What you get" on the right (the right half of the page was empty) */
.kv .kv-account.kv-page:has(.kv-account__side .kv-reg-side) { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 0 56px; }
.kv .kv-account.kv-page:has(.kv-account__side .kv-reg-side) .kv-account__side { display: block; grid-column: 2; grid-row: 2; position: static; padding-top: 88px; }
.kv .kv-account.kv-page:has(.kv-account__side .kv-reg-side) .kv-account__main { grid-column: 1; grid-row: 2; max-width: none; }
.kv .kv-reg-side__alt { font-size: 14px; }
@media (max-width: 900px) {
  .kv .kv-account.kv-page:has(.kv-account__side .kv-reg-side) { grid-template-columns: minmax(0, 1fr); }
  .kv .kv-account.kv-page:has(.kv-account__side .kv-reg-side) .kv-account__side { grid-column: 1; grid-row: 3; padding-top: 32px; }
}
/* "Frequently bought together": a planned add-on has no buy row, so no empty divider either */
.kv .fbt__buy:empty { display: none; }
/* support plans (3 cards): in the two-column range the third card spans the row instead of leaving a hole */
@media (max-width: 1024px) and (min-width: 761px) { .kv .pg-plans > :nth-child(3):last-child { grid-column: 1 / -1; } }
/* checkout summary: the order total is the strongest line and its amount lines up with the amounts above
   (the core <th> kept 20px of table padding on the right and a grey, light label) */
.kv .ty-checkout-summary__total { padding: 14px 0 6px !important; font: 600 17px/1.3 var(--font); color: var(--ink); text-align: left; }
.kv .ty-checkout-summary__total > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kv .ty-checkout-summary__total-sum { float: none; font-weight: 700; }
/* phone country button: no stray underline under the caret */
.kv .ty-select-block__a--phone-mask, .kv .ty-select-block__a--phone-mask .ty-select-block__arrow { border-bottom: 0; text-decoration: none; box-shadow: none; }
/* order page (theme views/orders/details.tpl) */
.kv .kv-order { padding-bottom: 56px; }
.kv .kv-order__head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kv .kv-order__status { font-size: 13px; height: 26px; letter-spacing: 0; }
.kv .kv-order__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kv .kv-order__actions .ty-btn, .kv .kv-order__actions .ty-btn__text { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: #fff; color: var(--ink); font: 500 14px/1 var(--font); text-decoration: none; }
.kv .kv-order__actions .ty-btn:hover { background: var(--bg-2); }
.kv .kv-order__actions .ty-icon { font-size: 14px; color: var(--ink-2); }
.kv .kv-order__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; margin-top: 24px; align-items: start; }
.kv .kv-order__side { display: grid; gap: 20px; }
.kv .kv-order__list { list-style: none; margin: 0; padding: 0; }
.kv .kv-order__item { padding: 18px 20px; border-top: 1px solid var(--line); }
.kv .kv-order__item:first-child { border-top: 0; }
.kv .kv-order__item-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.kv .kv-order__name { font-size: 16px; font-weight: 600; }
.kv .kv-order__name a { color: var(--ink); text-decoration: none; }
.kv .kv-order__name a:hover { text-decoration: underline; }
.kv .kv-order__price { font-weight: 600; white-space: nowrap; }
.kv .kv-order__qty { margin: 2px 0 0; font-size: 13.5px; }
.kv .kv-order__opts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kv .kv-order__opts .ty-product-options { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: 12.5px; color: var(--ink-2); max-width: 100%; }
.kv .kv-order__opts .ty-product-options-name { color: var(--ink-3); }
.kv .kv-order__item .kv-store-order-keys { margin-top: 14px; }
.kv .kv-order__sum { margin: 0; padding: 6px 20px 14px; }
.kv .kv-order__sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv .kv-order__sum > div:last-child { border-bottom: 0; }
.kv .kv-order__sum dt { color: var(--ink-3); flex: none; }
.kv .kv-order__sum dd { margin: 0; text-align: right; color: var(--ink); min-width: 0; }
.kv .kv-order__total dt, .kv .kv-order__total dd { color: var(--ink); font-weight: 700; font-size: 16px; }
.kv .kv-order__pay { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.kv .kv-order__email { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .kv .kv-order__grid { grid-template-columns: minmax(0, 1fr); } .kv .kv-order__side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kv .kv-order__side { grid-template-columns: 1fr; } .kv .kv-order__item { padding: 16px; } .kv .kv-order__sum { padding: 4px 16px 12px; } }
.kv select.ty-profile-field__select, .kv .ty-profile-field__item select { border: 1px solid var(--line-2); border-radius: var(--r-2); font: 400 15px/1.4 var(--font); color: var(--ink); }
.kv .ty-profile-field__item.ty-billing-country, .kv .ty-profile-field__item.ty-shipping-country { width: 100%; display: block; }
/* core section subheaders (profile, register) in Ink instead of the Responsive slate blue */
.kv .ty-subheader { color: var(--ink); font: 600 18px/1.3 var(--font); letter-spacing: -0.01em; border-bottom: 0; padding-bottom: 0; margin: 28px 0 12px; }
/* hero carousel tabs: labels are never truncated ("Cart recov…", "Commissi…"); each tab is as wide as its label and the
   strip scrolls sideways when the five do not fit */
.kv .th__tabs button { flex: 1 0 auto; min-width: 0; }
.kv .th__tab-txt b { overflow: visible; text-overflow: clip; }
/* FBT price pair (struck list price + discounted price) stays on one line */
.kv .fbt__price { white-space: nowrap; }
/* FBT between phone and desktop (761-1100px): four cards in one row left 130px per card, so the "Add to order" button
   ran past its card at 768. Two cards per row instead (the "+" signs go, a lone last card spans the row). */
@media (max-width: 1100px) and (min-width: 761px) {
  .kv .fbt__row { flex-wrap: wrap; }
  .kv .fbt__plus { display: none; }
  .kv .fbt__item, .kv .fbt__item--this { flex: 1 1 calc(50% - 6px); }
}
/* hero eyebrow row (Built for chip + edition line) wraps instead of running 22px past the viewport at 768 */
.kv .hero2__eco { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
.kv .hero2__eco .eyebrow { flex-wrap: wrap; white-space: normal; min-width: 0; }
/* orders list below 1100px: no sideways scrolling; the order number links to the order, so "View" goes; the date sits
   under the number. Phones: each order is a card. */
@media (max-width: 1100px) {
  .kv .kv-otable__act .btn:first-child { display: none; }
  .kv .kv-otable th:nth-child(2), .kv .kv-otable td:nth-child(2) { display: none; }
}
@media (max-width: 640px) {
  .kv .kv-otable thead { display: none; }
  .kv .kv-otable, .kv .kv-otable tbody { display: block; }
  .kv .kv-otable tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .kv .kv-otable tr:last-child { border-bottom: 0; }
  .kv .kv-otable td { display: block; padding: 0 !important; border: 0; }
  .kv .kv-otable td:nth-child(2) { display: none; }
  .kv .kv-otable__items { grid-column: 1 / -1; min-width: 0; }
  .kv .kv-otable td.n { text-align: right; }
  .kv .kv-otable__act { grid-column: 1 / -1; text-align: left !important; }
}
.kv .kv-checkout .litecheckout__shipping-method__wrapper { width: 100%; box-sizing: border-box; }
/* product tabs on phones: the strip scrolls; a soft fade at the right edge shows there is more instead of a hard cut */
@media (max-width: 767px) {
  .kv .pdp__main > .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
}
.kv .mega__grid--r3 .mega__built { grid-template-columns: 1fr; }
.kv .mega__built b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Available now" cards on phones: the name gets the full width (the version tag beside it squeezed
   "Abandoned / Cart / Recovery Pro" into three lines); the tag moves under the category line */
@media (max-width: 600px) {
  .kv .fcard__top { flex-wrap: wrap; align-items: flex-start; }
  .kv .fcard__top > div { flex: 1 1 calc(100% - 60px); }
  .kv .fcard__top > .tag { order: 3; margin-left: 60px; }
  .kv .fcard--lead .fcard__name { font-size: 21px; }
}
/* "Notify me at launch" form: label, field, error, button and hint were stacked without spacing (button touched the field) */
.kv .kv-notify { display: grid; gap: 8px; }
.kv .kv-notify .label, .kv .kv-notify .err, .kv .kv-notify .hint { margin: 0; }
.kv .kv-notify .label { margin-bottom: -2px; }
.kv .kv-notify .btn { margin-top: 4px; }
/* docs pages (licensing, legal) on phones: the single grid column grew to the editions table's min-content and pushed
   the summary card and table 7px into the right gutter; let the column shrink and tighten the table cells instead */
@media (max-width: 1024px) { .kv .doc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .kv .doc .kv-table th, .kv .doc .kv-table td { padding: 8px 6px; }
  .kv .doc .kv-table th:first-child, .kv .doc .kv-table td:first-child { padding-left: 10px; }
  .kv .doc .kv-table th:last-child, .kv .doc .kv-table td:last-child { padding-right: 10px; }
}
/* legal tables on phones: two-column tables fit the screen (no 560px scroller that cut words at the edge); wider tables
   keep the scroller and get edge shadows so the cut column reads as "scroll for more" */
.kv .kv-legal .table-wrap table:not(:has(tr > :nth-child(3))) { min-width: 0; }
.kv .kv-legal .table-wrap {
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 20, 24, .16), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 20, 24, .16), transparent) right center / 14px 100% no-repeat scroll,
    #fff;
}
/* cart line "Remove": the button is outlined in this theme, so the -8px optical offset of a borderless quiet button
   pushed it out of line with the option chips above */
.kv .pg-cline__acts { margin-left: 0; }
/* product "How it works" panels: the prose h3 top margin pushed the panel titles off-centre in their header bar, and
   three panels left an orphan in a two-column grid; three panels sit in one row where there is room */
.kv .howto .panel__head h3 { margin: 0; }
@media (min-width: 761px) { .kv .howto:has(> .panel:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* footer newsletter on tablets: the copy column shrank to ~260px and the heading broke into three lines next to a wide
   empty field; stack it below 900px like on phones */
@media (max-width: 900px) { .kv .ftr__news { grid-template-columns: 1fr; padding: 48px 0 36px; } .kv .ftr__news > :last-child { max-width: 520px; } }
/* the typographic no-break wrapper must stay invisible: descendant rules such as ".otile__ex span" (chip padding and
   tint) also matched it and split "Customer-Specific Price Lists" into two chips */
.kv span.kv-nobr { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; font-size: inherit !important; }
/* downloads on phones: a long package name (nowrap) widened the first grid column and squeezed the release date into
   three lines; the date keeps one line and the file name spans the row */
@media (max-width: 760px) {
  .kv .pg-vtable td.tnum { white-space: nowrap; }
  .kv .pg-vtable tr > td:nth-child(3) { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
  .kv .kv-store-downloads .pg-vtable td.mono:first-child { width: auto; }
  /* the per-version download button (4th cell, hidden by the B phone layout) stays: right of version, date and file */
  .kv .kv-store-downloads .pg-vtable tr { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .kv .kv-store-downloads .pg-vtable tr > td:nth-child(3) { grid-column: 1 / 3; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .kv .kv-store-downloads .pg-vtable td.n { display: block; grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
/* product pages end with the white "Also from Kavio Labs" band: no 40px paper strip between it and the dark footer */
.kv .kvc--content:has(section.section--alt[aria-labelledby="also-h"]) { padding-bottom: 0; }
.kv section.section--alt[aria-labelledby="also-h"] { border-bottom: 0; }
/* ---------- themes (batch 1, 2026-10-16): themes page, home section, theme product page ---------- */
.kv .kv-thlist { display: grid; gap: 24px; margin-bottom: 24px; }
.kv .kv-thcard .tfan3 { height: 400px; }
.kv .kv-thcard .tfan img { aspect-ratio: 16 / 10; object-fit: cover; }
.kv .kv-thpresets li { grid-template-columns: 22px minmax(0, auto) 1fr; }
.kv .kv-thpresets__demo { justify-self: end; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kv .kv-thpresets__demo:hover { color: var(--ink); }
.kv .kv-hthemes__list { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; }
.kv .kv-hthemes__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.kv .kv-hthemes__ico, .kv .kv-thicon--sm { width: 40px; height: 40px; border-radius: 10px; display: block; }
.kv .kv-hthemes__body { display: grid; gap: 2px; min-width: 0; }
.kv .kv-hthemes__body a { text-decoration: none; }
.kv .kv-hthemes__body > span { font-size: 13px; color: var(--ink-3); }
.kv .kv-hthemes .tfan img { aspect-ratio: 16 / 10; object-fit: cover; }
.kv .kv-thicon { width: 64px; height: 64px; border-radius: 16px; display: block; flex: none; }
.kv .kv-phcta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; grid-column: 1 / -1; }
.kv .kv-phcta .muted { font-size: 13px; }
.kv .kv-demo-btn { margin-top: 10px; }
.kv .kv-demo-btn .muted { font-weight: 400; }
.kv .kv-styles { margin-top: 28px; }
.kv .kv-styles h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 14px; }
.kv .kv-styles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kv .kv-style { display: grid; gap: 8px; padding: 8px 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: box-shadow .2s, border-color .2s, transform .2s; }
.kv .kv-style:hover { box-shadow: var(--shadow-2); border-color: var(--line-2, #cfc9bd); transform: translateY(-2px); }
.kv .kv-style__img { display: block; border-radius: 9px; overflow: hidden; background: var(--paper); }
.kv .kv-style__img img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.kv .kv-style__name { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 14px; }
.kv .kv-style__name .sw { width: 16px; height: 16px; border-radius: 5px; }
.kv .kv-style__name .tag { margin-left: auto; }
/* phones: the "Default" tag goes to its own line instead of breaking the style name (2026-10-17) */
@media (max-width: 480px) { .kv .kv-style__name { flex-wrap: wrap; row-gap: 4px; } .kv .kv-style__name b { white-space: nowrap; } .kv .kv-style__name .tag { margin-left: 0; } }
.kv .kv-style__go { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kv .kv-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
.kv .kv-preset { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); }
.kv .kv-preset:hover { box-shadow: var(--shadow-2); }
.kv .kv-preset__img img { display: block; width: 120px; height: 96px; object-fit: cover; border-radius: 9px; margin: 0; }
.kv .kv-preset__body { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.kv .kv-preset__body b { color: var(--ink); }
.kv .kv-preset__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink); }
@media (max-width: 1100px) { .kv .kv-styles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kv .kv-thcard .tfan3, .kv .kv-hthemes .tsec__fan { height: 240px; }
  .kv .kv-presets { grid-template-columns: 1fr; }
  .kv .kv-preset { grid-template-columns: 96px minmax(0, 1fr); }
  .kv .kv-preset__img img { width: 96px; height: 77px; }
  .kv .kv-thicon { width: 52px; height: 52px; border-radius: 13px; }
  .kv .kv-hthemes__list li { grid-template-columns: 40px minmax(0, 1fr); }
  .kv .kv-hthemes__demo { grid-column: 2; justify-self: start; }
  .kv .kv-phcta .btn { flex: 1 1 auto; justify-content: center; }
}
/* themes page, stacked card (tablet/phone): the fan of style images is 62% of the visual's width; on a full-width
   visual it grew taller than its box and covered the tags and the theme name, so the visual keeps a fan-sized width */
@media (max-width: 1100px) { .kv .kv-thcard .thcard__visual { width: 100%; max-width: 620px; justify-self: center; } .kv .kv-thcard .tfan3 { height: 400px; } }
@media (max-width: 760px) { .kv .kv-thcard .tfan3, .kv .kv-hthemes .tsec__fan { height: 290px; } }
/* ---------- themes showcase (batch 2 + Atlas, 2026-10-16): home "Themes" section + Themes page ----------
   common/kv/theme_show.tpl + theme_tile.tpl. A tile = a stage tinted by the active style (ground + accent, the Kavio
   module disc in the accent) with HTML device frames around the real home page at 1440 and 390, then name, price,
   niche, style swatches (switch the preview), editions and niche tags, Live demo + View theme. */
@property --ac { syntax: "<color>"; inherits: true; initial-value: #ff5b2e; }
@property --gr { syntax: "<color>"; inherits: true; initial-value: #f6f4ef; }
.kv .kvthsec { position: relative; overflow: hidden; }
.kv .kvthsec__bg { position: absolute; inset: 0 0 auto 0; height: 620px; pointer-events: none;
  background-image: radial-gradient(rgba(16, 20, 24, .13) 1.1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.kv .kvthsec .wrap { position: relative; }
.kv .kvthsec__head h2 { max-width: 16ch; }
.kv .kvthsec__perks, .kv .kvtt__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kv .kvthsec__perks li, .kv .kvtt__perks li { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 550; color: var(--ink); }
.kv .kvthsec__perks .ico, .kv .kvtt__perks .ico { color: #B23A14; }
.kv .kvthsec__perks--page { margin: -6px 0 26px; }
.kv .kvthsec__foot { display: flex; justify-content: center; margin-top: 40px; }

.kv .kvts__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.kv .kvts__chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 7px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--spring); }
.kv .kvts__chip:hover { border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); }
.kv .kvts__chip .n { font: 500 11.5px/1 var(--mono); padding: 5px 7px; border-radius: 999px; background: var(--paper); color: var(--ink-3); }
.kv .kvts__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kv .kvts__chip[aria-pressed="true"] .n { background: rgba(255, 255, 255, .16); color: #fff; }
.kv .kvts__chip:focus-visible, .kv .kvtt__sw:focus-visible { outline: none; box-shadow: var(--focus); }
.kv .kvts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kv .kvts__empty { margin: 24px 0 0; color: var(--ink-3); }
.kv .kvts__reset { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; }

.kv .kvtt { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 26px; background: #fff; border: 1px solid var(--line); overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .35s, --ac .5s, --gr .5s; }
.kv .kvtt:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.kv .kvtt[hidden] { display: none; }
.kv .kvtt__stage { position: relative; display: block; aspect-ratio: 16 / 10.4; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, var(--gr) 84%, var(--ac)); }
.kv .kvtt__stage::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--ac) 55%, transparent) 1.3px, transparent 1.5px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, transparent 35%, #000 100%); mask-image: linear-gradient(200deg, transparent 35%, #000 100%); }
.kv .kvtt__glow { position: absolute; z-index: -1; right: -9%; top: -20%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--ac); transition: transform .8s var(--ease-out); }
.kv .kvtt:hover .kvtt__glow { transform: scale(1.06) translate(-2%, 3%); }
.kv .kvtt__desk { position: absolute; left: 7%; top: 13%; width: 74%; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 28px 56px -22px rgba(16, 20, 24, .5), 0 0 0 1px rgba(16, 20, 24, .08); transition: transform .7s var(--ease-out); }
.kv .kvtt__bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: #F3F1EC; border-bottom: 1px solid rgba(16, 20, 24, .07); }
.kv .kvtt__bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #E2DED6; }
.kv .kvtt__bar i:first-child { background: #FF6B57; }
.kv .kvtt__bar i:nth-child(2) { background: #FFC23D; }
.kv .kvtt__bar i:nth-child(3) { background: #3DC86A; }
.kv .kvtt__addr { margin-left: 10px; min-width: 0; max-width: 60%; height: 15px; padding: 0 8px; border-radius: 8px; background: #fff; font: 500 9.5px/15px var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .kvtt__desk img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: opacity .25s; }
.kv .kvtt__phone { position: absolute; right: 6%; bottom: -7%; width: 21%; padding: 5px; border-radius: 22px; background: #101418;
  box-shadow: 0 26px 44px -16px rgba(16, 20, 24, .6); transition: transform .7s var(--ease-out); }
.kv .kvtt__phone img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 650; object-fit: cover; object-position: top center; border-radius: 17px; transition: opacity .25s; }
.kv .kvtt.is-swap .kvtt__desk img, .kv .kvtt.is-swap .kvtt__phone img { opacity: .35; }
.kv .kvtt:hover .kvtt__desk { transform: translateY(-6px); }
.kv .kvtt:hover .kvtt__phone { transform: translateY(-14px) rotate(-2.5deg); }
.kv .kvtt--nophone .kvtt__desk { left: 9%; width: 82%; }
.kv .kvtt__flag { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.kv .kvtt__flag .ico { color: var(--brand); fill: var(--brand); }
.kv .kvtt__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 24px 24px; }
.kv .kvtt__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kv .kvtt__name { font-size: 30px; line-height: 1; letter-spacing: -0.04em; font-weight: 650; }
.kv .kvtt__name a { color: var(--ink); text-decoration: none; }
.kv .kvtt__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ac); }
.kv .kvtt__price { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.kv .kvtt__price b { font-size: 19px; color: var(--ink); font-weight: 650; letter-spacing: -0.02em; }
.kv .kvtt__niche { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.kv .kvtt__sig { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.kv .kvtt__styles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 4px 6px 4px 14px; border-radius: 16px; background: var(--paper); }
.kv .kvtt__lbl { font-size: 13px; color: var(--ink-3); }
.kv .kvtt__lbl b { margin-left: 4px; color: var(--ink); font-weight: 600; }
.kv .kvtt__sws { display: flex; flex-wrap: wrap; gap: 2px; }
.kv .kvtt__sw { position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.kv .kvtt__sw::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--g) 50%, var(--a) 50%);
  box-shadow: inset 0 0 0 1px rgba(16, 20, 24, .2); transition: transform .3s var(--spring), box-shadow .2s; }
.kv .kvtt__sw:hover::before { transform: scale(1.12); }
.kv .kvtt__sw[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(16, 20, 24, .2), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.kv .kvtt__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kv .kvtt__meta li { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 12.5px; font-weight: 550; }
.kv .kvtt__meta .kvtt__ed { border-color: transparent; background: color-mix(in srgb, var(--ac) 16%, #fff); color: var(--ink); }
.kv .kvtt__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 28px; margin: 0; padding: 12px 0; border-block: 1px solid var(--line); }
.kv .kvtt__facts dt { font-size: 12px; color: var(--ink-3); }
.kv .kvtt__facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.kv .kvtt__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.kv .kvtt__perks li { background: var(--paper); border-color: transparent; }

/* flagship: full row, stage left */
.kv .kvtt--hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.kv .kvtt--hero .kvtt__stage { aspect-ratio: auto; min-height: 540px; }
.kv .kvtt--hero .kvtt__desk { left: 5%; top: 14%; width: 84%; }
.kv .kvtt--hero .kvtt__phone { width: 20%; right: 4%; bottom: -5%; }
.kv .kvtt--hero .kvtt__glow { width: 40%; }
.kv .kvtt--hero .kvtt__body { padding: 40px 40px 40px 36px; justify-content: center; gap: 16px; }
.kv .kvtt--hero .kvtt__name { font-size: clamp(44px, 4.6vw, 64px); }
.kv .kvtt--hero .kvtt__niche { font-size: 17px; color: var(--ink); }
.kv .kvtt--hero .kvtt__cta { margin-top: 6px; }
.kv .kvtt--hero .kvtt__cta .btn { min-height: 48px; padding: 12px 22px; font-size: 15.5px; border-radius: 12px; }

/* closing tile: custom theme work (fills the last row; full row when the row is already complete) */
.kv .kvts__more { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 300px; padding: 32px; border-radius: 26px; overflow: hidden; background: var(--ink); color: var(--on-dark-2); text-decoration: none; isolation: isolate; transition: transform .5s var(--ease-out), box-shadow .35s; }
.kv .kvts__more::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(246, 244, 239, .12) 1.1px, transparent 1.3px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
.kv .kvts__more::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--brand); transition: transform .8s var(--ease-out); }
.kv .kvts__more:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.kv .kvts__more:hover::after { transform: scale(1.08); }
.kv .kvts__more b { color: var(--on-dark); font-size: 30px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 650; max-width: 14ch; }
.kv .kvts__more > span:not([class]) { font-size: 15px; max-width: 44ch; }
.kv .kvts__more-icons { display: flex; }
.kv .kvts__more-icons { min-width: 0; max-width: 100%; }
.kv .kvts__more:not(.kvts__more--wide) > .kvts__more-icons, .kv .kvts__more:not(.kvts__more--wide) > .kvts__more-stat { max-width: calc(100% - 150px); } /* 18+ theme icons and the stat line stay clear of the corner circle */
.kv .kvts__more:not(.kvts__more--wide) > .kvts__more-icons .pi { min-width: 18px; }
.kv .kvts__more-icons .pi { flex: 0 1 48px; min-width: 22px; width: 48px; height: auto; aspect-ratio: 1; margin-right: -10px; border-radius: 14px; box-shadow: 0 0 0 3px var(--ink); transition: transform .45s var(--spring); }
.kv .kvts__more:hover .kvts__more-icons .pi { transform: translateY(-4px); }
.kv .kvts__more:hover .kvts__more-icons .pi:nth-child(even) { transform: translateY(2px); }
.kv .kvts__more-stat { font-size: 14px; color: var(--on-dark-3); }
.kv .kvts__more > b { margin-top: auto; padding-top: 28px; }
.kv .kvts__more-stat b { color: var(--on-dark); font-size: 15px; }
.kv .kvts__more-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--brand); font-weight: 600; font-size: 15px; }
.kv .kvts__more-go .ico { transition: transform .35s var(--spring); }
.kv .kvts__more:hover .kvts__more-go .ico { transform: translateX(3px); }
.kv .kvts__more--wide { grid-column: 1 / -1; min-height: 240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-auto-rows: min-content; column-gap: 56px; row-gap: 12px; align-content: center; }
.kv .kvts__more--wide > .kvts__more-icons { grid-column: 1; grid-row: 1; align-self: end; }
.kv .kvts__more--wide > .kvts__more-stat { grid-column: 1; grid-row: 2; }
.kv .kvts__more--wide > b { grid-column: 2; grid-row: 1; margin: 0; padding: 0; max-width: none; }
.kv .kvts__more--wide > span:not([class]) { grid-column: 2; grid-row: 2; }
.kv .kvts__more--wide > .kvts__more-go { grid-column: 2; grid-row: 3; }
.kv .kvts__more[hidden] { display: none; }

@media (max-width: 1180px) {
  .kv .kvts__more--wide::after { width: 110px; height: 110px; right: -55px; top: -55px; }
  .kv .kvtt--hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .kv .kvtt--hero .kvtt__stage { min-height: 460px; }
  .kv .kvtt--hero .kvtt__desk { top: 24%; }
  .kv .kvtt--hero .kvtt__body { padding: 30px; }
}
@media (max-width: 960px) {
  .kv .kvtt--hero { display: flex; }
  .kv .kvtt--hero .kvtt__stage { min-height: 0; aspect-ratio: 16 / 10; }
  .kv .kvtt--hero .kvtt__desk { top: 14%; }
  .kv .kvtt--hero .kvtt__body { padding: 26px 28px 30px; }
  .kv .kvtt__name { font-size: 26px; }
  .kv .kvtt__body { padding: 20px; }
  .kv .kvtt__styles { padding-left: 12px; }
}
@media (max-width: 700px) {
  .kv .kvts__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .kv .kvts__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter, 20px) * -1); padding: 2px var(--gutter, 20px) 6px; scrollbar-width: none; }
  .kv .kvts__chips::-webkit-scrollbar { display: none; }
  .kv .kvtt { border-radius: 22px; }
  .kv .kvtt--hero .kvtt__name { font-size: 42px; }
  .kv .kvtt--hero .kvtt__body { padding: 22px 20px 24px; }
  .kv .kvtt__phone { border-radius: 16px; padding: 3px; }
  .kv .kvtt__phone img { border-radius: 13px; }
  .kv .kvtt__bar { height: 18px; }
  .kv .kvtt__bar i { width: 5px; height: 5px; }
  .kv .kvtt__addr { display: none; }
  .kv .kvtt__cta .btn { flex: 1 1 auto; justify-content: center; }
  .kv .kvts__more { min-height: 260px; padding: 26px; border-radius: 22px; }
  .kv .kvts__more-icons .pi { flex-basis: 32px; min-width: 16px; width: 32px; height: auto; margin-right: -7px; border-radius: 10px; box-shadow: 0 0 0 2px var(--ink); }
  .kv .kvts__more::after { width: 130px; height: 130px; right: -65px; top: -65px; }
  .kv .kvts__more-stat { max-width: 22ch; }
  .kv .kvthsec__foot .btn { width: 100%; justify-content: center; }
  /* home on phones: the other themes scroll sideways (one tile and a peek), the flagship stays a full tile */
  .kv .kvthsec .kvts__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter, 20px) * -1); padding: 4px var(--gutter, 20px) 14px; scroll-padding-inline: var(--gutter, 20px); scrollbar-width: none; }
  .kv .kvthsec .kvts__grid::-webkit-scrollbar { display: none; }
  .kv .kvthsec .kvts__grid > * { scroll-snap-align: start; }
  .kv .kvthsec .kvtt--hero { grid-column: auto; }
  .kv .kvts__more--wide { display: flex; grid-column: 1 / -1; }
  .kv .kvthsec .kvts__more--wide { grid-column: auto; }
  .kv .kvts__more--wide > b { padding-top: 28px; margin-top: auto; }
  .kv .kvts__more--wide > .kvts__more-icons { align-self: flex-start; max-width: calc(100% - 60px); } /* phones: 17+ theme icons stay clear of the corner circle */
  .kv .kvthsec .kvtt__sig, .kv .kvtt__perks { display: none; }
  .kv .kvthsec .kvtt--hero .kvtt__name { font-size: 36px; }
  .kv .kvthsec .kvtt--hero .kvtt__niche { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv .kvtt, .kv .kvtt__desk, .kv .kvtt__phone, .kv .kvtt__glow, .kv .kvts__more, .kv .kvts__more::after { transition: none; }
  .kv .kvtt:hover, .kv .kvts__more:hover, .kv .kvtt:hover .kvtt__desk, .kv .kvtt:hover .kvtt__phone, .kv .kvtt:hover .kvtt__glow { transform: none; }
}
.kv .kvts + .thmore { margin-top: 24px; }
/* packages page: closing "custom package" tile; 3 columns when packages + tile fill rows of three (2026-10-16: 5 packages) */
@media (min-width: 1101px) { .kv .pkgs.kv-pkgs-page--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv .kv-pkgx { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 280px; padding: 28px; border-radius: 22px; overflow: hidden; background: var(--ink); color: var(--on-dark-2); text-decoration: none; isolation: isolate; transition: transform .5s var(--ease-out), box-shadow .35s; }
.kv .kv-pkgx::after { content: ""; position: absolute; z-index: -1; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: var(--brand); }
.kv .kv-pkgx:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.kv .kv-pkgx__ico { position: absolute; left: 28px; top: 28px; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(246, 244, 239, .08); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
.kv .kv-pkgx b { color: var(--on-dark); font-size: 26px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 650; max-width: 16ch; }
.kv .kv-pkgx__go { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; }


/* ===================== site update 2026-10-17 (research/site-update-plan-2026-10-17.md items 3-5) ===================== */
/* ---------- Add-ons mega menu: categories (icon, count, one line), goals, best-seller tile ---------- */
.kv .hdr .kvmm__grid { display: grid; height: auto; align-items: start; grid-template-columns: minmax(0, 1fr) 236px 288px; gap: 40px; padding-top: 26px; padding-bottom: 26px; }
.kv .kvmm__h { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 0 0 12px; letter-spacing: 0; }
.kv .kvmm__cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.kv .kvmm__cat { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s, box-shadow .15s; }
.kv .kvmm__cat:hover, .kv .kvmm__cat:focus-visible { background: #fff; box-shadow: var(--shadow-1); }
.kv .kvmm__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--c, var(--ink-3)); background: color-mix(in srgb, var(--c, #5A606B) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #5A606B) 22%, transparent); }
.kv .kvmm__ico .ico { width: 17px; height: 17px; }
.kv .kvmm__txt { display: grid; gap: 2px; min-width: 0; }
.kv .kvmm__txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.kv .kvmm__txt b .kvmm__n { margin-left: 6px; }
.kv .kvmm__txt small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvmm__n { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kv .kvmm__goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.kv .kvmm__goals a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; }
.kv .kvmm__goals a:hover, .kv .kvmm__goals a:focus-visible { background: #fff; box-shadow: var(--shadow-1); }
.kv .kvmm__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.kv .kvmm__all:hover { color: var(--brand-ink); }
.kv .kvmm__feat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.kv .kvmm__feat:hover, .kv .kvmm__feat:focus-visible { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.kv .kvmm__shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.kv .kvmm__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv .kvmm__fbody { display: grid; gap: 8px; padding: 14px 16px 16px; }
.kv .kvmm__ftop { display: flex; gap: 10px; align-items: center; }
.kv .kvmm__ftop b { font-size: 15px; line-height: 1.25; }
.kv .kvmm__fbody small { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kv .kvmm__fprice { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.kv .kvmm__fprice b { color: var(--ink); font-size: 15px; }
.kv .kvmm__fgo { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
@media (max-width: 1320px) {
  .kv .hdr .kvmm__grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .kv .kvmm__col--feat { display: none; }
}
/* mobile drawer: categories with icon, one line and count; goals */
.kv .drawer__panel nav .kvmm-d ul { padding: 0 0 10px; }
.kv .drawer__panel nav .kvmm-d .kvmm-d__cat { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; }
.kv .drawer__panel nav .kvmm-d .kvmm__ico { width: 28px; height: 28px; border-radius: 8px; }
.kv .drawer__panel nav .kvmm-d .kvmm__ico .ico { width: 15px; height: 15px; }
.kv .kvmm-d__txt { display: grid; gap: 1px; min-width: 0; flex: 1; font-size: 14.5px; line-height: 1.3; }
.kv .kvmm-d__txt small { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.kv .kvmm-d__n { font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.kv .drawer__panel nav .kvmm-d .kvmm-d__all { display: flex; align-items: center; gap: 6px; padding: 10px 4px 4px; }
.kv .drawer__panel nav .kvmm-d .kvmm-d__goal { display: flex; justify-content: space-between; gap: 10px; }

/* ---------- Lightbox: prev/next, counter, caption, swipe; fixed stage (no layout shift) ---------- */
.kv dialog.kvlb { --kvlb-m: max(92px, calc((100vw - 1280px) / 2)); position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 15, 19, .97); color: var(--on-dark); overscroll-behavior: contain; touch-action: pan-y; }
.kv dialog.kvlb::backdrop { background: rgba(12, 15, 19, .8); }
.kv dialog.kvlb[open] { display: grid; grid-template-rows: 72px minmax(0, 1fr); }
.kv .kvlb__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--kvlb-m); }
.kv .kvlb__count { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--on-dark); min-width: 7ch; padding: 6px 12px; border-radius: 999px; background: rgba(246, 244, 239, .1); border: 1px solid rgba(246, 244, 239, .14); }
.kv .kvlb__count:empty { visibility: hidden; }
.kv .kvlb__fig { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 0 var(--kvlb-m) 22px; }
.kv .kvlb__stage { position: relative; min-height: 0; }
.kv .kvlb__stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .6); transition: opacity .18s; user-select: none; -webkit-user-drag: none; }
.kv .kvlb.is-loading .kvlb__stage img { opacity: .35; }
.kv .kvlb__spin { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid rgba(246, 244, 239, .25); border-top-color: var(--on-dark); opacity: 0; pointer-events: none; }
.kv .kvlb.is-loading .kvlb__spin { opacity: 1; animation: kvlbspin .8s linear infinite; }
@keyframes kvlbspin { to { transform: rotate(360deg); } }
.kv .kvlb__cap { min-height: 3em; padding-top: 12px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--on-dark-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvlb__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(246, 244, 239, .18); background: rgba(246, 244, 239, .08); color: var(--on-dark); cursor: pointer; transition: background-color .15s, border-color .15s; }
.kv .kvlb__btn:hover { background: rgba(246, 244, 239, .18); border-color: rgba(246, 244, 239, .35); }
.kv .kvlb__btn:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; box-shadow: none; }
.kv .kvlb__nav { position: absolute; top: calc(50% + 6px); transform: translateY(-50%); width: 56px; height: 56px; border: 0; background: rgba(246, 244, 239, .94); color: var(--ink); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); transition: background-color .15s, transform .15s, box-shadow .15s; }
.kv .kvlb__nav .ico { width: 22px; height: 22px; }
.kv .kvlb__nav:hover { background: #fff; border: 0; transform: translateY(-50%) scale(1.06); box-shadow: 0 14px 36px -8px rgba(0, 0, 0, .65); }
.kv .kvlb__nav:active { transform: translateY(-50%) scale(.97); }
.kv .kvlb__nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.kv .kvlb__nav--prev { left: calc(var(--kvlb-m) - 76px); }
.kv .kvlb__nav--prev .ico { transform: scaleX(-1); }
.kv .kvlb__nav--next { right: calc(var(--kvlb-m) - 76px); }
.kv .kvlb.is-single .kvlb__nav { display: none; }
.kv .gallery__stage[data-zoom] { cursor: zoom-in; }
.kv .tabpanel img.kv-zoomable { cursor: zoom-in; }
@media (max-width: 767px) {
  .kv dialog.kvlb { --kvlb-m: 12px; }
  .kv dialog.kvlb[open] { grid-template-rows: 60px minmax(0, 1fr); }
  .kv .kvlb__fig { padding: 0 10px 84px; }
  .kv .kvlb__nav, .kv .kvlb__nav:hover, .kv .kvlb__nav:active { top: auto; bottom: 18px; transform: none; width: 50px; height: 50px; }
  .kv .kvlb__nav--prev { left: calc(50% - 64px); }
  .kv .kvlb__nav--next { right: calc(50% - 64px); }
  .kv .kvlb__cap { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .kv .kvlb__stage img { transition: none; } .kv .kvlb.is-loading .kvlb__spin { animation: none; } }

/* ---------- Home hero: best-selling products (price, proof line, Buy + Details / Live demo) ---------- */
.kv .kvh__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 5px; }
.kv .kvh__tags .tag { margin: 0; }
.kv .kvh__kind { font-size: 12px; color: var(--ink-3); }
.kv .kvh__proof { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); font-weight: 520; }
.kv .kvh__proof .ico { flex: none; margin-top: 2px; color: #0A9067; }
.kv .kvh__card .th__spec { margin: 14px 0; }
.kv .kvh__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv .kvh__ctas .btn { justify-content: center; white-space: nowrap; }
/* the tab strip spans the frame and the product card (7 slides: Atlas, four add-ons, two more themes); below 1100px it
   already spans the single column and scrolls sideways, kv-store.js keeps the current tab in view */
.kv .th__rail { grid-column: 1 / -1; }
.kv .th__tabs[data-more="r"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.kv .th__tabs[data-more="l"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.kv .th__tabs[data-more="lr"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
/* no layout shift while the carousel turns: every slide stays in the shared grid cell (the hero takes the height of the
   tallest one) and inactive slides are only invisible (not focusable, not in the accessibility tree). The cell reveal
   runs again each time a slide becomes active. */
.kv .th--covers .th__slide[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.kv .th--covers .th__slide:not(.is-active) .th__cells i { animation: none; }
/* two-column hero (above 1100px): the product card sits under the search column and never overlaps it. kv-store.js sets
   --kvh-copy to the height of the search column; the slide grows below the frame when the card does not fit beside it,
   and the dark platform keeps the frame's proportions instead of stretching with the row. */
@media (min-width: 1101px) {
  .kv .hero2__stage > .th .th__card { margin-top: var(--kvh-copy, 230px); }
  .kv .hero2__stage > .th .th__plat { align-self: start; aspect-ratio: 16 / 10.5; }
}
/* theme slides: the theme's real home page on a desktop and a phone in its default style (device frames of the theme
   tiles, .kvtt__desk / .kvtt__phone) instead of the cover */
.kv .th__shot.kvh__dev { isolation: isolate; background: color-mix(in srgb, var(--gr) 84%, var(--ac)); }
.kv .th__shot.kvh__dev::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--ac) 55%, transparent) 1.3px, transparent 1.5px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, transparent 35%, #000 100%); mask-image: linear-gradient(200deg, transparent 35%, #000 100%); }
.kv .kvh__dev .kvtt__glow { width: 40%; right: -7%; top: -18%; }
.kv .kvh__dev .kvtt__desk { left: 6%; top: 10%; width: 76%; }
.kv .kvh__dev .kvtt__phone { right: 5%; bottom: -8%; width: 19%; }
.kv .kvh__dev--nophone .kvtt__desk { left: 8%; width: 84%; }
.kv .th--covers .th__slide .th__shot.kvh__dev img { width: 100%; height: auto; animation: none; }
.kv .th--covers .th__slide.is-active .kvh__dev .kvtt__desk { animation: kvhDesk .9s var(--ease-out) both; }
.kv .th--covers .th__slide.is-active .kvh__dev .kvtt__phone { animation: kvhPhone 1s var(--ease-out) .12s both; }
@keyframes kvhDesk { from { transform: translateY(14px); } to { transform: none; } }
@keyframes kvhPhone { from { transform: translateY(26px) rotate(2deg); } to { transform: rotate(-2deg); } }
@media (max-width: 760px) {
  .kv .kvh__dev .kvtt__bar { height: 16px; padding: 0 7px; gap: 4px; }
  .kv .kvh__dev .kvtt__bar i { width: 5px; height: 5px; }
  .kv .kvh__dev .kvtt__addr { display: none; }
  .kv .kvh__dev .kvtt__desk { border-radius: 8px; }
  .kv .kvh__dev .kvtt__phone { padding: 3px; border-radius: 13px; }
  .kv .kvh__dev .kvtt__phone img { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .kv .th--covers .th__slide.is-active .kvh__dev .kvtt__desk, .kv .th--covers .th__slide.is-active .kvh__dev .kvtt__phone { animation: none; } .kv .kvh__dev .kvtt__phone { transform: rotate(-2deg); } }

/* ---------- Home: Best sellers rail ---------- */
.kv .kvbs { padding-top: 56px; padding-bottom: 24px; }
.kv .kvbs__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; margin-bottom: 24px; }
.kv .kvbs__head h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.035em; line-height: 1.05; margin-top: 8px; }
.kv .kvbs__lede { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 15px; justify-self: end; text-align: right; }
.kv .kvbs__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kv .kvbs__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: box-shadow .25s, transform .35s var(--ease-out), border-color .25s; }
.kv .kvbs__card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); transform: translateY(-2px); }
.kv .kvbs__media { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.kv .kvbs__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.kv .kvbs__card:hover .kvbs__media img { transform: scale(1.03); }
.kv .kvbs__badge { position: absolute; z-index: 2; left: 14px; top: -13px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ink); color: var(--on-dark); box-shadow: 0 2px 8px rgba(16, 20, 24, .18); }
.kv .kvbs__badge .ico { width: 12px; height: 12px; color: var(--brand); fill: currentColor; }
.kv .kvbs__badge--new { background: var(--brand); color: var(--ink); }
.kv .kvbs__body { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 16px; flex: 1; }
.kv .kvbs__top { display: flex; gap: 10px; align-items: center; }
.kv .kvbs__top > div { min-width: 0; }
.kv .kvbs__name { font-size: 15.5px; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.kv .kvbs__name a { color: var(--ink); text-decoration: none; }
.kv .kvbs__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.kv .kvbs__type { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .kvbs__sum { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvbs__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.kv .kvbs__price { display: flex; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kv .kvbs__price b { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.kv .kvbs__price small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.kv .kvbs__ctas { position: relative; z-index: 1; display: flex; gap: 6px; }
@media (max-width: 1100px) {
  .kv .kvbs__head { grid-template-columns: minmax(0, 1fr) auto; }
  .kv .kvbs__lede { grid-column: 1 / -1; grid-row: 2; justify-self: start; text-align: left; }
  .kv .kvbs__rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 38%); 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 .kvbs__rail::-webkit-scrollbar { display: none; }
  .kv .kvbs__card { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .kv .kvbs { padding-top: 40px; }
  .kv .kvbs__rail { grid-auto-columns: 82%; }
}
@media (prefers-reduced-motion: reduce) { .kv .kvbs__card, .kv .kvbs__media img { transition: none; } .kv .kvbs__card:hover, .kv .kvbs__card:hover .kvbs__media img { transform: none; } }
/* 360px header: logo + four icon buttons were 5px wider than the content box (menu button cut off) */
@media (max-width: 400px) {
  .kv .hdr > .wrap { gap: 6px; }
  .kv .hdr .logo svg { width: 128px; height: auto; }
  .kv .hdr__actions { gap: 2px; }
}

/* ---------- Sales quick wins 2026-10-31: buy box trust, cart offer, checkout (mobile summary, notes, terms, trust) ---------- */
/* buy box: three short trust rows with links (refund, licensing) */
.kv .bb__trust--list { display: grid; gap: 6px; justify-content: stretch; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); list-style: none; }
.kv .bb__trust--list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kv .bb__trust--list li .ico { flex: none; margin-top: 2px; color: var(--ok); }
.kv .bb__trust--list a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; padding: 4px 0; }
.kv .bb__trust--list a:hover { color: var(--ink); text-decoration-color: currentColor; }
.kv .bb__second { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-2, 10px); background: var(--brand-50, #FFF1EC); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kv .bb__second .ico { flex: none; margin-top: 2px; color: var(--brand-ink, #B23A14); }

/* cart: one-click "license for a second store" offer under a line */
.kv .pg-cline__offer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0 2px; padding: 10px 10px 10px 12px; border: 1px dashed color-mix(in srgb, var(--brand, #FF5B2E) 55%, var(--line)); border-radius: var(--r-2, 10px); background: var(--brand-50, #FFF7F3); }
.kv .pg-cline__offer-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--brand-ink, #B23A14); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.kv .pg-cline__offer-txt { flex: 1 1 220px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.kv .pg-cline__offer-txt b { color: var(--ink); font-weight: 600; }
.kv .pg-cline__offer-txt .tnum { color: var(--ink); font-weight: 600; white-space: nowrap; }
.kv .pg-cline__offer .btn { min-height: 44px; padding: 0 16px; flex: none; }
/* tap targets: cart Remove */
.kv .pg-cline__acts .pg-cline__rm { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; }

/* checkout: collapsed order summary on phones */
.kv .kv-mosum { display: none; }
@media (max-width: 767px) {
  .kv .kv-mosum { display: block; margin: -4px 8px 20px; }
  .kv .kv-mosum__d { border: 1px solid var(--line); border-radius: var(--r-3, 14px); background: #fff; box-shadow: 0 1px 2px rgba(16, 20, 24, .04); }
  .kv .kv-mosum__s { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; cursor: pointer; font: 600 15px/1.3 var(--font); color: var(--ink); }
  .kv .kv-mosum__s::-webkit-details-marker { display: none; }
  .kv .kv-mosum__s:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-3, 14px); }
  .kv .kv-mosum__l { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
  .kv .kv-mosum__n { font-weight: 400; color: var(--ink-3); }
  .kv .kv-mosum__t { font-size: 17px; }
  .kv .kv-mosum__chev { transition: transform .2s; color: var(--ink-3); }
  .kv .kv-mosum__d[open] .kv-mosum__chev { transform: rotate(180deg); }
  .kv .kv-mosum__body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
  .kv .kv-mosum__items { list-style: none; margin: 0; padding: 4px 0 0; }
  .kv .kv-mosum__items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
  .kv .kv-mosum__name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .kv .kv-mosum__name b { font-weight: 600; color: var(--ink); }
  .kv .kv-mosum__name small { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
  .kv .kv-mosum__lines > div { display: flex; justify-content: space-between; padding: 6px 0 0; font-size: 14px; color: var(--ink-2); }
  .kv .kv-mosum__lines .is-save { color: var(--ok); }
  .kv .kv-mosum__total { margin-top: 6px; padding-top: 10px !important; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink) !important; font-size: 16px !important; }
}

/* checkout: customer notes behind a disclosure */
.kv .kv-notes__d { border: 0; padding-left: 6px; }
.kv .kv-notes__s { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: 500 14.5px/1.3 var(--font); color: var(--ink-2); }
.kv .kv-notes__s::-webkit-details-marker { display: none; }
.kv .kv-notes__s::after { content: "+"; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.kv .kv-notes__d[open] .kv-notes__s::after { content: "−"; }
.kv .kv-notes__s:hover { color: var(--ink); }
.kv .kv-notes__s:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.kv .kv-notes__opt { color: var(--ink-3); font-weight: 400; }
.kv .kv-notes__d[open] .kv-notes__s { margin-bottom: 8px; }

/* checkout: agreement line with the three documents */
.kv .kv-terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.kv .kv-terms a:hover { color: var(--brand-ink, #B23A14); }

/* checkout: trust line under Place order */
.kv .litecheckout__submit-order:has(> .kv-co-trust) { flex-wrap: wrap; }
.kv .kv-co-trust { display: flex; flex: 1 0 100%; width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.kv .kv-co-trust .ico { color: var(--ok); }

/* tap targets >= 44px on phones (2026-10-31): top-bar links (Sign in, Docs, Support), breadcrumbs, footer link lists and legal
   links get real 44px rows; the header account icon gets an invisible 44px hit area (no layout change) */
@media (max-width: 767px) {
  .kv .ubar__right a, .kv .ocx-ubar__r a { display: inline-flex; align-items: center; min-height: 44px; }
  .kv .crumbs { padding-top: 4px; }
  .kv .crumbs ol { align-items: center; }
  .kv .crumbs a, .kv .ty-breadcrumbs__a { display: inline-flex; align-items: center; min-height: 44px; }
  .kv .ty-breadcrumbs { padding-top: 12px; }
  .kv .hdr__link { position: relative; }
  .kv .hdr__link::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .kv .ftr ul { gap: 0; }
  .kv .ftr li > a, .kv .ftr__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .kv .ocx-ftr__col li, .kv .wcx-ftr__col li, .kv .psx-ftr__col li { margin: 0; }
  .kv .ocx-ftr__col a, .kv .wcx-ftr__col a, .kv .psx-ftr__col a, .kv .ocx-ftr__legal a, .kv .wcx-ftr__legal a, .kv .psx-ftr__legal a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}
/* cart summary: the store is not VAT registered (2026-10-31) */
.kv .pg-sumbox .lines .pg-sumbox__vat { display: block; font-size: 13px; line-height: 1.45; }

/* ---------- Buy box: "Set the domain later" (kv_store 1.1.5, every host) ---------- */
.kv .kv-domain__now[hidden], .kv .kv-later__note[hidden] { display: none; }
.kv .kv-later { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -4px 0 -4px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); user-select: none; }
.kv .kv-later input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kv .kv-later__box { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 5px; background: #fff; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.kv .kv-later__box .ico { width: 12px; height: 12px; }
.kv .kv-later:hover .kv-later__box { border-color: var(--ink-3); }
.kv .kv-later input:checked + .kv-later__box { background: var(--brand); border-color: var(--brand); color: var(--brand-on, #fff); }
.kv .kv-later input:focus-visible + .kv-later__box { box-shadow: var(--focus); }
.kv .kv-later input:checked ~ .kv-later__txt { color: var(--ink); font-weight: 600; }
.kv .kv-later__note { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--brand-100); border-radius: 8px; background: var(--brand-50); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.kv .kv-later__note > .ico { margin-top: 2px; color: var(--brand-ink); }
.kv .kv-later__note p { margin: 0; }
.kv .kv-later__note b { color: var(--ink); font-weight: 600; }
.kv .req.req--later { color: var(--ink-3); background: var(--bg-2); border-color: var(--line); }

/* ---------- Cart: bought-together saving + offers (kv_store 1.1.5, every host) ---------- */
.kv .kv-bt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kv .kv-bt__save { color: #0A6B45; font-weight: 600; font-size: 13px; }
.kv .tag.kv-tag--later { color: var(--ink-3); background: var(--bg-2); border-color: var(--line); }
.kv .kv-bto { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.kv .kv-bto__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 18px 20px 6px; }
.kv .kv-bto__head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.kv .kv-bto__head p { margin: 0; font-size: 13px; color: var(--ink-3); }
.kv .kv-bto__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin: 0; padding: 14px 20px; }
.kv .kv-bto__row + .kv-bto__row { border-top: 1px solid var(--line); }
.kv .kv-bto__body { min-width: 0; display: grid; gap: 2px; }
.kv .kv-bto__name { font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.kv .kv-bto__with { font-size: 12.5px; color: var(--ink-3); }
.kv .kv-bto__price { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.kv .kv-bto__price s { font-size: 12.5px; color: var(--ink-3); }
.kv .kv-bto__price b { font-size: 15px; color: var(--ink); }
.kv .kv-bto__off { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #0A6B45; }
.kv .kv-bto .btn { min-height: 44px; }
.kv .kv-bto__err { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--bad, #B42318); }
.kv .kv-bto__err[hidden] { display: none; }
@media (max-width: 640px) {
  .kv .kv-bto__head { padding: 16px 16px 4px; }
  .kv .kv-bto__row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 16px; row-gap: 12px; }
  .kv .kv-bto__row .btn { grid-column: 1 / -1; width: 100%; }
}

/* product head meta row (theme-sync7 pill): the pill wraps as a unit, "Updated <date>" never breaks letter by letter (sales-qw2) */
.kv .ph__meta { min-width: 0; }
.kv .ph__meta > span:not(.sep) { display: inline-block; min-width: 0; max-width: 100%; line-height: 1.5; }
.kv .ph__meta > span > .ico { vertical-align: -2px; margin-right: 4px; }
.kv .ph__meta .kv-pill > .tag { display: inline-flex; align-items: center; gap: 6px; white-space: normal; max-width: 100%; margin: 0 8px 4px 0; vertical-align: middle; }
.kv .kv-pill__upd { display: inline-block; white-space: nowrap; vertical-align: middle; }

/* ======================================================================================================================
   theme-sync8 (2026-11-02): host colours from the platform logos, brand-aware states, the sticky buy bar
   ====================================================================================================================== */

/* ---------- cs-cart.kaviolabs.com: CS-Cart logo colours (logo gradient #7381FD -> #76C7FF, wordmark #1B2032, site blue
   #1D9FF8; COLOURS.md). The fill is the logo periwinkle deepened so white text reaches AA (5.4:1); the sky blue is the
   second colour of gradients and glows; dark grounds take the wordmark navy. Platform hosts get theirs from tokens.css. */
html:not([data-kv-plat]) {
  --brand: #4657F0;
  --brand-700: #3A49DD;
  --brand-800: #2F3BC2;
  --brand-on: #FFFFFF;
  --brand-50: #EFF1FE;
  --brand-100: #DCE0FD;
  --brand-200: #B9C0FB;
  --brand-ink: #3A47D6;
  --brand-ring: rgba(70, 87, 240, .22);
  --brand-glow: rgba(70, 87, 240, .35);
  --brand-rgb: 70, 87, 240;
  --brand-2: #1D9FF8;
  --brand-2-rgb: 29, 159, 248;
  --brand-grad: linear-gradient(135deg, #5D6BFB 0%, #1D9FF8 100%);
  --brand-dark: #0E1328;
  --brand-soft: #9FB0FF;
  --link: #3A47D6;
  --paper: #F5F7FB;
  --bg-2: #EEF1F7;
  --bg-3: #E4E8F1;
  --line: #E1E5EE;
  --line-2: #C9CFDB;
  --ink-3: #5A606B;
  --dark: #0E1328;
  --dark-2: #151B36;
  --dark-3: #1E2547;
  --on-dark: #F4F6FB;
  --on-dark-2: #B4BCD6;
  --on-dark-3: #8A93B2;
  --dark-line: rgba(244, 246, 251, .10);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
}
/* the CS-Cart style preset paints the content ground with the old paper colour: follow the token */
html:not([data-kv-plat]) body, html:not([data-kv-plat]) .ty-tygh, html:not([data-kv-plat]) .tygh-content > div { background-color: var(--paper); }
/* the Kavio mark takes the host colour on every host (the platform designs do the same) */
html:not([data-kv-plat]) .logo__img path[fill="#FF5B2E"] { fill: var(--brand); }

/* ---------- brand-aware states (every host; the generated base CSS has orange baked into a few states) ---------- */
::selection { background: var(--brand-100, #FFD3C4); color: var(--ink); }
.tag--brand { background: var(--brand-50, #FFF0EA); border-color: var(--brand-100, #FFD3C4); color: var(--brand-ink); }
.btn--primary { color: var(--brand-on, var(--ink)); box-shadow: inset 0 -1px 0 rgba(16, 20, 24, .18), 0 1px 2px rgba(var(--brand-rgb, 255, 91, 46), .3); transition: background-color .15s, border-color .15s, box-shadow .2s var(--ease-out, ease), transform .2s var(--ease-out, ease); }
.btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--brand-on, var(--ink)); box-shadow: inset 0 -1px 0 rgba(16, 20, 24, .18), 0 10px 24px -10px rgba(var(--brand-rgb, 255, 91, 46), .75); }
.btn--primary:active { background: var(--brand-800); border-color: var(--brand-800); transform: translateY(1px); }
.btn--primary .ico { color: currentColor; }
.input:focus, .select:focus { box-shadow: 0 0 0 3px var(--brand-ring); }
.hero2 .hero__search:focus-within, .cta__search:focus-within { box-shadow: 0 0 0 3px var(--brand-ring); }
.cta__search:focus-within, .ftr .news__form:focus-within { border-color: rgba(var(--brand-rgb, 255, 91, 46), .6); }
.bx::before { background: radial-gradient(420px circle at var(--mx2) var(--my2), rgba(var(--brand-rgb, 255, 91, 46), .08), transparent 60%); }
.pf::before { background: radial-gradient(380px circle at var(--mx2) var(--my2), rgba(var(--brand-rgb, 255, 91, 46), .12), transparent 60%); }
.card::before { background: radial-gradient(320px circle at var(--mx2) var(--my2), rgba(var(--brand-rgb, 255, 91, 46), .07), transparent 60%); }
.cart-count, .btile__all, .kv .kvbs__badge--new, .cdev__steps li:first-child .cdev__n { color: var(--brand-on, var(--ink)); }
.toast a { color: var(--brand-soft, #FFB59E); }
.kv .kvthsec__perks .ico, .kv .kvtt__perks .ico { color: var(--brand-ink); }

/* ---------- cs-cart host: vivid, modern details on the existing layout (no layout change) ---------- */
html:not([data-kv-plat]) .hero2::before { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -12vw; top: -18vh; width: 62vw; height: 92vh;
  background: radial-gradient(closest-side, rgba(115, 129, 253, .22), transparent 72%), radial-gradient(closest-side at 70% 60%, rgba(118, 199, 255, .2), transparent 70%); }
html:not([data-kv-plat]) .card, html:not([data-kv-plat]) .bx, html:not([data-kv-plat]) .pf { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-kv-plat]) .card:hover, html:not([data-kv-plat]) .bx:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(var(--brand-rgb), .45), 0 2px 6px rgba(16, 20, 24, .06); border-color: var(--brand-200); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-kv-plat]) .card:hover, html:not([data-kv-plat]) .bx:hover, .btn--primary:active { transform: none; }
}

/* ---------- sticky buy bar (product pages, all hosts): centred in the page container, floating, blurred; left = what you
   buy, right = selected option + one-time price + primary action; phones = a compact two-line bar ---------- */
.mbar[data-mbar] { --mb-r: 16px; --mb-bg: rgba(255, 255, 255, .88); --mb-bd: var(--line);
  display: block; position: fixed; z-index: 60; left: 50%; right: auto; bottom: max(14px, env(safe-area-inset-bottom));
  width: min(calc(var(--wrap, 1280px) - 2 * var(--gutter, 32px)), calc(100vw - 32px)); margin: 0; padding: 0;
  border: 1px solid var(--mb-bd); border-radius: var(--mb-r); background: var(--mb-bg); color: var(--ink);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 24px 60px -18px rgba(16, 20, 24, .32), 0 2px 8px rgba(16, 20, 24, .06);
  transform: translate(-50%, calc(100% + 32px)); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease-out, ease), opacity .25s, visibility 0s linear .4s; }
.mbar[data-mbar].is-shown { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .4s var(--ease-out, ease), opacity .25s, visibility 0s; }
.mbar[data-mbar] .mbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 10px 10px 10px 14px; }
.mbar[data-mbar] .mbar__id { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.mbar[data-mbar] .mbar__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); }
.mbar[data-mbar] .mbar__ico .pi { width: 40px; height: 40px; border-radius: 10px; }
.mbar[data-mbar] .mbar__txt { display: grid; gap: 2px; min-width: 0; }
.mbar[data-mbar] .mbar__name { display: block; overflow: hidden; font-size: 15.5px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.mbar[data-mbar] .mbar__meta { display: block; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.mbar[data-mbar] .mbar__buy { display: flex; align-items: center; gap: 12px; flex: none; padding-left: 20px; border-left: 1px solid var(--line); }
.mbar[data-mbar] .mbar__sum { display: grid; justify-items: end; gap: 2px; text-align: right; }
.mbar[data-mbar] .mbar__opt { display: block; max-width: 300px; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.mbar[data-mbar] .mbar__price { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1.1; }
.mbar[data-mbar] .mbar__price b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mbar[data-mbar] .mbar__price small { display: inline; font-size: 12px; color: var(--ink-3); }
.mbar[data-mbar] .mbar__demo { min-height: 44px; }
.mbar[data-mbar] .mbar__cta { min-height: 44px; padding: 0 20px; gap: 8px; white-space: nowrap; }
body.has-mbar { padding-bottom: 96px; }
@media (max-width: 760px) {
  .mbar[data-mbar] { --mb-r: 14px; width: calc(100vw - 16px); bottom: max(8px, env(safe-area-inset-bottom)); }
  .mbar[data-mbar] .mbar__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico txt cta" "ico sum cta"; align-items: center; gap: 2px 12px; min-height: 0; padding: 9px 9px 9px 10px; }
  .mbar[data-mbar] .mbar__id, .mbar[data-mbar] .mbar__buy { display: contents; }
  .mbar[data-mbar] .mbar__ico { grid-area: ico; width: 38px; height: 38px; }
  .mbar[data-mbar] .mbar__ico .pi { width: 38px; height: 38px; }
  .mbar[data-mbar] .mbar__txt { grid-area: txt; }
  .mbar[data-mbar] .mbar__name { font-size: 14.5px; }
  .mbar[data-mbar] .mbar__meta, .mbar[data-mbar] .mbar__demo { display: none; }
  .mbar[data-mbar] .mbar__sum { grid-area: sum; display: flex; align-items: baseline; gap: 8px; text-align: left; min-width: 0; }
  .mbar[data-mbar] .mbar__price b { font-size: 17px; }
  .mbar[data-mbar] .mbar__price small { font-size: 11.5px; }
  .mbar[data-mbar] .mbar__opt { order: 2; min-width: 0; font-size: 11.5px; }
  .mbar[data-mbar] .mbar__cta { grid-area: cta; min-height: 46px; padding: 0 16px; }
  body.has-mbar { padding-bottom: 84px; }
}
@media (max-width: 479px) { .mbar[data-mbar] .mbar__opt { display: none; } }
@media (max-width: 374px) { .mbar[data-mbar] .mbar__cta .ico { display: none; } .mbar[data-mbar] .mbar__cta { padding: 0 14px; } }
@media (prefers-reduced-motion: reduce) { .mbar[data-mbar], .mbar[data-mbar].is-shown { transition: opacity .15s, visibility 0s; } }

/* product page tabs: the page header does not stay on screen, so the sticky tab bar sits at the very top (it used to
   leave a 56-60 px window above it where the page text scrolled through) */
.kv .pdp__main > .tabs, .kv .tabs { top: 0; }
.kv .pdp__main > .tabs { box-shadow: 0 1px 0 var(--line); }
/* no see-through fade on narrow screens (the masked edge showed the text scrolling under the bar); a cut-off tab already
   says there is more to swipe */
.kv .pdp__main > .tabs { -webkit-mask-image: none; mask-image: none; padding-right: 0; }
/* core buttons (cart, checkout, account): the hover keeps the host's text-on-fill colour (it was ink on every host) */
.kv .ty-btn__primary:hover, .kv .ty-btn__add-to-cart:hover, .kv .litecheckout__submit-btn:hover, .kv .cm-checkout-place-order:hover { color: var(--brand-on, #101418); }

/* ======================================================================================================================
   theme-sync24 (2026-11-03): home hero "add-on studio" (option C, blocks/static_templates/kv_home_hero.tpl, .kvst).
   Dark stage in the host colours: drifting glow, headline with the live counts, search, category chips, a wall of add-on
   tiles, a slow marquee and a strip of 5 themes. Motion = transforms/opacity only (no layout shift), all of it off under
   prefers-reduced-motion. The headline is never faded in (it is the LCP element).
   ====================================================================================================================== */
.kv .kvst { --st-bg: #090C1D; --st-ink: #F4F6FF; --st-ink-2: #C3C9E4; --st-ink-3: #959DBD; --st-line: rgba(196, 205, 255, .12); --st-brand: var(--brand, #4657F0);
  position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(1100px 520px at 72% -8%, #1C2672 0%, rgba(28, 38, 114, 0) 70%), linear-gradient(180deg, #0B0F26 0%, var(--st-bg) 62%, #080A16 100%); color: var(--st-ink); padding: clamp(40px, 5.4vw, 76px) 0 clamp(36px, 4.4vw, 60px); }
.kv .kvst a { color: inherit; text-decoration: none; }
.kv .kvst a:focus-visible, .kv .kvst button:focus-visible { outline: 2px solid #AEB9FF; outline-offset: 3px; }
.kv .kvst__wrap { position: relative; }
/* background: three blurred orbs drifting slowly + a faint grid that fades out */
.kv .kvst__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kv .kvst__orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.kv .kvst__orb--a { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -10vw; top: -26vw; background: radial-gradient(circle, var(--st-brand) 0%, rgba(70, 87, 240, 0) 68%); animation: kvst-drift-a 22s ease-in-out infinite alternate; }
.kv .kvst__orb--b { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; left: -12vw; top: 30%; background: radial-gradient(circle, rgba(29, 159, 248, .75) 0%, rgba(29, 159, 248, 0) 68%); opacity: .32; animation: kvst-drift-b 26s ease-in-out infinite alternate; }
.kv .kvst__orb--c { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; right: 18%; bottom: -14vw; background: radial-gradient(circle, rgba(139, 92, 246, .8) 0%, rgba(139, 92, 246, 0) 68%); opacity: .28; animation: kvst-drift-c 30s ease-in-out infinite alternate; }
.kv .kvst__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(196, 205, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 205, 255, .055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(900px 420px at 60% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(900px 420px at 60% 0%, #000 0%, transparent 75%); }
@keyframes kvst-drift-a { to { transform: translate3d(-8vw, 6vw, 0) scale(1.08); } }
@keyframes kvst-drift-b { to { transform: translate3d(10vw, -4vw, 0) scale(1.15); } }
@keyframes kvst-drift-c { to { transform: translate3d(-12vw, -3vw, 0) scale(.92); } }
/* entrance: staggered rise (transform + opacity, never the headline) */
.kv .kvst__in { animation: kvst-in .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes kvst-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

/* ---------- top: headline + search column ---------- */
.kv .kvst__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: clamp(24px, 4vw, 72px); align-items: end; margin-top: clamp(18px, 2vw, 26px); }
.kv .kvst__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 22px; font-size: 13.5px; color: var(--st-ink-2); }
.kv .kvst__eco { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; border: 1px solid var(--st-line); background: rgba(255, 255, 255, .05); color: var(--st-ink-2); }
.kv .kvst__eco img { display: block; height: 18px; width: auto; padding: 4px 9px; border-radius: 999px; background: #fff; box-sizing: content-box; }
.kv .kvst__eco:hover { border-color: rgba(196, 205, 255, .3); }
.kv .kvst__live { display: inline-flex; align-items: center; gap: 8px; }
.kv .kvst__live i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; animation: kvst-ping 2.4s ease-out infinite; }
.kv .kvst__live .mono { font-family: var(--mono); font-size: 12.5px; color: var(--st-ink); letter-spacing: -.01em; }
@keyframes kvst-ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.kv .kvst__title { margin: 0; font-size: clamp(38px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -.038em; font-weight: 650; color: var(--st-ink); text-wrap: balance; }
.kv .kvst__l1, .kv .kvst__l2 { display: block; }
.kv .kvst__l2 { background: linear-gradient(90deg, #9FB0FF 0%, #76C7FF 25%, #C9B8FF 50%, #9FB0FF 75%, #76C7FF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: kvst-shine 10s linear infinite; padding-bottom: .06em; }
@keyframes kvst-shine { to { background-position: -200% 0; } }
.kv .kvst__lede { margin: 0; max-width: 640px; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.55; color: var(--st-ink-2); }
.kv .kvst__side { display: flex; flex-direction: column; gap: 14px; }
.kv .kvst__search { position: relative; display: flex; align-items: center; height: 58px; padding: 0 6px 0 46px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(196, 205, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -20px rgba(0, 0, 0, .7); transition: border-color .2s, box-shadow .2s, background .2s; }
.kv .kvst__search:focus-within { border-color: #8E9CFF; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(70, 87, 240, .35), 0 18px 40px -20px rgba(0, 0, 0, .7); }
.kv .kvst__search > .ico { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--st-ink-3); }
.kv .kvst__search input[type="search"] { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--st-ink); font: inherit; font-size: 15.5px; padding: 0; margin: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
.kv .kvst__search input::placeholder { color: var(--st-ink-3); opacity: 1; }
.kv .kvst__go { flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: var(--st-brand); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s, transform .2s; }
.kv .kvst__go:hover { background: #5967F6; }
.kv .kvst__go:active { transform: scale(.97); }
.kv .kvst__ctas { display: flex; gap: 10px; }
.kv .kvst__btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(196, 205, 255, .22); background: rgba(255, 255, 255, .04); color: var(--st-ink) !important; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, border-color .2s, box-shadow .25s; }
.kv .kvst__btn:hover { transform: translateY(-2px); border-color: rgba(196, 205, 255, .4); background: rgba(255, 255, 255, .08); }
.kv .kvst__btn--primary { border-color: transparent; background: linear-gradient(135deg, #5D6BFB 0%, #4657F0 45%, #2B8FF5 100%); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px -10px rgba(70, 87, 240, .9); }
.kv .kvst__btn--primary:hover { background: linear-gradient(135deg, #6977FF 0%, #5262F5 45%, #3A9BFA 100%); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 36px -10px rgba(70, 87, 240, 1); }
.kv .kvst__btn--primary .ico { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.kv .kvst__btn--primary:hover .ico { transform: translateX(3px); }
.kv .kvst__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--st-ink-3); }
.kv .kvst__facts li { display: inline-flex; align-items: center; gap: 6px; }
.kv .kvst__facts .ico { color: #8E9CFF; }

/* ---------- category chips ---------- */
.kv .kvst__cats { margin: clamp(28px, 3.2vw, 40px) 0 0; }
.kv .kvst__cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kv .kvst__cat { --cc: #9FB0FF; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--st-line); background: rgba(255, 255, 255, .035); color: var(--st-ink-2) !important; font-size: 14px; white-space: nowrap; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, background .2s, color .2s; }
.kv .kvst__cat .ico { color: var(--cc); filter: brightness(1.6) saturate(.85); }
.kv .kvst__n { min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: 12px; font-weight: 600; color: var(--st-ink); }
.kv .kvst__cat--more { padding-right: 12px; color: #AEB9FF !important; border-style: dashed; }
.kv .kvst__cat--more .ico { color: currentColor; filter: none; }
.kv .kvst__cat:hover { transform: translateY(-2px); color: var(--st-ink) !important; border-color: color-mix(in srgb, var(--cc) 60%, transparent); background: color-mix(in srgb, var(--cc) 16%, transparent); }

/* ---------- add-on wall ---------- */
.kv .kvst__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.kv .kvst__tile { --hc: #7381FD; position: relative; min-width: 0; margin: 0; }
.kv .kvst__tile > a { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 78px; box-sizing: border-box; padding: 14px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(196, 205, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .065) 0%, rgba(255, 255, 255, .025) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), border-color .25s, box-shadow .35s, background .25s; }
.kv .kvst__tile > a::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(160px 90px at 18% 0%, color-mix(in srgb, var(--hc) 45%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.kv .kvst__tile > a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hc) 55%, rgba(196, 205, 255, .2)); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--hc) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.kv .kvst__tile > a:hover::before { opacity: 1; }
.kv .kvst__ic { position: relative; flex: none; display: block; width: 40px; height: 40px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.kv .kvst__ic .pi { width: 40px; height: 40px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.kv .kvst__tile > a:hover .kvst__ic { transform: scale(1.08) rotate(-4deg); }
.kv .kvst__tx { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv .kvst__tx b { font-size: 14px; line-height: 1.25; font-weight: 600; color: var(--st-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvst__tx small { font-size: 12.5px; line-height: 1.3; color: var(--st-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .kvst__badge { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 8px; border-radius: 0 15px 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.kv .kvst__tile--b > a { padding-top: 21px; padding-bottom: 9px; }
.kv .kvst__badge .ico { width: 10px; height: 10px; }
.kv .kvst__badge--pop { background: rgba(255, 184, 77, .16); color: #FFC56B; }
.kv .kvst__badge--new { background: rgba(61, 220, 151, .15); color: #5BE6A8; }
.kv .kvst__tile--all > a { border-color: rgba(142, 156, 255, .35); background: linear-gradient(135deg, rgba(93, 107, 251, .34) 0%, rgba(29, 159, 248, .18) 100%); }
.kv .kvst__tile--all > a:hover { border-color: rgba(142, 156, 255, .7); box-shadow: 0 18px 36px -16px rgba(70, 87, 240, .9); }
.kv .kvst__all-n { flex: none; min-width: 40px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.kv .kvst__tile--all .ico { flex: none; margin-left: auto; width: 18px; height: 18px; color: #C9D0FF; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.kv .kvst__tile--all > a:hover .ico { transform: translateX(4px); }

/* ---------- marquee ---------- */
.kv .kvst__mq { display: flex; align-items: center; gap: 18px; margin: 18px 0 0; }
.kv .kvst__mq-lbl { flex: none; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-3); }
.kv .kvst__mq-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kv .kvst__mq-track { display: flex; gap: 10px; width: max-content; margin: 0; padding: 4px 0; list-style: none; animation: kvst-mq 110s linear infinite; }
.kv .kvst__mq-track li { margin: 0; }
.kv .kvst__mq:hover .kvst__mq-track, .kv .kvst__mq:focus-within .kvst__mq-track { animation-play-state: paused; }
.kv .kvst__mq-track a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--st-line); background: rgba(255, 255, 255, .03); font-size: 13px; color: var(--st-ink-2) !important; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.kv .kvst__mq-track a:hover { color: var(--st-ink) !important; border-color: rgba(196, 205, 255, .3); background: rgba(255, 255, 255, .07); }
.kv .kvst__mq-track .pi { width: 30px; height: 30px; border-radius: 50%; filter: none; }
@keyframes kvst-mq { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- themes ---------- */
.kv .kvst__themes { margin: clamp(30px, 3.6vw, 44px) 0 0; padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--st-line); }
.kv .kvst__th-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.kv .kvst__h2 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--st-ink); }
.kv .kvst__h2-sub { display: inline-block; margin-left: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--st-ink-3); }
.kv .kvst__more { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: #AEB9FF !important; }
.kv .kvst__more:hover { color: #fff !important; }
.kv .kvst__more .ico { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.kv .kvst__more:hover .ico { transform: translateX(3px); }
.kv .kvst__th-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kv .kvst__th { --ac: #7381FD; position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 8px; border-radius: 18px; border: 1px solid rgba(196, 205, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-color .25s, box-shadow .4s; }
.kv .kvst__th:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ac) 55%, rgba(196, 205, 255, .2)); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--ac) 85%, transparent); }
.kv .kvst__shot { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
.kv .kvst__bar { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; background: #EEF0F6; }
.kv .kvst__bar i { width: 6px; height: 6px; border-radius: 50%; background: #C9CDD9; }
.kv .kvst__bar i:first-child { background: #FF6B5E; } .kv .kvst__bar i:nth-child(2) { background: #FFC24B; } .kv .kvst__bar i:nth-child(3) { background: #36D07A; }
.kv .kvst__bar span { margin-left: 6px; padding: 1px 8px; border-radius: 5px; background: #fff; font-family: var(--mono); font-size: 9.5px; line-height: 14px; color: #6B7186; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .kvst__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--ac) 14%, #F2F3F8); }
.kv .kvst__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 0; }
.kv .kvst__th:hover .kvst__img img { transform: scale(1.06); }
.kv .kvst__tb { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(9, 12, 29, .84); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.kv .kvst__th-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 12px 6px 4px; }
.kv .kvst__th-body h3 { margin: 0; font-size: 16.5px; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; color: var(--st-ink); }
.kv .kvst__th-body h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.kv .kvst__th-price { font-size: 12.5px; color: var(--st-ink-3); white-space: nowrap; }
.kv .kvst__th-price b { font-size: 14px; color: var(--st-ink); font-weight: 650; }
.kv .kvst__th-body p { grid-column: 1 / -1; margin: 3px 0 0; padding: 0; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: var(--st-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv .kvst__demo { position: relative; z-index: 1; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; height: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(61, 220, 151, .35); background: rgba(61, 220, 151, .08); font-size: 13px; font-weight: 600; color: #7CEDB9 !important; transition: background .2s, border-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.kv .kvst__demo i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; animation: kvst-ping 2.4s ease-out infinite; }
.kv .kvst__demo .ico { width: 13px; height: 13px; }
.kv .kvst__demo:hover { background: rgba(61, 220, 151, .16); border-color: rgba(61, 220, 151, .6); transform: translateY(-1px); }

/* ---------- responsive ---------- */
@media (max-width: 1319px) {
  .kv .kvst__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kv .kvst__wall > li:not(.kvst__tile--all):nth-child(n+15) { display: none; }
}
@media (max-width: 1179px) {
  .kv .kvst__top { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .kv .kvst__th-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 14px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: thin; scrollbar-color: rgba(196, 205, 255, .25) transparent; }
  .kv .kvst__th { flex: 0 0 clamp(250px, 34vw, 300px); scroll-snap-align: start; scroll-margin-left: var(--gutter); }
}
@media (max-width: 1080px) {
  .kv .kvst__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kv .kvst__wall > li:not(.kvst__tile--all):nth-child(n+15) { display: list-item; }
  .kv .kvst__wall > li:not(.kvst__tile--all):nth-child(n+16) { display: none; }
}
@media (max-width: 900px) {
  .kv .kvst__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kv .kvst__side { max-width: 560px; }
  .kv .kvst__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv .kvst__wall > li:not(.kvst__tile--all):nth-child(n+12) { display: none; }
}
@media (max-width: 640px) {
  .kv .kvst { padding-top: 32px; }
  .kv .kvst__eyebrow { margin-bottom: 16px; font-size: 12.5px; }
  .kv .kvst__title { font-size: clamp(34px, 10vw, 44px); letter-spacing: -.035em; }
  .kv .kvst__seg { display: block; }
  .kv .kvst__dot { display: none; }
  .kv .kvst__lede { font-size: 15.5px; }
  .kv .kvst__search { height: 54px; }
  .kv .kvst__go { padding: 0 14px; }
  .kv .kvst__btn { min-height: 48px; padding: 0 14px; font-size: 14.5px; }
  .kv .kvst__cats ul { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px var(--gutter) 6px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
  .kv .kvst__cats ul::-webkit-scrollbar { display: none; }
  .kv .kvst__cats li { flex: none; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .kv .kvst__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .kv .kvst__wall > li:not(.kvst__tile--all):nth-child(n+8) { display: none; }
  .kv .kvst__tile > a { gap: 10px; padding: 12px 10px; min-height: 70px; border-radius: 14px; }
  .kv .kvst__ic, .kv .kvst__ic .pi { width: 34px; height: 34px; }
  .kv .kvst__tx b { font-size: 13.5px; }
  .kv .kvst__badge { border-radius: 0 13px 0 10px; }
  .kv .kvst__tile--b > a { padding-top: 22px; padding-bottom: 8px; }
  .kv .kvst__mq { flex-direction: column; align-items: stretch; gap: 10px; }
  .kv .kvst__th-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kv .kvst__h2-sub { display: block; margin: 4px 0 0; }
  .kv .kvst__th { flex-basis: 78vw; }
}
@media (max-width: 380px) {
  .kv .kvst__ctas { flex-direction: column; }
  .kv .kvst__facts { font-size: 12.5px; gap: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv .kvst__in, .kv .kvst__orb, .kv .kvst__l2, .kv .kvst__live i, .kv .kvst__demo i { animation: none !important; }
  .kv .kvst__mq-track { animation: none; flex-wrap: wrap; width: auto; }
  .kv .kvst__mq-track li[aria-hidden="true"] { display: none; }
  .kv .kvst__mq-view { -webkit-mask-image: none; mask-image: none; max-height: 92px; }
  .kv .kvst__tile > a, .kv .kvst__th, .kv .kvst__img img, .kv .kvst__ic, .kv .kvst__btn, .kv .kvst__cat { transition: none; }
  .kv .kvst__tile > a:hover, .kv .kvst__th:hover, .kv .kvst__btn:hover, .kv .kvst__cat--more { padding-right: 12px; color: #AEB9FF !important; border-style: dashed; }
.kv .kvst__cat--more .ico { color: currentColor; filter: none; }
.kv .kvst__cat:hover { transform: none; }
  .kv .kvst__th:hover .kvst__img img, .kv .kvst__tile > a:hover .kvst__ic { transform: none; }
}

/* ---------- Packages and store kits: "Bought separately: $X" under the price, per selected edition (kv-buy.js [data-kv-sep-line], 20261529) ---------- */
.kv .buy__sep { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kv .buy__sep[hidden] { display: none; }