/**
 * Kultiva — shared components: buttons, links, focus, forms, alerts, cards,
 * chips, dialogs. Every class is k-*, apart from the Bootstrap controls the
 * site still uses (forms, alerts, modal, offcanvas), which are restyled here.
 * Values from "Handoff — states".
 */

/* ============================================
   BUTTONS
   Primary: the one main action per view, 52 px. Secondary: outlined, 48 px.
   ============================================ */

.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--k-control-lg);
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: var(--k-radius-button);
    background: transparent;
    color: var(--k-text-strong);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, border-color var(--k-fast) ease-out, color var(--k-fast) ease-out,
        transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.k-btn .bi {
    font-size: 20px;
    line-height: 1;
}

.k-btn--primary {
    min-height: var(--k-control-lg);
    padding: 0 20px;
    border-color: var(--k-green);
    background: var(--k-green);
    color: var(--k-white);
    font-size: 16px;
    font-weight: 800;
}

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

.k-btn--primary:active {
    border-color: var(--k-green-press);
    background: var(--k-green-press);
    color: var(--k-white);
}

.k-btn--secondary {
    border-color: var(--k-text-strong);
    background: var(--k-surface);
    color: var(--k-text-strong);
}

.k-btn--secondary:hover {
    color: var(--k-text-strong);
}

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

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

.k-btn:disabled:not([aria-busy="true"]),
.k-btn[aria-disabled="true"] {
    border-color: var(--k-line);
    background: var(--k-line);
    color: var(--k-text-muted);
    font-weight: 700;
    cursor: not-allowed;
}

.k-btn--secondary:disabled:not([aria-busy="true"]),
.k-btn--secondary[aria-disabled="true"] {
    border-style: dashed;
    border-color: var(--k-chip-line);
    background: var(--k-surface);
    font-weight: 600;
}

/* Busy is not disabled: the button keeps its colour, dimmed, and the pointer says it is working. It keeps
   the width and blocks a second press (a disabled button ignores it; any other stops listening). */
.k-btn[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

.k-btn[aria-busy="true"]:not(:disabled) {
    pointer-events: none;
}

.k-btn--primary[aria-busy="true"] {
    border-color: var(--k-green);
    background: var(--k-green);
}

/* A button gives under the finger on the way down, before the page answers */
@media (prefers-reduced-motion: no-preference) {
    .k-btn:not(:disabled):not([aria-disabled="true"]):active {
        transform: scale(0.97);
    }
}

/* "Get a quote" in the header row */
.k-btn--header {
    min-height: var(--k-control);
    padding: 0 18px;
    border-radius: var(--k-radius-nav);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.k-btn--block {
    width: 100%;
}

.k-btn--lg {
    min-height: var(--k-control-lg);
    padding: 0 24px;
    font-size: 17px;
}

/* Ink: a strong action that isn't the page's one primary (the finder's submit) */
.k-btn--ink {
    border-color: var(--k-text-strong);
    background: var(--k-fill-ink);
    color: var(--k-white);
}

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

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

/* Harvest: the one action on a Night band */
.k-btn--harvest {
    border-color: var(--k-harvest);
    background: var(--k-harvest);
    color: var(--k-night);
    font-weight: 800;
}

.k-btn--harvest:active {
    border-color: #E0B21E;
    background: #E0B21E;
    color: var(--k-night);
}

@media (hover: hover) and (pointer: fine) {
    .k-btn--harvest:hover {
        border-color: #E0B21E;
        background: #E0B21E;
        color: var(--k-night);
    }
}

/* Outline on a light surface (WhatsApp beside a primary button) */
.k-btn--outline {
    border-width: 1px;
    border-color: var(--k-chip-line);
    background: var(--k-surface);
    color: var(--k-text-strong);
}

.k-btn--outline:hover,
.k-btn--outline:active {
    color: var(--k-text-strong);
}

.k-btn--outline:active {
    background: var(--k-surface-2);
}

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

@media (min-width: 992px) {
    .k-btn--primary:not(.k-btn--header) {
        font-size: 17px;
    }
}

/* Text link that acts as a button ("Ask for a price") */
.k-link {
    color: var(--k-text-strong);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .k-link:hover {
        color: var(--k-text-green);
        text-decoration-thickness: 2px;
    }
}

.k-link:active {
    color: var(--k-green-press);
}


/* ============================================
   FOCUS ON BOOTSTRAP CONTROLS
   Bootstrap swaps the outline for its own glow; put the site's one ring back.
   ============================================ */

.btn-close:focus-visible {
    outline: 3px solid var(--k-harvest);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--k-focus-inner);
}


/* ============================================
   FORMS
   ============================================ */

.form-control,
.form-select {
    border-color: var(--k-field);
    border-radius: var(--k-radius-control);
    color: var(--k-text-max);
}

/* The select's arrow in the site's ink, not Bootstrap's grey (stroke: --k-text-strong; dark: at the end) */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231C2A44' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

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

/* Under a mouse a field shows it can be typed in; the focus ring and an error keep their own border */
@media (hover: hover) and (pointer: fine) {
    .form-control:hover:not(:focus):not(:disabled):not(.is-invalid):not([aria-invalid="true"]),
    .form-select:hover:not(:focus):not(:disabled):not(.is-invalid):not([aria-invalid="true"]) {
        border-color: var(--k-text-strong);
    }
}

.form-control:focus,
.form-select:focus {
    border-color: var(--k-text-strong);
    outline: 3px solid var(--k-harvest);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--k-focus-inner), inset 0 0 0 1px var(--k-text-strong);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--k-danger);
}


/* ============================================
   ALERTS (Django messages), on the status tokens
   ============================================ */

.alert {
    --bs-alert-padding-x: 16px;
    --bs-alert-padding-y: 14px;
    --bs-alert-border-radius: var(--k-radius-control);
    font-weight: 500;
}

.alert-success {
    --bs-alert-color: var(--k-success);
    --bs-alert-bg: var(--k-success-bg);
    --bs-alert-border-color: #C4DBBF;
    --bs-alert-link-color: var(--k-success);
}

.alert-warning {
    --bs-alert-color: var(--k-warning);
    --bs-alert-bg: var(--k-warning-bg);
    --bs-alert-border-color: #EBD98F;
    --bs-alert-link-color: var(--k-warning);
}

.alert-danger {
    --bs-alert-color: var(--k-danger);
    --bs-alert-bg: var(--k-danger-bg);
    --bs-alert-border-color: #F4C7C2;
    --bs-alert-link-color: var(--k-danger);
}

.alert-info {
    --bs-alert-color: var(--k-info);
    --bs-alert-bg: var(--k-info-bg);
    --bs-alert-border-color: #C9D1E2;
    --bs-alert-link-color: var(--k-info);
}


/* ============================================
   SECTION HEADINGS
   ============================================ */

/* Mono label above a heading */
.k-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--k-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-text-green);
}

.k-eyebrow--rule::before {
    content: "";
    flex: 0 0 28px;
    height: 2px;
    background: currentColor;
}

.k-eyebrow--harvest {
    color: var(--k-harvest);
}

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

/* Phones: no text under 14 px (brief, answer 1; QA-014) */
@media (max-width: 767.98px) {
    .k-eyebrow {
        font-size: 14px;
    }
}

/* Heading on the left, "see all" on the right */
.k-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 16px;
}

.k-section-head h2 {
    margin: 0;
}

.k-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: var(--k-control);
    min-height: var(--k-control);
    color: var(--k-text-strong);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .k-arrow-link:hover {
        color: var(--k-text-green-strong);
    }
}

@media (min-width: 768px) {
    .k-section-head {
        margin-bottom: 32px;
    }
}


/* ============================================
   FIELDS AND CHOICE CHIPS
   ============================================ */

.k-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.k-field__label {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-family: var(--k-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

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

.form-select.k-select {
    min-height: var(--k-control-lg);
    padding-left: 16px;
    color: var(--k-text-strong);
    font-size: 16px;
    font-weight: 600;
}

/* Radios that look like chips (Bootstrap's btn-check keeps them working without JavaScript) */
.k-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}

.k-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--k-control);
    margin: 0;
    border: 1px solid var(--k-chip-line);
    border-radius: var(--k-radius-control);
    background: var(--k-surface);
    color: var(--k-text-strong);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--k-fast) ease-out, 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-choice:hover {
        background: var(--k-surface-2);
    }
}

.btn-check:not(:checked):not(:disabled) + .k-choice:active {
    background: var(--k-surface-3);
}

@media (prefers-reduced-motion: no-preference) {
    .btn-check:not(:disabled) + .k-choice:active {
        transform: scale(0.97);
    }
}

.btn-check:checked + .k-choice {
    border-color: var(--k-text-strong);
    background: var(--k-fill-ink);
    color: var(--k-white);
}

.btn-check:disabled + .k-choice {
    border-style: dashed;
    background: var(--k-surface);
    color: var(--k-text-muted);
    cursor: not-allowed;
}

.btn-check:focus-visible + .k-choice {
    outline: 3px solid var(--k-harvest);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--k-focus-inner);
}


/* ============================================
   CHECKBOXES AND RADIOS (the catalogue's filters, the consent box)
   Drawn rather than the browser's own. The box keeps the size the page gives it, so nothing moves; the
   label around it is the target. Focus is the site's one ring (base.css).
   ============================================ */

.k-option input,
.k-rconsent__label input {
    display: grid;
    place-content: center;
    border: 1.5px solid var(--k-field);
    border-radius: var(--k-radius-badge);
    background: var(--k-surface);
    cursor: pointer;
    appearance: none;
    transition: background-color var(--k-fast) ease-out, border-color var(--k-fast) ease-out;
}

.k-option input[type="radio"] {
    border-radius: 50%;
}

.k-option input:checked,
.k-rconsent__label input:checked {
    border-color: var(--k-green);
    background: var(--k-green);
}

/* The tick: two sides of a box, turned */
.k-option input[type="checkbox"]:checked::before,
.k-rconsent__label input:checked::before {
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -2px;
    border: solid var(--k-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.k-option input[type="radio"]:checked::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px var(--k-white);
}

.k-option input:disabled {
    border-color: var(--k-line);
    background: var(--k-surface-2);
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    .k-option:hover input:not(:disabled):not(:checked),
    .k-rconsent__label:hover input:not(:checked):not([aria-invalid="true"]) {
        border-color: var(--k-text-strong);
    }

    .k-rconsent__label:hover input:checked {
        border-color: var(--k-green-dark);
        background: var(--k-green-dark);
    }
}

/* In the filter sheet and panel the options sit beside chips, and a chosen one is filled the same ink */
@media (max-width: 991.98px) {
    .k-option input:checked {
        border-color: var(--k-text-strong);
        background: var(--k-fill-ink);
    }
}


/* ============================================
   SPEC TAGS
   ============================================ */

.k-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-tag {
    padding: 4px 9px;
    border-radius: var(--k-radius-tag);
    background: var(--k-tag-bg);
    color: var(--k-text-navy);
    font-family: var(--k-mono);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .k-tag {
        font-size: 13px;
    }
}


/* ============================================
   PRODUCT CARD (templates/includes/product_card.html)
   Photos sit on a Ground tile and multiply, so white backgrounds disappear.
   ============================================ */

.k-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-dialog);
    background: var(--k-surface);
    transition: box-shadow var(--k-base) var(--k-ease), border-color var(--k-base) var(--k-ease),
        transform var(--k-fast) var(--k-ease-out);
    -webkit-tap-highlight-color: transparent;
}

/* Hover is for a mouse: on a touch screen it would stay on the card after the tap */
@media (hover: hover) and (pointer: fine) {
    .k-card:hover {
        border-color: var(--k-chip-line);
        box-shadow: var(--k-shadow-hover);
    }
}

/* A pressed card gives a little. The short wait keeps it still when the finger only starts a scroll. */
@media (prefers-reduced-motion: no-preference) {
    .k-card:active {
        transform: scale(0.98);
        transition-delay: 0s, 0s, 70ms;
    }
}

.k-card__media {
    position: relative;
    padding: 12px;
    background: var(--k-surface-2);
    isolation: isolate;
}

.k-card__media > a {
    display: block;
}

.k-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.k-card__nophoto {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    color: var(--k-text-muted);
    font-size: 32px;
}

.k-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}

.k-card__brand {
    margin: 0 0 2px;
    font-family: var(--k-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

:lang(hy) .k-card__brand {
    letter-spacing: 0;
}

.k-card__name {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.15;
    /* Long Armenian words ("եղջերավորների") are wider than a phone card: break them rather than spill */
    overflow-wrap: anywhere;
}

.k-card__name a {
    color: var(--k-text-max);
    text-decoration: none;
}

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

.k-card__price {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--k-line-soft);
}

.k-card__amount {
    font-size: 20px;
    font-weight: 800;
    font-stretch: 90%;
    font-variant-numeric: tabular-nums;
    color: var(--k-text-max);
}

.k-card__amount--ask {
    font-size: 18px;
}

.k-card__monthly,
.k-card__ask {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--k-text-green);
}

.k-card__ask {
    position: relative;
    font-weight: 700;
}

/* One line of 14 px text is a small thing to hit with a thumb: the link answers 12 px above and below its
   words as well (45 px in all), and nothing in the card moves for it */
.k-card__ask::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
}

/* Phones fold power into the brand line ("John Deere · 50 HP") and drop the tags */
.k-card__brand-power {
    display: none;
}

@media (max-width: 767.98px) {
    .k-card__brand-power {
        display: inline;
    }

    /* The monthly payment first, the price under it, on every card (board "Mobile — Catalog") */
    .k-card__price {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 4px;
        border-top: 0;
    }

    .k-card__monthly {
        font-size: 15px;
        font-weight: 800;
    }

    .k-card__amount {
        font-size: 14px;
        font-weight: 400;
        color: var(--k-text-muted);
    }

    .k-card__amount--ask {
        font-weight: 700;
        color: var(--k-text-max);
    }

    .k-card .k-tags {
        display: none;
    }

    .k-card__brand {
        font-family: var(--k-sans);
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }
}

@media (min-width: 768px) {
    .k-card__media {
        padding: 16px;
    }

    .k-card__body {
        gap: 12px;
        padding: 16px 18px 18px;
    }

    .k-card__brand {
        font-size: 12px;
    }

    .k-card__name,
    .k-card__amount {
        font-size: 20px;
    }
}


/* ============================================
   DRAWN MAP (templates/includes/network_map.html)
   ============================================ */

.k-map {
    margin: 0;
    padding: 24px;
    border-radius: var(--k-radius-panel);
    background: var(--k-surface-2);
}

.k-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

.k-map__land {
    fill: var(--k-surface);
    stroke: #B8C2AE;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.k-map__lake {
    fill: #D9E6EE;
    stroke: #B9CDD9;
    stroke-width: 1;
}

/* Map text is in drawing units: the 560-unit drawing is about 570 px wide on a desktop, so 12 units read as
   12 px there; phones get larger units at the end of this section */
.k-map__lake-name {
    fill: #6A7F8C;
    font-family: var(--k-sans);
    font-size: 12px;
    font-style: italic;
}

.k-map__region {
    fill: #8A9484;
    font-family: var(--k-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

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

.k-map__links path {
    fill: none;
    stroke: var(--k-green);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
    opacity: 0.6;
}

.k-map__pin {
    fill: var(--k-text-green);
    stroke: var(--k-surface);
    stroke-width: 2.5;
}

.k-map__head {
    fill: var(--k-text-strong);
    stroke: var(--k-surface);
    stroke-width: 2.5;
}

.k-map__name {
    fill: var(--k-text-strong);
    font-family: var(--k-sans);
    font-size: 13px;
    font-weight: 700;
}

.k-map__sub {
    fill: var(--k-text-muted);
    font-family: var(--k-sans);
    font-size: 12px;
    font-weight: 500;
}

/* Phones: the drawing is about 320 px wide, so its text takes 20 units (11 px or more on screen) and the frame
   less padding. "Head office" under the name stays in the legend, beside the square; the lake's name moves
   up into the lake and the provinces' names a little left, clear of the names and pins beside them. */
@media (max-width: 575.98px) {
    .k-map {
        padding: 12px;
    }

    .k-map__name,
    .k-map__region,
    .k-map__lake-name {
        font-size: 20px;
    }

    .k-map__lake-name {
        transform: translateY(-8px);
    }

    .k-map__region {
        letter-spacing: 0;
        text-transform: none;
        transform: translateX(-12px);
    }

    .k-map__sub {
        display: none;
    }
}

.k-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-map__legend > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.k-map__key {
    flex: 0 0 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--k-green);
}

.k-map__key--head {
    border-radius: 3px;
    background: var(--k-fill-ink);
}


/* ============================================
   DIALOG: Bootstrap's modal, centred from 768 px, a bottom sheet below
   (share on the product page, directions on Locations)
   ============================================ */

.k-dialog .modal-content {
    border: 0;
    border-radius: var(--k-radius-dialog);
    box-shadow: var(--k-shadow-dialog);
}

.k-dialog .modal-header {
    gap: 12px;
    padding: 16px 12px 12px 24px;
    border-bottom: 1px solid var(--k-line);
}

.k-dialog .modal-title {
    margin: 0;
    color: var(--k-text-max);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

/* A dialog taller than the screen scrolls in itself: the page behind does not take the scroll over */
.k-dialog {
    overscroll-behavior: contain;
}

.k-dialog .modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
}

.k-dialog .modal-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--k-line);
}

.k-dialog .modal-footer > * {
    margin: 0;
}

/* Below 768 px the dialog is a bottom sheet */
@media (max-width: 767.98px) {
    .k-dialog .modal-dialog {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        max-width: none;
        margin: 0;
    }

    .k-dialog.fade .modal-dialog {
        transform: translateY(32px);
    }

    .k-dialog.show .modal-dialog {
        transform: none;
    }

    .k-dialog .modal-content {
        border-radius: var(--k-radius-sheet) var(--k-radius-sheet) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        /* The first shadow is the sheet's own white carried on below it: pulled up, it shows no gap */
        box-shadow: 0 160px 0 var(--k-surface), var(--k-shadow-dialog);
    }

    /* The sheet is held by its head and can be pushed down with a finger (static/js/motion.js); the bar
       says so. The head gives up scrolling, so the browser leaves the movement to the script. */
    .k-dialog .modal-header {
        position: relative;
        touch-action: none;
    }

    .k-dialog .modal-header::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: var(--k-chip-line);
    }

    .k-dialog .modal-footer .k-btn {
        width: 100%;
    }
}

/* The sheet comes up from the edge it leaves by, and leaves quicker than it came (--k-base against
   --k-sheet): the visitor has already decided. The backdrop does the dimming, so the sheet stays solid:
   opaque from the first frame on the way in, and until it has left on the way out (Bootstrap waits that long
   before it hides the dialog). */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .k-dialog.fade {
        transition: opacity 0s linear var(--k-base);
    }

    .k-dialog.fade.show {
        transition-delay: 0s;
    }

    .k-dialog.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform var(--k-base) var(--k-ease-sheet);
    }

    .k-dialog.show .modal-dialog {
        transform: none;
        transition-duration: var(--k-sheet);
    }
}


/* ============================================
   COLLAPSIBLE (a <details>: a specification group, a centre's hours, "more" on About)
   It opens and closes over its own height instead of jumping, where the browser can animate to a height it
   has to measure; elsewhere it opens at once, as before. Height is the one layout property that moves on
   this site: nothing else can say "open". A group toggled from the keyboard is simply open.
   ============================================ */

@supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
        :is(.k-spec, .k-lcard__hours, .k-agov__more) {
            interpolate-size: allow-keywords;
        }

        :is(.k-spec, .k-lcard__hours, .k-agov__more)::details-content {
            block-size: 0;
            overflow: clip;
            transition: block-size var(--k-base) var(--k-ease-out), content-visibility var(--k-base) allow-discrete;
        }

        :is(.k-spec, .k-lcard__hours, .k-agov__more)[open]::details-content {
            block-size: auto;
        }

        :is(.k-spec, .k-lcard__hours, .k-agov__more):has(> summary:focus-visible)::details-content {
            transition: none;
        }
    }
}

/* ============================================
   BREADCRUMB AND NO-JAVASCRIPT FALLBACKS
   ============================================ */

.k-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 16px 0 0;
    list-style: none;
    font-size: 14px;
    color: var(--k-text-muted);
}

.k-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
}

.k-crumbs a {
    color: var(--k-text);
}

@media (hover: hover) and (pointer: fine) {
    .k-crumbs a:hover {
        color: var(--k-text-green-strong);
        text-decoration-thickness: 2px;
    }
}

.k-crumbs [aria-current] {
    color: var(--k-text-max);
    font-weight: 600;
}

/* Under a WhatsApp button outside opening hours: when a reply comes (includes/whatsapp_reply.html) */
.k-reply {
    margin: 6px 0 0;
    color: var(--k-text-muted);
    font-size: 14px;
    text-align: center;
}

/* Buttons only a page without JavaScript needs (apply a sort, update an estimate) */
.js .k-nojs {
    display: none !important;
}


/* ============================================
   DARK (a preview; the roles are in base.css)
   ============================================ */

/* The select's arrow, drawn in the dark --k-text-strong (an image cannot read a variable) */
:root[data-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F1F4F9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}