/* 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(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. */
.tygh-header > div.kv-header { padding-top: 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(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(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(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; } }
/* 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; 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; }
}