/**
 * Kultiva — site shell: utility bar, header, menus, header search, phone menu, footer.
 * Values from "Handoff — tokens", "Handoff — states", "Mobile — Menu" and the tablet boards.
 *
 * Header by width (Bootstrap breakpoints):
 *   below 768   64 px row: logo, call, menu. The Night strip shows on the home page only.
 *   768–991     72 px row: logo, search field, leasing list, Get a quote, menu.
 *   from 992    76 px row: logo, links, search, leasing list, Get a quote.
 * Every link shows from 1,200 px in English and from 1,400 px in Armenian;
 * narrower, Training, Locations and About move into More.
 */

/* ============================================
   UTILITY BAR (Night)
   ============================================ */

.k-utility {
    background: var(--k-band);
    color: var(--k-on-night-2);
    font-size: 14px;
}

.k-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
}

.k-utility__hours {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.k-utility__links {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.k-utility a {
    color: var(--k-on-night-2);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .k-utility a:hover {
        color: var(--k-white);
        text-decoration: underline;
    }
}

.k-utility .k-utility__phone {
    color: var(--k-white);
    font-weight: 600;
    white-space: nowrap;
}

.k-utility__staff-links {
    align-items: center;
    gap: 12px;
}

.k-staff-chip {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--k-radius-badge);
    background: var(--k-harvest);
    color: var(--k-night);
    font-family: var(--k-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

:lang(hy) .k-staff-chip {
    letter-spacing: 0;
    text-transform: none;
}

.k-utility .k-utility__staff {
    color: var(--k-white);
    font-weight: 700;
}

@media (min-width: 768px) {
    .k-utility__inner {
        min-height: 40px;
    }
}


/* ============================================
   LANGUAGE SWITCH (two POST forms styled as pills)
   ============================================ */

.k-lang {
    display: inline-flex;
    gap: 4px;
}

.k-lang form {
    margin: 0;
}

.k-lang__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--k-control);
    min-height: var(--k-control);
    padding: 2px 8px;
    border: 0;
    border-radius: var(--k-radius-tag);
    background: transparent;
    color: var(--k-on-night-2);
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .k-lang__btn:hover {
        color: var(--k-white);
    }
}

.k-lang__btn:not([aria-current="true"]):active {
    background: var(--k-on-night-edge);
    color: var(--k-white);
}

@media (prefers-reduced-motion: no-preference) {
    .k-lang__btn:active {
        transform: scale(0.97);
    }
}

.k-lang__btn[aria-current="true"] {
    background: var(--k-fill-navy);
    color: var(--k-white);
}

/* Phone menu: a two-cell switch on Ink */
.k-lang--menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: var(--k-radius-control);
    background: var(--k-fill-ink);
}

.k-lang--menu .k-lang__btn {
    width: 100%;
    min-height: var(--k-control);
    border-radius: var(--k-radius-tag);
    font-size: 14px;
    font-weight: 700;
}

.k-lang--menu .k-lang__btn[aria-current="true"] {
    background: var(--k-surface);
    color: var(--k-text-max);
}

.k-lang--footer .k-lang__btn {
    min-height: var(--k-control);
    padding: 4px 8px;
}

/* A finger needs 44 px; from 768 px the switch is as compact as before */
@media (min-width: 768px) {
    .k-lang__btn {
        min-width: 0;
        min-height: 28px;
    }

    .k-lang--footer .k-lang__btn {
        min-height: 32px;
    }
}


/* ============================================
   HEADER (white, sticky)
   ============================================ */

/* A link to a section, and the focus walking back with Shift+Tab, stop below the header (65 px on phones,
   73 px from 768, 77 px from 992) and a little more */
html {
    scroll-padding-top: 72px;
}

@media (min-width: 768px) {
    html {
        scroll-padding-top: 84px;
    }
}

@media (min-width: 992px) {
    html {
        scroll-padding-top: 88px;
    }
}

.k-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--k-surface);
    border-bottom: 1px solid var(--k-line);
    /* The header keeps its place while one page gives way to the next (see PAGE TO PAGE below) */
    view-transition-name: k-header;
}

/* A material, not a lid: the page shows through, softened, as it scrolls under. The search panel and the
   menus inside keep their own white. Solid again for a visitor who asked for less transparency. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .k-header {
        background: var(--k-header-bg);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .k-header {
        background: var(--k-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.k-header__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 64px;
}

.k-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--k-control);
    margin-right: 16px;
    line-height: 0;
}

.k-logo img {
    display: block;
    height: 22px;
    width: auto;
}

.k-nav {
    display: none;
    align-items: center;
    gap: 2px;
}

.k-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--k-control);
    padding: 0 12px;
    border: 0;
    border-radius: var(--k-radius-nav);
    background: transparent;
    color: var(--k-text-strong);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.k-nav__link[aria-expanded="true"] {
    background: var(--k-surface-2);
    color: var(--k-text-max);
}

@media (hover: hover) and (pointer: fine) {
    .k-nav__link:hover {
        background: var(--k-surface-2);
        color: var(--k-text-max);
    }
}

.k-nav__link:active {
    background: var(--k-surface-3);
    color: var(--k-text-max);
}

@media (prefers-reduced-motion: no-preference) {
    .k-nav__link:active {
        transform: scale(0.97);
    }
}

.k-nav__link[aria-current="page"],
.k-nav__link.is-active {
    background: var(--k-surface-2);
    box-shadow: inset 0 -2px 0 var(--k-green);
    color: var(--k-text-max);
}

.k-nav__link .bi-chevron-down {
    font-size: 14px;
    transition: transform var(--k-base) var(--k-ease);
}

.k-nav__link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Training, Locations and About sit in the row on wide screens, in More otherwise */
.k-nav__extra {
    display: none;
}

.k-rate {
    display: inline-block;
    padding: 4px 6px;
    border-radius: var(--k-radius-badge);
    background: var(--k-harvest);
    color: var(--k-night);
    font-family: var(--k-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.k-rate--lg {
    padding: 3px 6px;
    font-size: 14px;
}

.k-header__search {
    flex: 1 1 auto;
    max-width: 380px;
}

.k-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.k-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: var(--k-control);
    padding: 0;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-nav);
    background: var(--k-surface);
    color: var(--k-text-strong);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.k-icon-btn[aria-expanded="true"] {
    background: var(--k-surface-2);
    color: var(--k-text-strong);
}

@media (hover: hover) and (pointer: fine) {
    .k-icon-btn:hover {
        background: var(--k-surface-2);
        color: var(--k-text-strong);
    }
}

.k-icon-btn:active {
    background: var(--k-surface-3);
    color: var(--k-text-max);
}

@media (prefers-reduced-motion: no-preference) {
    .k-icon-btn:active {
        transform: scale(0.95);
    }
}

.k-icon-btn--call {
    border-color: var(--k-green);
    border-radius: var(--k-radius-control);
    background: var(--k-green);
    color: var(--k-white);
}

.k-icon-btn--call:active {
    border-color: var(--k-green-dark);
    background: var(--k-green-dark);
    color: var(--k-white);
}

@media (hover: hover) and (pointer: fine) {
    .k-icon-btn--call:hover {
        border-color: var(--k-green-dark);
        background: var(--k-green-dark);
        color: var(--k-white);
    }
}

.k-icon-btn--menu {
    border-radius: var(--k-radius-control);
}

.k-icon-btn--dark {
    border-color: var(--k-text-strong);
    border-radius: var(--k-radius-control);
    background: var(--k-fill-ink);
    color: var(--k-white);
}

.k-icon-btn--dark:active {
    border-color: var(--k-text-max);
    background: var(--k-band);
    color: var(--k-white);
}

@media (hover: hover) and (pointer: fine) {
    .k-icon-btn--dark:hover {
        border-color: var(--k-text-max);
        background: var(--k-band);
        color: var(--k-white);
    }
}

.k-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--k-green);
    color: var(--k-white);
    font-size: 12px;
    font-weight: 800;
    font-stretch: 100%;
    line-height: 20px;
    text-align: center;
}

.k-count--inline {
    position: static;
    display: inline-block;
}

@media (min-width: 768px) {
    .k-header__inner {
        min-height: 72px;
    }

    .k-logo img {
        height: 26px;
    }
}

@media (min-width: 992px) {
    .k-header__inner {
        min-height: 76px;
    }

    .k-nav {
        display: flex;
    }
}

@media (min-width: 1200px) {
    .k-logo img {
        height: 28px;
    }

    .k-header:not([data-lang="hy"]) .k-nav__extra {
        display: inline-flex;
    }

    .k-header:not([data-lang="hy"]) .k-nav__more {
        display: none;
    }
}

@media (min-width: 1400px) {
    .k-header[data-lang="hy"] .k-nav__extra {
        display: inline-flex;
    }

    .k-header[data-lang="hy"] .k-nav__more {
        display: none;
    }
}


/* ============================================
   DROPDOWN MENUS (Machinery, More), on Bootstrap's dropdown
   ============================================ */

.k-menu.dropdown-menu {
    --bs-dropdown-min-width: 240px;
    --bs-dropdown-padding-x: 8px;
    --bs-dropdown-padding-y: 8px;
    --bs-dropdown-spacer: 8px;
    --bs-dropdown-font-size: 16px;
    --bs-dropdown-color: var(--k-text-strong);
    --bs-dropdown-border-color: var(--k-line);
    --bs-dropdown-border-radius: var(--k-radius-button);
    --bs-dropdown-link-color: var(--k-text-strong);
    --bs-dropdown-link-hover-color: var(--k-text-max);
    --bs-dropdown-link-hover-bg: var(--k-surface-2);
    --bs-dropdown-link-active-color: var(--k-text-max);
    --bs-dropdown-link-active-bg: var(--k-surface-3);
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 0;
    --bs-dropdown-item-border-radius: var(--k-radius-nav);
    box-shadow: var(--k-shadow-hover);
}

/* The menu opens out of the button above it. Bootstrap places it with `transform`, so the entrance uses the
   separate scale and translate properties and leaves that alone. Opened from the keyboard it is simply
   there (the button then shows the focus ring): keys are pressed in quick succession and must not wait.
   Closing is instant. Browsers without @starting-style show the menu at once. */
@media (prefers-reduced-motion: no-preference) {
    .k-nav__link:not(:focus-visible) + .k-menu.dropdown-menu.show {
        transform-origin: 24px 0;
        transition: opacity var(--k-base) var(--k-ease-out), scale var(--k-base) var(--k-ease-out),
            translate var(--k-base) var(--k-ease-out);
    }

    @starting-style {
        .k-nav__link:not(:focus-visible) + .k-menu.dropdown-menu.show {
            opacity: 0;
            scale: 0.97;
            translate: 0 -6px;
        }
    }
}

.k-menu .k-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--k-control);
    font-weight: 600;
}

.k-menu .k-menu__item[aria-current="page"] {
    background: var(--k-surface-2);
    color: var(--k-text-max);
    font-weight: 700;
}

.k-menu .k-menu__item--all {
    margin-bottom: 4px;
}

.k-menu__count {
    font-family: var(--k-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--k-text-muted);
}


/* ============================================
   HEADER SEARCH
   One component in three places: under the desktop header ("panel"),
   in the tablet header row ("inline") and in the phone menu ("menu").
   ============================================ */

.k-search-panel {
    border-top: 1px solid var(--k-line);
    background: var(--k-surface);
}

.k-search-panel__inner {
    padding-block: 16px 20px;
}

.k-search {
    position: relative;
    margin: 0;
}

.k-search--panel {
    max-width: 720px;
}

.k-search__icon {
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--k-text-muted);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.k-search__input {
    width: 100%;
    min-height: var(--k-control-lg);
    padding: 0 16px 0 48px;
    border: 1px solid var(--k-field);
    border-radius: var(--k-radius-button);
    background: var(--k-input-soft);
    color: var(--k-text-max);
    font: inherit;
    font-size: 16px;
}

.k-search__input::placeholder {
    color: var(--k-text-muted);
    opacity: 1;
}

.k-search__input:focus {
    border-color: var(--k-text-strong);
    background: var(--k-surface);
    box-shadow: 0 0 0 2px var(--k-focus-inner), inset 0 0 0 1px var(--k-text-strong);
}

.k-search--inline .k-search__icon {
    left: 14px;
    top: 13px;
    font-size: 18px;
}

.k-search--inline .k-search__input {
    min-height: var(--k-control);
    padding-left: 42px;
    border-radius: var(--k-radius-control);
    background: var(--k-surface);
}

.k-search--menu .k-search__icon {
    left: 14px;
    top: 14px;
}

.k-search--menu .k-search__input {
    min-height: var(--k-control-lg);
    padding-left: 44px;
}

.k-search__popup {
    margin-top: 8px;
}

/* In the tablet header the results drop down over the page */
.k-search--inline .k-search__popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1030;
    width: min(480px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-button);
    background: var(--k-surface);
    box-shadow: var(--k-shadow-hover);
}

.k-search__results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-search__option a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 8px;
    border-radius: var(--k-radius-control);
    color: var(--k-text-strong);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.k-search__option a:active {
    background: var(--k-surface-3);
    color: var(--k-text-max);
}

@media (hover: hover) and (pointer: fine) {
    .k-search__option a:hover {
        background: var(--k-surface-2);
        color: var(--k-text-max);
    }
}

/* The suggestion picked with the arrow keys */
.k-search__option[aria-selected="true"] a {
    background: var(--k-surface-3);
    box-shadow: inset 3px 0 0 var(--k-green);
    color: var(--k-text-max);
}

.k-search__thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 2px;
    border-radius: var(--k-radius-nav);
    background: var(--k-surface-2);
    object-fit: contain;
    mix-blend-mode: multiply;
}

.k-search__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--k-text-muted);
    font-size: 20px;
}

.k-search__text {
    min-width: 0;
}

.k-search__name {
    display: block;
    font-weight: 700;
    line-height: 1.3;
}

.k-search__meta {
    display: block;
    font-size: 14px;
    color: var(--k-text-muted);
}

/* Loading: grey rows after 150 ms, never a spinner over the field */
.k-search__skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 8px;
}

.k-search__skeleton::before {
    content: "";
    flex: 0 0 44px;
    height: 44px;
    border-radius: var(--k-radius-nav);
    background: var(--k-surface-3);
}

.k-search__skeleton::after {
    content: "";
    flex: 0 1 60%;
    height: 14px;
    border-radius: var(--k-radius-nav);
    background: var(--k-surface-3);
}

.k-search__empty {
    padding: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--k-text);
}

.k-search__empty p {
    margin: 0 0 8px;
}

.k-search__empty a {
    font-weight: 700;
    text-underline-offset: 3px;
}


/* ============================================
   PHONE AND TABLET MENU (Bootstrap offcanvas, below 992 px)
   ============================================ */

.k-offcanvas.offcanvas {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: min(100vw, 420px);
    --bs-offcanvas-transition: transform var(--k-sheet) var(--k-ease-sheet);
    display: flex;
    flex-direction: column;
    border-left: 0;
    color: var(--k-text-strong);
}

.k-offcanvas__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--k-line);
}

.k-offcanvas__search {
    flex: 0 0 auto;
    padding: 12px 16px;
}

.k-offcanvas__body {
    flex: 1 1 auto;
    overflow-y: auto;
    /* The menu's scroll ends at the menu: the page behind does not take it over, and a pull at the top of the
       list does not reload the page (Android) */
    overscroll-behavior: contain;
    padding: 0 16px 16px;
}

.k-offcanvas__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 54px;
    border-bottom: 1px solid var(--k-line);
    color: var(--k-text-max);
    font-size: 20px;
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.2;
    text-decoration: none;
    transition: color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.k-offcanvas__link:hover {
    color: var(--k-text-max);
}

.k-offcanvas__link[aria-current="page"] {
    color: var(--k-text-green-strong);
}

.k-offcanvas__link:active {
    background: var(--k-surface-3);
}

/* Green is the page you are on; a mouse borrows it, a finger does not, or the row it touched would look
   current. A press gives a little, after 70 ms, so a scroll that starts on a row does not flinch it. */
@media (hover: hover) and (pointer: fine) {
    .k-offcanvas__link:hover {
        color: var(--k-text-green-strong);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .k-offcanvas__link:active {
        transform: scale(0.98);
        transition-delay: 0s, 70ms;
    }
}

.k-offcanvas__link .bi {
    font-size: 20px;
}

.k-offcanvas__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.k-offcanvas__group {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--k-line);
}

.k-offcanvas__group .k-offcanvas__link {
    min-height: 56px;
    border-bottom: 0;
}

.k-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.k-chip-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: var(--k-control);
    padding: 0 12px;
    border-radius: var(--k-radius-control);
    background: var(--k-surface-2);
    color: var(--k-text-strong);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .k-chip-link:active {
        transform: scale(0.97);
    }
}

.k-chip-link:active {
    background: var(--k-surface-3);
    color: var(--k-text-max);
}

@media (hover: hover) and (pointer: fine) {
    .k-chip-link:hover {
        background: var(--k-surface-3);
        color: var(--k-text-max);
    }
}

.k-chip-link span {
    font-family: var(--k-mono);
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-offcanvas__foot {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    background: var(--k-band);
    color: var(--k-white);
}

.k-offcanvas__foot .k-btn {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.k-offcanvas__row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 8px;
}

.k-offcanvas__row--single {
    grid-template-columns: 1fr;
}

/* WhatsApp and Telegram side by side */
.k-offcanvas__row--pair {
    grid-template-columns: 1fr 1fr;
}

.k-offcanvas__foot a.k-on-night-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--k-control);
    border: 1px solid #3A4A68;
    border-radius: var(--k-radius-control);
    color: var(--k-white);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--k-fast) ease-out, transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.k-offcanvas__foot a.k-on-night-link:active {
    background: var(--k-fill-ink);
}

@media (hover: hover) and (pointer: fine) {
    .k-offcanvas__foot a.k-on-night-link:hover {
        background: var(--k-fill-ink);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .k-offcanvas__foot a.k-on-night-link:active {
        transform: scale(0.97);
    }
}

.k-offcanvas__hours {
    margin: 0;
    font-size: 14px;
    color: var(--k-on-night-2);
}


/* ============================================
   MAIN AND MESSAGES
   ============================================ */

/* The skip link focuses <main>; no ring around the whole page */
#main:focus {
    outline: none;
    box-shadow: none;
}

.k-messages {
    padding-top: 16px;
}


/* ============================================
   FOOTER (Night)
   ============================================ */

.k-footer {
    background: var(--k-band);
    color: var(--k-on-night-2);
    font-size: 15px;
}

.k-footer__inner {
    padding-block: 48px 32px;
}

.k-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.k-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.k-footer__brand > a {
    display: flex;
    align-items: center;
    min-height: var(--k-control);
}

.k-footer__brand img {
    display: block;
    height: 26px;
    width: auto;
}

.k-footer__brand p {
    max-width: 340px;
    margin: 0;
    line-height: 1.6;
}

.k-footer address {
    margin: 0;
    font-style: normal;
    line-height: 1.7;
}

.k-footer a {
    color: var(--k-white);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .k-footer a:hover {
        text-decoration: underline;
    }
}

.k-footer address a {
    font-weight: 600;
}

/* Where to follow Kultiva: each network in its own colour and in words, so visitors who don't know the icons
   still get them. One column as wide as the widest button and rows as tall as the tallest, so they line up as a set */
.k-follow {
    display: inline-grid;
    grid-auto-rows: 1fr;
    gap: 10px;
    max-width: 100%;
    margin-top: 6px;
}

.k-footer .k-follow__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 14px;
    border-radius: var(--k-radius-button);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    line-height: 1.25;
}

.k-footer .k-follow__link:hover {
    text-decoration: none;
}

.k-footer .k-follow__link--whatsapp {
    background: var(--k-whatsapp);
    color: var(--k-night);
}

.k-footer .k-follow__link--whatsapp:active {
    background: var(--k-whatsapp-hover);
    color: var(--k-night);
}

@media (hover: hover) and (pointer: fine) {
    .k-footer .k-follow__link--whatsapp:hover {
        background: var(--k-whatsapp-hover);
        color: var(--k-night);
    }
}

.k-footer .k-follow__link--facebook {
    background: var(--k-facebook);
    color: var(--k-white);
}

.k-footer .k-follow__link--facebook:active {
    background: var(--k-facebook-hover);
    color: var(--k-white);
}

@media (hover: hover) and (pointer: fine) {
    .k-footer .k-follow__link--facebook:hover {
        background: var(--k-facebook-hover);
        color: var(--k-white);
    }
}

.k-footer .k-follow__link--telegram {
    background: var(--k-telegram);
    color: var(--k-night);
}

.k-footer .k-follow__link--telegram:active {
    background: var(--k-telegram-hover);
    color: var(--k-night);
}

@media (hover: hover) and (pointer: fine) {
    .k-footer .k-follow__link--telegram:hover {
        background: var(--k-telegram-hover);
        color: var(--k-night);
    }
}

.k-follow__link .bi {
    font-size: 32px;
    line-height: 1;
}

.k-follow__words {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.k-follow__words strong {
    font-size: 17px;
    font-weight: 700;
}

.k-follow__words span {
    font-size: 14px;
}

/* Phones: full width, easy to tap */
@media (max-width: 575.98px) {
    .k-follow {
        display: grid;
        width: 100%;
    }
}

.k-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.k-footer .k-footer__col a {
    display: flex;
    align-items: center;
    min-height: var(--k-control);
    color: #E4E8EF;
}

.k-footer__heading {
    margin: 0 0 4px;
    font-family: var(--k-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-on-night-muted);
}

:lang(hy) .k-footer__heading {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

/* Phones skip the locations row: the Locations link and the home page list them (brief, answer 12) */
.k-footer__locations {
    display: none;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--k-on-night-edge);
}

@media (min-width: 768px) {
    .k-footer__locations {
        display: block;
    }
}

.k-footer__locations ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 16px 32px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    line-height: 1.5;
}

.k-footer__locations li {
    display: flex;
    flex-direction: column;
}

.k-footer__place {
    color: var(--k-white);
    font-weight: 600;
}

.k-footer .k-footer__locations a {
    color: var(--k-on-night-2);
    font-variant-numeric: tabular-nums;
}

.k-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--k-on-night-edge);
    font-size: 13px;
    color: var(--k-on-night-muted);
}

/* Phones: no text under 14 px (brief, answer 1; QA-014); the footer's language buttons inherit it */
@media (max-width: 767.98px) {
    .k-footer__heading,
    .k-footer__bottom {
        font-size: 14px;
    }
}

/* Networks without a labelled button yet (Instagram, YouTube, Telegram), under the follow buttons */
.k-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.k-footer .k-social a {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: var(--k-control);
    border: 1px solid var(--k-on-night-edge);
    border-radius: var(--k-radius-control);
    color: var(--k-on-night-2);
    font-size: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .k-footer .k-social a:hover {
        color: var(--k-white);
        text-decoration: none;
    }
}

@media (min-width: 768px) {
    .k-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .k-footer__col {
        gap: 10px;
    }

    .k-footer .k-footer__col a,
    .k-footer__brand > a {
        min-height: 0;
    }
}

@media (min-width: 992px) {
    .k-footer__inner {
        padding-block: 72px 32px;
    }

    .k-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .k-footer__locations ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Leaving is quicker than arriving: the visitor has already decided */
.k-offcanvas.offcanvas.hiding {
    --bs-offcanvas-transition: transform var(--k-base) var(--k-ease-sheet);
}

/* The menu's rows arrive one after another, from the side the menu came from, so the eye is led down the
   list: thirty milliseconds apart, all settled in under half a second, and a row can be pressed before it
   has. Opened from the keyboard (static/js/motion.js marks it is-instant), the menu and its rows are
   simply there. */
@media (prefers-reduced-motion: no-preference) {
    /* Longhands, so the delays below are not reset by a shorthand */
    .k-offcanvas:is(.showing, .show):not(.is-instant) :is(.k-offcanvas__search, .k-offcanvas__body > *, .k-offcanvas__foot) {
        animation-name: k-menu-row;
        animation-duration: var(--k-base);
        animation-timing-function: var(--k-ease-out);
        animation-fill-mode: backwards;
    }

    .k-offcanvas__search { animation-delay: 30ms; }
    .k-offcanvas__body > :nth-child(1) { animation-delay: 60ms; }
    .k-offcanvas__body > :nth-child(2) { animation-delay: 90ms; }
    .k-offcanvas__body > :nth-child(3) { animation-delay: 120ms; }
    .k-offcanvas__body > :nth-child(4) { animation-delay: 150ms; }
    .k-offcanvas__body > :nth-child(5) { animation-delay: 180ms; }
    .k-offcanvas__body > :nth-child(6) { animation-delay: 210ms; }
    .k-offcanvas__body > :nth-child(n + 7) { animation-delay: 240ms; }
    .k-offcanvas__foot { animation-delay: 240ms; }
}

@keyframes k-menu-row {
    from {
        opacity: 0;
        translate: 16px 0;
    }
}

.k-offcanvas.offcanvas.is-instant {
    --bs-offcanvas-transition: none;
}

/* The menu can be pushed back to the right with a finger (static/js/motion.js): the browser keeps the
   up-and-down scrolling and leaves the sideways movement to the script. The list inside scrolls by itself,
   so it needs the same rule: a touch is judged up to the nearest part that scrolls. */
.k-offcanvas.offcanvas,
.k-offcanvas__body {
    touch-action: pan-y;
}


/* ============================================
   PAGE TO PAGE
   One page gives way to the next with a short cross-fade instead of a white flash. The header is named, so it
   stays where it is, and a machine's photo travels from the card that was pressed to its place on the product
   page (static/js/motion.js names the photo at the press; pages/product.css names where it lands). Public
   pages only: the staff pages do not load this file. Browsers without cross-document view transitions load
   the next page as before.
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: var(--k-fast);
    }

    ::view-transition-group(k-machine) {
        animation-duration: var(--k-sheet);
        animation-timing-function: var(--k-ease-sheet);
    }

    /* On a phone a link is a step forward and Back a step back, as in the phone's own apps: the new page
       comes in from the side it belongs to and the old one leaves by the other (templates/base.html says
       which way the visitor is going). The header and the travelling photo are their own layers and are not
       part of this. Wider screens keep the plain cross-fade. */
    @media (max-width: 767.98px) {
        html:active-view-transition-type(forward)::view-transition-old(root) {
            animation: k-page-leave-left var(--k-slow) var(--k-ease-sheet) both;
        }

        html:active-view-transition-type(forward)::view-transition-new(root) {
            animation: k-page-come-right var(--k-slow) var(--k-ease-sheet) both;
        }

        html:active-view-transition-type(back)::view-transition-old(root) {
            animation: k-page-leave-right var(--k-slow) var(--k-ease-sheet) both;
        }

        html:active-view-transition-type(back)::view-transition-new(root) {
            animation: k-page-come-left var(--k-slow) var(--k-ease-sheet) both;
        }
    }

    /* A product photo is square and sits in a box wider than itself, on the card and on the product page
       alike. Each picture of it takes the travelling box's height and is centred, so the machine is the
       same size in the outgoing and the incoming picture and the two never show side by side on the way. */
    ::view-transition-old(k-machine),
    ::view-transition-new(k-machine) {
        left: 50%;
        width: auto;
        height: 100%;
        translate: -50% 0;
    }
}


@keyframes k-page-come-right {
    from {
        opacity: 0;
        translate: 12% 0;
    }
}

@keyframes k-page-leave-left {
    to {
        opacity: 0;
        translate: -6% 0;
    }
}

@keyframes k-page-come-left {
    from {
        opacity: 0;
        translate: -12% 0;
    }
}

@keyframes k-page-leave-right {
    to {
        opacity: 0;
        translate: 6% 0;
    }
}

/* ============================================
   DARK (a preview; the roles are in base.css)
   What the roles cannot say by themselves.
   ============================================ */

/* The wordmark has a dark and a light drawing */
:root[data-theme="dark"] .k-logo img {
    content: url("../assets/images/kultiva-logo-reverse.be6bf7a657b0.svg");
}

/* A suggestion's photo is blended into the list behind it; on a dark list it sits on its own light square */
:root[data-theme="dark"] .k-search__thumb {
    background: var(--k-ground);
    mix-blend-mode: normal;
}