/*
 * Public site look (2026 refresh, "A"): loaded after Foundation 3 and app.css and overrides them without
 * changing the page structure or the classes/ids the page scripts use.
 *
 * Brand: navy #01467d (logo "SIGN", primary buttons and the product bar), light blue #8abed6 (logo
 * "BALTIC", accents only – white text on it fails contrast), ink #1f2933 on #f4f7fa.
 */

/* Roboto (variable 100–900, Google Fonts v51, SIL Open Font License 1.1), served from this site: visitors' IP
   addresses are not sent to Google, and the text shows right away in the fallback font (font-display: swap). */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bs-navy: #01467d;
    --bs-navy-dark: #003156;
    --bs-sky: #8abed6;
    --bs-sky-soft: #e6f1f8;
    --bs-ink: #1f2933;
    --bs-muted: #4b5563;
    --bs-line: #dce3eb;
    --bs-ground: #f4f7fa;
    --bs-field: #94a3b8;
    --bs-error: #b42318;
    --bs-radius: 10px;
}

/* ---------- Base ---------- */

/* Line height stays 1 on body like Foundation 3: the plate previews are fixed-height boxes laid out for it.
   Running text gets its spacing below. */
body {
    background: var(--bs-ground);
    font-weight: 400;
    font-size: 16px;
    color: var(--bs-ink);
}

p, li, dd, td, th, label, .text_block {
    line-height: 1.55;
}

body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td, label, input, select, textarea, button {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body, dl, dt, dd, ul, ol, li, p, blockquote, th, td {
    color: var(--bs-ink);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: #003a69;
    line-height: 1.3;
}

h2 { font-size: 22px; }
h4 { font-size: 22px; }
h5 { font-size: 17px; color: #003a69; }

a { color: var(--bs-navy); }
a:hover, a:focus { color: var(--bs-navy-dark); }

:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

/* Fields show focus with their own navy border and ring (below), not the amber outline on top of it. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

#wrap, #main { background: transparent; }

.row.white { background: transparent; }

/* ---------- Header ---------- */

.logo { margin: 22px 0 18px; }
.logo img { max-width: 230px; height: auto; }

.site_header_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 22px;
    margin: 30px 0 18px;
    min-height: 44px;
}

.menu.first {
    width: auto;
    margin: 0;
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
}

.menu.first a {
    margin: 0;
    font-size: 16px;
    color: var(--bs-ink);
    text-decoration: none;
    padding: 6px 0;
}

.menu.first a:hover {
    color: var(--bs-navy);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The open page: navy and bold, no underline (app.css underlines it). */
.menu.first a.active {
    color: var(--bs-navy);
    font-weight: 600;
    text-decoration: none;
}

.login_wrapper {
    position: static;
    margin: 0;
    display: flex;
    gap: 8px;
}

.login_btn {
    background: #fff;
    border: 1px solid var(--bs-navy);
    border-radius: 8px;
    padding: 0;
    margin: 0;
}

.login_btn a {
    display: block;
    padding: 9px 16px;
    color: var(--bs-navy);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.login_btn:hover,
.login_btn:active {
    background: var(--bs-sky-soft);
}

/* Header cart (was a strip above the content on product pages). */
#cart-container {
    position: static;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#cart-container .cart-button {
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bs-navy);
    color: #fff;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    border: 0;
}

#cart-container .cart-button:hover { background: var(--bs-navy-dark); }

/* "Krepšelis:" is read out, the icon shows it. */
#cart-container .cart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
#cart-container .cart-button svg { flex: none; }

#cart-container .cart-text,
#cart-container .cart-text span {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
}

/* Product bar */
.menu.second {
    height: auto;
    margin: 0 0 28px;
    background: var(--bs-navy);
    border-radius: var(--bs-radius);
    overflow: hidden;
    display: flex;
}

.menu.second > li {
    flex: 1 1 0;
    float: none;
    line-height: 1.3;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
}

.menu.second > li:last-child { border-right: 0; }

.menu.second > li a,
.nav-bar.menu.second > li > a:first-child {
    display: block;
    padding: 16px 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
}

.menu.second > li:hover,
.nav-bar > li:hover { background: var(--bs-navy-dark); }

.menu.second > li.active,
.nav-bar > li.active,
.nav-bar > li.active:hover {
    background: var(--bs-navy-dark);
    box-shadow: none;
}

/* The open product: the darker background over the item's full height, no underline. */
.menu.second > li.active > a { text-decoration: none; }

/* ---------- Buttons ---------- */

.button,
.button.secondary,
button.button,
.login_form_btn {
    background: var(--bs-navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 13px 32px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    text-shadow: none;
    line-height: 1.3;
    cursor: pointer;
}

.button:hover,
.button.secondary:hover,
.button.secondary:focus,
.button.secondary:active,
.login_form_btn:hover {
    background: var(--bs-navy-dark);
    color: #fff;
}

.button.verysmall.secondary,
.button.small.secondary,
.button.small {
    padding: 11px 22px;
    font-size: 15px;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border: 1px solid var(--bs-field);
    border-radius: 6px;
    box-shadow: none;
    color: var(--bs-ink);
    font-size: 16px;
    background-color: #fff;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select {
    min-height: 44px;
}

/* Selects draw their own chevron with room on the right (the native arrow sat on the border). */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 40px 0 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    cursor: pointer;
}

select::-ms-expand { display: none; }

/* "1 vnt." fits next to the chevron. */
select.width_80 { width: 104px; }

input:focus,
textarea:focus,
select:focus {
    border-color: var(--bs-navy);
    box-shadow: 0 0 0 3px rgba(1, 70, 125, 0.25);
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: -3px;
    accent-color: var(--bs-navy);
}

/* Examples in the fields read as examples, not as typed values. */
::placeholder { color: #8b96a3; opacity: 1; font-style: italic; }
input#order_text_input::placeholder,
input#order_text_input_big_number::placeholder,
input#order_text_input_small_number::placeholder { color: #b3bcc6; }

.requiered_field,
.error,
.form_error,
.changepass_error { color: var(--bs-error); }

/* Notes written in the pages as inline "color: red" 12 px text ("Pastaba: …"). */
span[style*="color: red"],
div[style*="color: red"],
p[style*="color: red"],
.red:not(h5) {
    font-size: 16px !important;
    line-height: 1.5;
    color: var(--bs-error) !important;
}

span[style*="color: red"] *,
div[style*="color: red"] *,
.red:not(h5) * {
    font-size: inherit;
    color: inherit;
}

input.error,
select.error,
textarea.error { border-color: var(--bs-error); }

/* ---------- Product pages ---------- */

h1.item_order_title,
h1.module_title {
    color: #003a69;
    font-size: 26px;
    font-weight: 500;
    text-transform: none;
}

.small_text,
.inline_text { color: var(--bs-muted); }

label.inline.name_table_label {
    font-size: 16px;
    font-weight: 400;
    color: var(--bs-ink);
}

/* Stickers (page and dialog): each column a centred stack – picture, title, type select (or the single
   name) at the column's width, "Kiekis: [n]" on one line, the unit price. */
#stickers_form .four.columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    text-align: center;
}

#stickers_form .four.columns > * { margin: 0; }

#stickers_form .sticker-row {
    width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#stickers_form .four.columns > h3 {
    font-size: 24px;
    font-weight: 500;
    color: #003a69;
}

/* The type select, or the single name in the same height, so the rows below line up across columns. */
#stickers_form .sticker-row:has(> .sticker-select),
#stickers_form .four.columns > p {
    min-height: 50px;
}

#stickers_form .four.columns > p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
}

#stickers_form select.sticker-select {
    display: block;
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

#stickers_form .sticker-row label {
    float: none;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

#stickers_form select.sticker-quantity {
    display: inline-block;
    float: none;
    width: 96px;
    margin: 0;
}

#stickers_form .price-column,
#stickers_form .price-column * {
    font-size: 15px;
    color: var(--bs-muted);
}

@media only screen and (max-width: 767px) {
    #stickers_form .four.columns { padding-bottom: 20px; }
}

/* House numbers (street plates step 2): card | number | preview (wider, so long numbers stay on one line) |
   quantity and price at the end of the row. */
#house_numbers .house_number_quantity select { width: 112px; }

#house_numbers .house_number_quantity .price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

#house_numbers .house_number_quantity .price label.inline_text { line-height: 1.3; }

#house_numbers .house_number_quantity .cur_price_tables { margin-top: 12px; }

@media only screen and (min-width: 768px) {
    #house_numbers .house_number_quantity {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }

    #house_numbers .house_number_quantity > br { display: none; }

    #house_numbers .house_number_quantity label.inline_text {
        float: none;
        margin-bottom: 6px;
    }

    #house_numbers .house_number_quantity .cur_price_tables {
        float: none;
        clear: none;
    }

    #house_numbers .house_number_quantity .cur_price_tables .price { padding-right: 0; }
}

/* Street name plate (step 1) on tablets: name | type | quantity on one line, the preview (at least 265 px wide,
   inline style) on its own line below; in a quarter of the row it pushed the page sideways. */
/* Type and quantity selects: wide enough for "10 vnt." next to the chevron (class "four" is a third of a column). */
#street_table select.four { width: auto; min-width: 112px; }

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    #street_table .row.collapse > .three.columns { width: 33.3333%; }

    #street_table .row.collapse > .three.columns:last-child {
        width: 100%;
        margin-top: 16px;
    }
}

/* Tablets: the card on its own line, then number | preview | quantity. */
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    #house_numbers .row > .five.columns {
        width: 100%;
        margin-bottom: 16px;
    }

    #house_numbers .row > .two.columns { width: 25%; }

    #house_numbers .row > .house_number_preview { width: 50%; }
}

/* Name plate colours: swatch above its radio, both centred in the grid cell; the swatch selects too. */
.color_choice {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 0;
    cursor: pointer;
}

.color_choice .color_example {
    display: block;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 2px solid #1b3280;
    border-radius: 6px;
}

.color_choice .radio_colors { margin: 0; }

.color_choice input:checked + .color_example {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bs-navy);
}

.color_choice:hover .color_example { border-color: var(--bs-navy); }

/* "Kaina:" shares the 40 px line of the price next to it. */
.price label.inline_text,
.price .inline_text {
    line-height: 40px;
    margin-bottom: 0;
}

/* Labels and the checkbox texts are as large as the red messages under them. */
/* These labels float above two <br>s (24 px in the 12 px columns): label height + margin must stay below
   that, or the field after them flows beside the label instead of under it. */
label.inline_text,
.inline_text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 4px;
}

h5.red,
.validated_box h5,
#validated_box_false h5 {
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-error);
}

/* Hints and secondary prices were light blue (#8abed6, ~2:1 on white). */
label#order_length,
#order_dimensions,
label#big_number_dimensions,
#small_number_dimensions,
#big_number_dimensions *,
#small_number_dimensions *,
.table_info_bottom_text,
.table_info_bottom_text span { color: var(--bs-muted); }

/* Phones: "Kaina: 20 EUR" on one line above a full-width "Į krepšelį" (the floated 40 px label stuck out of its
   21 px row and the button was drawn over it). */
@media only screen and (max-width: 767px) {
    .tables_border .price {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        float: none;
        width: 100%;
        margin: 0 0 12px;
        padding-right: 0;
        text-align: left;
    }

    .tables_border .price label.inline_text,
    .tables_border .price .inline_text {
        float: none;
        height: auto;
        margin: 0;
        line-height: 1.3;
    }

    .tables_border .price .cur_price { line-height: 1.3; }
}

/* Phones: the info texts under the order steps left-aligned (justified, the narrow column opened wide gaps
   between words), the icon smaller, no 50 px right padding. */
@media only screen and (max-width: 767px) {
    .table_info_bottom_holder { padding-right: 0; }

    p.table_info_bottom_text { text-align: left; }

    img.table_info_bottom_image {
        width: 56px;
        height: auto;
        margin: 2px 14px 8px 0;
    }
}

.secondary_price,
span#cart_secondary_price { color: var(--bs-navy) !important; }

.street_tables_number { width: 44px; height: 44px; }

/* Phones: step circle and title on one line, the example picture (street plates) under the title, not under the
   circle. */
@media only screen and (max-width: 767px) {
    .header_wrap_table {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 14px;
        row-gap: 10px;
    }

    .header_wrap_table > label {
        flex: 1 1 0;
        min-width: 0;
    }

    .header_wrap_table > label h2 { float: none; margin: 0; }

    .header_wrap_table > .street_tables_number { margin: 0; }

    .header_wrap_table > .sample_street_image {
        float: none;
        flex: 0 0 auto;
        max-width: calc(100% - 58px);
        height: auto;
        margin: 0 0 0 58px !important;
        padding-right: 0;
    }

    .header_wrap_table > .clear { display: none; }
}

/* The product page wrapper (.table_box) stays on the page background: title and intro text with the rest of
   the page, the steps inside it are the white cards. */
.table_box {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.tables_border,
.tables_border_top {
    border-color: var(--bs-line);
    border-radius: var(--bs-radius);
    background: #fff;
}

/* Fields of a step on one line and one height: the street name input is a 50 px block, so the selects
   next to it are too. */
.tables_border select {
    display: block;
    height: 50px;
    min-height: 50px;
}

.tables_border input[type="text"] {
    height: 50px;
}

/* The street name label has an inline 10 px bottom margin instead of the two <br>s of the other columns. */
.tables_border label.inline_text[style*="margin-bottom"] {
    margin-bottom: 6px !important;
}

/* Pages and articles: the admin's HTML was set in 12–14 px. */
.text_block {
    border-color: var(--bs-line);
    border-radius: var(--bs-radius);
    padding: 24px 28px;
}

.text_block,
.text_block p,
.text_block li,
.text_block td {
    font-size: 16px;
    line-height: 1.65;
}

/* Admin HTML: long links and words wrap, wide pictures and tables fit the card. */
.text_block { overflow-wrap: anywhere; }

.text_block img { max-width: 100%; height: auto; }

@media only screen and (max-width: 767px) {
    .text_block { padding: 18px 16px; }

    /* A wide table scrolls inside the card instead of pushing the page sideways. */
    .text_block table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Content blocks for page HTML written in the editor (Šaltinis / source mode), e.g. "Apie mus". Without the
   classes the content is plain text, so a page that does not use them is not affected.

     <p class="content_lead">                      larger intro paragraph
     <div class="content_stats"> <div class="content_stat"><strong>1992</strong> text</div> …   key numbers
     <div class="content_section"><h3>…</h3> …   a section with its heading
     <div class="content_cards"> <div class="content_card"><h4>…</h4><p>…</p><p><a>…</a></p></div> …
     <ul class="content_checklist">               list with check marks
     <div class="content_split"> <div>text</div><div class="content_figure"><img></div>   text + picture
     <ol class="content_timeline"> <li><span class="content_year">1992</span><div>…</div></li> …
     <div class="content_cta"><p>…</p><a class="button" href="…">…</a></div>   closing call to action */

.text_block p.content_lead {
    margin: 0 0 24px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--bs-ink);
}

.content_stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 8px;
}

.content_stat {
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--bs-sky-soft);
    font-size: 15px;
    line-height: 1.4;
    color: var(--bs-muted);
}

.content_stat strong {
    display: block;
    margin: 0 0 4px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--bs-navy);
}

.content_section { margin: 40px 0 0; }

.content_section h3 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bs-navy);
}

.content_cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.content_card {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border: 1px solid var(--bs-line);
    border-radius: 12px;
    background: #fff;
}

.content_card h4 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bs-ink);
}

.text_block .content_card p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--bs-muted);
}

/* The link paragraph sits at the bottom, level across the cards of a row. */
.text_block .content_card p:last-child { margin: auto 0 0; }

.content_card a { font-weight: 500; }

.content_checklist {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.text_block .content_checklist li {
    position: relative;
    margin: 0;
    padding-left: 32px;
}

.content_checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.content_split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 24px 32px;
    align-items: center;
}

.content_figure { text-align: center; }

.text_block .content_figure img { width: 100%; max-width: 220px; }

.content_timeline {
    --timeline-year: 64px;
    --timeline-gap: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.text_block .content_timeline li {
    position: relative;
    display: grid;
    grid-template-columns: var(--timeline-year) minmax(0, 1fr);
    column-gap: var(--timeline-gap);
    margin: 0;
    padding: 0 0 26px;
}

/* The line from this year's dot to the next one, and the dot. */
.content_timeline li::before {
    content: "";
    position: absolute;
    left: calc(var(--timeline-year) + var(--timeline-gap) / 2 - 1px);
    top: 8px;
    bottom: -8px;
    width: 2px;
    background: var(--bs-line);
}

.content_timeline li:last-child::before { display: none; }

.content_timeline li::after {
    content: "";
    position: absolute;
    left: calc(var(--timeline-year) + var(--timeline-gap) / 2 - 7px);
    top: 6px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 3px solid var(--bs-navy);
    border-radius: 50%;
    background: #fff;
}

.content_year {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    text-align: right;
    color: var(--bs-navy);
}

.content_timeline li > div { font-size: 16px; }

.text_block .content_timeline p { margin: 0 0 8px; }

.text_block .content_timeline img {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 6px 0 0;
}

.content_cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 40px 0 0;
    padding: 22px 26px;
    border-radius: 12px;
    background: var(--bs-navy);
}

.text_block .content_cta p {
    margin: 0;
    font-size: 17px;
    color: #fff;
}

.text_block .content_cta .button {
    margin: 0;
    background: #fff;
    color: var(--bs-navy);
}

.text_block .content_cta .button:hover,
.text_block .content_cta .button:focus { background: var(--bs-sky-soft); color: var(--bs-navy); }

@media only screen and (max-width: 767px) {
    .text_block p.content_lead { font-size: 17px; }

    .content_stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .content_stat { padding: 14px 16px; }

    .content_stat strong { font-size: 26px; }

    .content_section { margin-top: 32px; }

    .content_split { grid-template-columns: 1fr; }

    .content_timeline {
        --timeline-year: 44px;
        --timeline-gap: 32px;
    }

    .content_year { font-size: 16px; }

    .content_cta { padding: 18px 20px; }
}

/* 404 page. */
.error_page p:last-child { margin: 20px 0 0; }

/* ---------- Customer account (user/…) ---------- */

/* The page title carries inline 2013 styles (light blue, upper case, 20 px). */
div.module_title {
    margin: 8px 0 20px !important;
    color: #003a69 !important;
    font-size: 28px !important;
    font-weight: 500;
    text-transform: none !important;
}

/* Profile title with "Atsijungti" on the right (moved out of the header). */
.profile_heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 8px 0 20px;
}

.profile_heading div.module_title { margin: 0 !important; }

.button.secondary.profile_logout {
    background: #fff;
    color: var(--bs-navy);
    border: 1px solid var(--bs-navy);
    padding: 11px 22px;
}

.button.secondary.profile_logout:hover { background: var(--bs-sky-soft); color: var(--bs-navy); }

.profile_logout_form { margin: 0; }

fieldset.white {
    /* A fieldset is as wide as its content by default (min-content); the orders table pushed the page sideways. */
    min-width: 0;
    margin: 0 0 24px;
    padding: 24px 12px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto;
}

/* Wide screens: amounts, dates and the order links on one line; long e-mails and addresses wrap so the customer
   and delivery tables fit the card. */
fieldset.white table.user_orders td.text-right,
fieldset.white table.user_orders td.user_order_actions { white-space: nowrap; }

fieldset.white table.detail_table td { overflow-wrap: anywhere; }

/* Phones: the profile's orders and the order page's tables as small cards – each value next to its label (the
   header row is hidden), empty fields left out; on the order page the totals follow the lines. */
@media only screen and (max-width: 767px) {
    fieldset.white table.user_orders thead,
    fieldset.white table.detail_table thead,
    fieldset.white table.order_lines thead { display: none; }

    fieldset.white table.user_orders,
    fieldset.white table.user_orders tbody,
    fieldset.white table.user_orders tr,
    fieldset.white table.detail_table,
    fieldset.white table.detail_table tbody,
    fieldset.white table.detail_table tr,
    fieldset.white table.order_lines,
    fieldset.white table.order_lines tbody,
    fieldset.white table.order_lines tfoot,
    fieldset.white table.order_lines tr {
        display: block;
        width: 100%;
    }

    fieldset.white table.user_orders tbody tr,
    fieldset.white table.detail_table tbody tr,
    fieldset.white table.order_lines tbody tr {
        margin: 0 0 12px;
        padding: 10px 14px;
        border: 1px solid var(--bs-line);
        border-radius: 10px;
    }

    fieldset.white table.user_orders tbody tr td,
    fieldset.white table.user_orders tbody tr td.text-right,
    fieldset.white table.detail_table tbody tr td,
    fieldset.white table.order_lines tbody tr td,
    fieldset.white table.order_lines tbody tr td.text-right {
        display: block;
        width: auto;
        padding: 4px 0;
        border: 0;
        text-align: right;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    fieldset.white table.detail_table tbody tr td:empty { display: none; }

    fieldset.white table.user_orders td[data-label]::before,
    fieldset.white table.detail_table td[data-label]::before,
    fieldset.white table.order_lines td[data-label]::before {
        content: attr(data-label);
        float: left;
        padding-right: 12px;
        font-size: 14px;
        color: var(--bs-muted);
    }

    fieldset.white table.user_orders td.user_order_id,
    fieldset.white table.order_lines td.order_line_name {
        font-size: 17px;
        font-weight: 600;
        text-align: left;
    }

    fieldset.white table.user_orders td.user_order_id { text-align: right; }

    fieldset.white table.user_orders td.user_order_actions {
        padding-top: 8px;
        text-align: left;
    }

    fieldset.white table.order_lines td .color_example {
        float: none !important;
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 6px !important;
    }

    fieldset.white table.order_lines tfoot td {
        display: block;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }
}


fieldset.white h5 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 500;
}

/* Profile forms: label above the field instead of a striped two-column table. */
table.user_info,
table.user_info tbody,
table.user_info tr,
table.user_info td {
    display: block;
    width: auto;
}

table.user_info {
    margin: 0 0 20px;
    border: 0;
    background: transparent;
}

table.user_info tr,
table.user_info tr:nth-child(even) {
    margin: 0 0 16px;
    background: transparent;
}

table.user_info td {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1.4;
}

table.user_info td:first-child {
    margin: 0 0 6px;
    color: var(--bs-muted);
    font-size: 14px;
    font-weight: 500;
}

table.user_info input { width: 100%; margin: 0; }

/* The address fields in two columns. */
form .six.columns + .six.columns table.user_info tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.changepass_error,
.changepass_success {
    display: block;
    margin: 0 0 12px;
    font-size: 15px;
}

.changepass_success { color: #1f6b43; }

/* Orders and order lines. */
fieldset.white table:not(.user_info) {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

fieldset.white table:not(.user_info) th {
    padding: 10px 12px;
    background: #eef3f8;
    color: var(--bs-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

fieldset.white table:not(.user_info) td {
    padding: 11px 12px;
    border-top: 1px solid var(--bs-line);
    background: #fff;
    font-size: 15px;
    line-height: 1.45;
}

fieldset.white table:not(.user_info) tr:nth-child(even) td { background: #fff; }

fieldset.white table:not(.user_info) th.text-right,
fieldset.white table:not(.user_info) td.text-right { text-align: right; }

@media only screen and (max-width: 767px) {
    form .six.columns + .six.columns table.user_info tbody { grid-template-columns: minmax(0, 1fr); }
}

/* News list (naujienos): one card per article. */
.news_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.news_item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 22px 24px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: #fff;
}

.news_item_image { flex: 0 0 180px; }

.news_item_image img {
    display: block;
    width: 180px;
    height: 135px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bs-sky-soft);
}

.news_item_body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news_item .articles_title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.news_item .articles_title a { color: #003a69; text-decoration: none; }
.news_item .articles_title a:hover { text-decoration: underline; }

/* Summaries are admin HTML of any length: four lines here, the rest on the article page. */
.news_item_summary {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #3d4855;
}

/* The summary HTML brings its own 12 px divs and inline sizes: one readable size in the list. */
.news_item_summary,
.news_item_summary * {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

.news_item_summary p + p { margin-top: 6px; }

.news_item_more {
    align-self: flex-start;
    padding: 8px 0;
    font-weight: 500;
    font-size: 16px;
}

@media only screen and (max-width: 767px) {
    /* Stacked: the text takes the card's width (with flex-start it grew to its longest line and pushed the page
       sideways). */
    .news_item { flex-direction: column; align-items: stretch; padding: 18px; }
    .news_item_body { width: 100%; }
    .news_item_image,
    .news_item_image img { width: 100%; flex-basis: auto; }
    .news_item_image img { height: 170px; }
}

/* Page links under a list (news): white 44 px boxes, the current page navy. */
.site_pagination { margin: 28px 0 8px; }

.site_pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site_pagination li {
    margin: 0;
    list-style: none;
}

.site_pagination li > a,
.site_pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bs-line);
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    line-height: 1;
    color: var(--bs-navy);
    text-decoration: none;
}

.site_pagination li > a:hover,
.site_pagination li > a:focus {
    border-color: var(--bs-navy);
    background: var(--bs-sky-soft);
    color: var(--bs-navy);
}

.site_pagination li.is_current > span {
    border-color: var(--bs-navy);
    background: var(--bs-navy);
    color: #fff;
    font-weight: 600;
}

.site_pagination li.is_disabled > span {
    color: var(--bs-field);
    background: transparent;
}

.site_pagination li.is_gap > span {
    min-width: 20px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--bs-muted);
}

/* "4 iš 8" replaces the numbers on phones; "Puslapis" is for screen readers only. */
.site_pagination li.site_pagination_status { display: none; }

.site_pagination li.site_pagination_status > span {
    border-color: transparent;
    background: transparent;
    color: var(--bs-ink);
    white-space: nowrap;
}

.site_pagination_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {
    .site_pagination ul {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .site_pagination li.is_page { display: none; }

    .site_pagination li.site_pagination_status { display: block; }
}

/* ---------- Home: product cards and news ---------- */

.banners_holder {
    margin-top: 8px;
    padding-bottom: 36px;
    box-shadow: none;
    border-bottom: 0;
}

.banners_holder .block-grid.three-up {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.banners_holder .block-grid.three-up > li {
    float: none;
    display: flex;
    padding: 0 10px 20px;
}

.banners_holder .block-grid.three-up > li .single_banner_holder {
    float: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 18px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: #fff;
}

.banners_holder .block-grid.three-up > li .single_banner_holder img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bs-sky-soft);
}

.banners_holder .block-grid.three-up > li .single_banner_holder h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    text-transform: none;
    color: #003a69;
}

.banners_holder .single_banner_holder .button {
    margin-top: auto;
    display: block;
    text-align: center;
}

.main_page_articles_holder h4 {
    margin: 8px 0 18px;
    font-size: 26px;
    color: #003a69;
}

.main_page_articles_holder .block-grid.two-up {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.main_page_articles_holder .block-grid.two-up > li {
    float: none;
    display: flex;
    flex-direction: column;
    padding: 0 8px 16px;
}

.main_page_articles_holder .block-grid.two-up > li > * {
    background: #fff;
}

.main_page_articles_holder .block-grid.two-up > li {
    background-clip: content-box;
}

.main_page_articles_holder .block-grid.two-up > li > div:first-child {
    border: 1px solid var(--bs-line);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    padding: 18px 20px 6px;
}

.main_page_articles_holder .block-grid.two-up > li > .news_summary_top {
    border-left: 1px solid var(--bs-line);
    border-right: 1px solid var(--bs-line);
    /* No bottom padding: the clamped lines would show through it. */
    padding: 0 20px;
    color: #3d4855;
    flex: 1 1 auto;
}

.main_page_articles_holder .block-grid.two-up > li > a.module_text {
    float: none;
    display: block;
    margin: 0;
    padding: 12px 20px 16px;
    font-size: 15px;
    border: 1px solid var(--bs-line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    text-align: right;
    font-weight: 500;
}

.main_page_articles_holder .news_summary_top,
.main_page_articles_holder .news_summary_top * {
    font-size: 15px;
    line-height: 1.5;
}

/* Summaries are admin HTML of any length: three lines on the home page. */
.main_page_articles_holder .news_summary_top {
    max-height: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.main_page_articles_holder .news_heading {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
}

.main_page_articles_holder .news_heading a { color: inherit; text-decoration: none; }

.main_page_articles_holder .news_heading a:hover,
.main_page_articles_holder .news_heading a:focus { text-decoration: underline; }

/* Home news picture: a fixed box beside the title, cropped to fill it. */
.main_page_articles_holder .news_card_top::after { content: ""; display: table; clear: both; }

.main_page_articles_holder .news_image {
    float: left;
    width: 120px;
    height: 90px;
    margin: 0 16px 8px 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bs-sky-soft);
}

.main_page_articles_holder .news_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.all_news_holder { padding: 8px 0 32px; }

/* ---------- Cart steps ---------- */

.track-progress li > span {
    background: #e9eef3;
    color: var(--bs-muted);
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
}

.track-progress li.done > span,
.track-progress li.current > span {
    background: var(--bs-navy);
    color: #fff;
}

/* Finished steps and the current one fill the bar; the current one is darker and bold. */
.track-progress li.current > span {
    background: var(--bs-navy-dark);
    font-weight: 700;
}

/* Progress: chevrons cut with clip-path. The old border triangles kept the 2013 colours, so a finished step
   showed a grey wedge at its tip. */
.track-progress {
    overflow: visible;
    margin-bottom: 16px;
}

.track-progress li,
.track-progress[data-steps="3"] li {
    flex: 1 1 0;
    width: auto;
    height: auto;
    line-height: 1.25;
    background: none;
}

.track-progress li + li { margin-left: -10px; }

.track-progress li > span {
    padding: 12px 20px 12px 30px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}

.track-progress li:first-child > span {
    padding-left: 20px;
    border-radius: 8px 0 0 8px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.track-progress li:last-child > span {
    border-radius: 0 8px 8px 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}

.track-progress li > span::before,
.track-progress li > span::after,
.track-progress li i,
.track-progress li:first-child i,
.track-progress li:last-child i {
    display: none;
}

/* Step headings ("Lentelių krepšelis", "Pristatymas") like the page titles, not light blue capitals. */
div#cart-table-wrap h2,
div#delivery-wrapper h2,
div#customer_info h2 {
    color: var(--bs-navy);
    font-size: 22px;
    font-weight: 500;
    text-transform: none;
}

/* Cart lines: a white card with light row lines, quiet column names and the total set apart (was Foundation's
   grey header and footer bands with 12 px text). */
#cart-items .cart_table_holder {
    margin-bottom: 20px;
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    overflow-x: auto;
}

#cart-items table {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-spacing: 0;
    background: #fff;
}

#cart-items table thead,
#cart-items table tfoot,
#cart-items table tbody tr,
#cart-items table tbody tr:nth-child(even) {
    background: #fff;
}

#cart-items table thead tr th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-line);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-muted);
    white-space: nowrap;
}

#cart-items table tbody tr td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-line);
    font-size: 16px;
    line-height: 1.4;
    color: var(--bs-ink);
    vertical-align: middle;
}

#cart-items table thead tr th.text-right,
#cart-items table tbody tr td.text-right,
#cart-items table tfoot tr td.text-right {
    text-align: right;
}

#cart-items table tfoot tr td {
    padding: 14px 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-ink);
}

#cart-items table tfoot .primary_price { font-weight: 700; }

#cart-items .remove_cart {
    font-size: 14px;
    color: var(--bs-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#cart-items .remove_cart:hover,
#cart-items .remove_cart:focus { color: var(--bs-error); }

/* The colour swatches of a name plate sit after its type. */
#cart-items table td .color_example {
    float: none !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 0 0 6px !important;
    border: 1px solid var(--bs-line);
    border-radius: 4px;
    vertical-align: middle;
}

#delivery-wrapper label,
#delivery-wrapper .columns,
#delivery-wrapper .row,
#customer_info label,
#customer_info .columns {
    font-size: 15px;
}

/* Pick-up address and hints: one readable block, the lines of the address close together. The texts come from
   Tekstai, some with an inline "font-size: 11px". */
#delivering .small_text,
#delivering .small_text * {
    margin: 0;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-muted);
}

/* Customer step: labels centred on their 44 px fields. */
#customer_info label.inline {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 12px;
    line-height: 1.3;
}

/* "Sutinku su užsakymo taisyklėmis" next to its checkbox (the text is a paragraph and fell below the box). */
#customer_info label[for="accept"] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 20px;
    font-size: 16px;
}

/* On the first line of the text (16 px × 1.55). */
#customer_info label[for="accept"] input {
    flex: none;
    margin: 3px 0 0;
}

#customer_info label[for="accept"] > span { flex: 1; }

#customer_info label[for="accept"] p {
    margin: 0 0 6px;
    font-size: inherit;
}

#customer_info label[for="accept"] p:last-child { margin-bottom: 0; }

#customer_info .privacy_notice {
    margin: -8px 0 20px 28px;
    font-size: 14px;
    color: var(--bs-muted);
}

/* Phones: the courier option apart from the pick-up one, each total on one line ("Prekių kaina:  2 EUR"), the
   notices left-aligned (justified text opened wide gaps in the narrow column). */
@media only screen and (max-width: 767px) {
    .text-justify { text-align: left; }

    #delivering .delivery_inner_3 { margin-top: 20px; }

    #delivery-wrapper .row:has(> .two.columns + .ten.columns) {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    #delivery-wrapper .row:has(> .two.columns + .ten.columns)::before,
    #delivery-wrapper .row:has(> .two.columns + .ten.columns)::after { display: none; }

    #delivery-wrapper .row:has(> .two.columns + .ten.columns) > .columns { width: auto; }

    #delivery-wrapper .row:has(> .two.columns + .ten.columns) > .ten.columns { text-align: right; }
}

/* Delivery: only the chosen way shows its fields (the page marks the others "blurred"). */
#fastmail_form.blurred,
#regitra_form.blurred,
#baltic_form.blurred {
    display: none;
}

.fast_mail_form { margin-bottom: 10px; }

/* ---------- Modals and notices ---------- */

/* Dialog title bar: white on navy (reveal.css, loaded later on some pages, has white on light blue). */
body .reveal-modal .header {
    background: var(--bs-navy);
}

body .reveal-modal .header h3,
body .reveal-modal .header .title,
body .reveal-modal .close-reveal-modal {
    color: #fff;
}

/* Dialogs: a full-width navy header with the title and a 40 px × (Foundation's 30 px padding made the header an
   inset box and the × a 12 px grey glyph; only the car plate page's reveal.css had fixed that). */
.reveal-modal { padding: 0; overflow: hidden; }

/* "body" first: reveal.css, loaded later on the car plate page, has the same selectors. */
body .reveal-modal .header {
    padding: 18px 64px 18px 24px;
    border: 0;
}

body .reveal-modal .header .title,
body .reveal-modal .header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

body .reveal-modal .close-reveal-modal:not(.button) {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    color: #fff;
}

body .reveal-modal .close-reveal-modal:not(.button):hover,
body .reveal-modal .close-reveal-modal:not(.button):focus {
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

#login_modal .content { padding: 20px 24px 24px; }

#login_modal .login_error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: var(--bs-error);
    font-size: 15px;
    line-height: 1.45;
}

#login_modal .content .row { margin: 0 0 12px; }

#login_modal .content .row > .columns { padding: 0; }

#login_modal .content .row > span {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bs-muted);
}

#login_modal .login_divider { margin-top: 8px; }

/* Phones: the dialog fills the width but for a 12 px margin (Foundation: 80 %). */
@media only screen and (max-width: 767px) {
    .reveal-modal,
    .reveal-modal.small,
    .reveal-modal.medium,
    .reveal-modal.large,
    .reveal-modal.xlarge,
    .reveal-modal.expand {
        left: 12px;
        right: 12px;
        width: auto;
        margin-left: 0;
    }

    #login_modal .content { padding: 16px; }
}

/* Frames dialog: quantity selects wide enough for the number next to the chevron (reveal.css makes selects in
   dialogs 50 px wide). */
#frames_form select.frame-quantity { width: 80px; }

/* Larger screens: room for picture, size, quantity and unit price on one row (Foundation's dialog is 520 px). */
@media only screen and (min-width: 768px) {
    #frame-modal {
        width: 640px;
        margin-left: -320px;
    }
}

/* Phones: checkbox and picture on top, size / quantity / unit price on one line under the picture. */
@media only screen and (max-width: 767px) {
    #frames_form .frame_row {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 10px;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid var(--bs-line);
    }

    /* Foundation's clearfix pseudo-elements would take grid cells. */
    #frames_form .frame_row::before,
    #frames_form .frame_row::after { display: none; }

    #frames_form .frame_row > div { display: block; }

    #frames_form .frame_row > .frame-column {
        margin: 0;
        text-align: left;
    }

    #frames_form .frame_row > .frame-column img { max-width: 100%; height: auto; }

    #frames_form .frame_row > .quantity-column {
        grid-column: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 18px;
    }

    #frames_form .frame_row .subcolumn {
        margin: 0;
        text-align: left;
    }

    #frames_form .frame_row .subcolumn label { margin-right: 4px; }
}

/* Order rules dialog: fixed on the screen; the title and × on top and "Uždaryti" at the bottom stay in view while
   the rules scroll between them (the close button used to sit at the very end of the text). */
/* A column: header and footer at their height, the rules box takes the rest of the screen. The dialog script
   sets an inline display: block / none, so the column needs !important; a closed dialog stays hidden by its
   visibility. */
#terms-modal {
    position: fixed;
    top: 5vh !important;
    display: flex !important;
    flex-direction: column;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
}

#terms-modal .header,
#terms-modal .footer { flex: none; }

#terms-modal .header {
    position: relative;
    padding: 18px 64px 18px 24px;
}

#terms-modal .header .title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

#terms-modal .header .close-reveal-modal {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 8px;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    text-shadow: none;
    color: #fff;
}

#terms-modal .header .close-reveal-modal:hover,
#terms-modal .header .close-reveal-modal:focus {
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

#terms-modal .terms_content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 24px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#terms-modal .terms_content .row { margin: 0; }

/* The rules page's text card (border, padding) is not needed inside the dialog. */
#terms-modal .terms_content .text_block {
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#terms-modal .footer {
    padding: 14px 24px;
    border-top: 1px solid var(--bs-line);
    background: #fff;
    text-align: right;
}

#terms-modal .footer .button { margin: 0; }

@media only screen and (max-width: 767px) {
    #terms-modal {
        top: 12px !important;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        margin-left: 0;
    }

    #terms-modal .header .title { font-size: 18px; }

    #terms-modal .terms_content { padding: 8px 16px 16px; }
}

/* Login dialog: "Pamiršau slaptažodį" under the password field. */
#reset_pass {
    display: inline-block;
    margin-top: 2px;
    padding: 8px 0;
    font-size: 15px;
}

.reveal-modal {
    border-radius: 14px;
    border: 0;
    box-shadow: 0 24px 60px rgba(15, 42, 80, 0.28);
}

/* Small dialogs (added to cart, delivery notice, plate type choice): centred on the screen, the buttons under
   the text instead of pinned to the bottom of a fixed-height box, where longer text ran under them. */
.modal-container .checkout_box,
.modal-container .checkout_box.large {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(400px, calc(100% - 32px));
    min-height: 0;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 42, 80, 0.28);
}

.modal-container .checkout_box .title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
}

.modal-container .checkout_box .text,
.modal-container .checkout_box.large .text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.modal-container .checkout_box .text p {
    margin: 0 0 8px;
    font-size: inherit;
}

.modal-container .checkout_box .text p:last-child { margin-bottom: 0; }

.modal-container .checkout_box .buttons {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
    margin-top: 8px;
    padding: 0;
}

.modal-container .checkout_box .buttons .button {
    flex: 1 1 140px;
    float: none;
    margin: 0;
}

/* "Tęsti" (keep shopping) as the quieter choice next to "Į krepšelį". */
#checkout_container .buttons button.button {
    background: #fff;
    color: var(--bs-navy);
    box-shadow: inset 0 0 0 1px var(--bs-navy);
}

#checkout_container .buttons button.button:hover,
#checkout_container .buttons button.button:focus {
    background: var(--bs-sky-soft);
}

div.jGrowl div.jGrowl-notification {
    background-color: var(--bs-navy);
    color: #fff;
    border-radius: 10px;
    opacity: 0.97;
    font-size: 15px;
}

div.jGrowl div.jGrowl-notification.error,
div.jGrowl div.error,
#jGrowl .jGrowl-notification.error {
    background-color: var(--bs-error);
    background-image: none;
    color: #fff;
}

/* ---------- Footer ---------- */

#footer { background: #fff; border-top: 1px solid var(--bs-line); }

.footer {
    padding: 28px 0;
    font-size: 15px;
    color: #3d4855;
    border-top: 0;
    box-shadow: none;
}

/* Tablets and small laptops: keep a side margin (the 1200 px row is 100 % wide below 1200 px). */
@media only screen and (min-width: 768px) {
    .row { max-width: calc(100% - 32px); }
    .row .row { max-width: none; }
}

/* ---------- Phones ---------- */

@media only screen and (max-width: 767px) {
    .logo { margin: 16px 0 10px; }
    .logo img { width: 160px; max-width: 60%; }

    #mobile_menu_button {
        top: 2px;
        width: 44px;
        height: 44px;
        border: 1px solid var(--bs-line);
        border-radius: 10px;
        background-color: #fff;
        background-position: center;
    }

    .site_header_actions {
        margin: 0 0 12px;
        justify-content: space-between;
        gap: 10px;
    }

    /* The info menu opens with the ☰ button (#mobile_menu_button toggles .active). */
    .site_header_actions .menu.first { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; }
    .site_header_actions .menu.first.active { display: flex; }

    .menu.first a {
        line-height: 1.4;
        padding: 12px 16px;
        background: #fff;
    }

    /* Products: one scrollable row instead of four full-width buttons. */
    .menu.second {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        width: auto;
        margin: 0 calc(50% - 50vw) 18px;
        padding: 10px 15px;
        gap: 8px;
        scrollbar-width: none;
    }

    .menu.second::-webkit-scrollbar { display: none; }

    .menu.second > li {
        flex: none;
        width: auto;
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px;
    }

    .menu.second > li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.45); }

    .menu.second > li a,
    .nav-bar.menu.second > li > a:first-child {
        padding: 9px 14px;
        font-size: 14px;
        text-transform: none;
        white-space: nowrap;
    }

    .menu.second > li.active,
    .nav-bar > li.active {
        background: #fff;
        box-shadow: none;
    }

    .menu.second > li.active > a,
    .nav-bar.menu.second > li.active > a:first-child { color: var(--bs-navy); text-decoration: none; }

    .track-progress li > span {
        padding: 10px 12px 10px 24px;
        font-size: 13px;
    }

    .track-progress li:first-child > span { padding-left: 12px; }

    /* Cart lines as small cards: the product on top, then labelled unit price, quantity and line total. */
    #cart-items .cart_table_holder { overflow: hidden; }

    #cart-items table thead { display: none; }

    #cart-items table,
    #cart-items table tbody,
    #cart-items table tfoot,
    #cart-items table tr {
        display: block;
        width: 100%;
    }

    #cart-items table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--bs-line);
    }

    #cart-items table tbody tr td,
    #cart-items table tbody tr td.text-right {
        display: block;
        width: auto;
        padding: 3px 0;
        border: 0;
        text-align: right;
        overflow: hidden;
    }

    #cart-items table tbody tr td[data-label]::before {
        content: attr(data-label);
        float: left;
        padding-right: 12px;
        font-size: 14px;
        color: var(--bs-muted);
    }

    #cart-items table tbody tr td.cart_item_name {
        padding-bottom: 6px;
        text-align: left;
        font-weight: 600;
    }

    #cart-items table tfoot tr td { display: block; }

    /* Labels above their fields: close to the field they name. */
    #customer_info label.inline {
        min-height: 0;
        margin: 0 0 6px;
    }

    #customer_info input[type="text"],
    #customer_info input[type="email"] { margin-bottom: 16px; }

    .banners_holder .block-grid.three-up > li { width: 100%; }
    .main_page_articles_holder .block-grid.two-up > li { width: 100%; }
}

/* The narrowest phones (320 px): each step name still on one line. */
@media only screen and (max-width: 359px) {
    .track-progress li > span {
        padding: 10px 4px 10px 18px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .track-progress li:first-child > span { padding-left: 8px; }
}

/* ---------- Footer links and cookie banner ---------- */

.footer_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    padding: 0 0 20px;
}

.footer_links a {
    padding: 6px 0;
    font-size: 14px;
    color: var(--bs-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer_links a:hover,
.footer_links a:focus { color: var(--bs-navy); }

.cookie_consent {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9000;
    max-width: 560px;
    padding: 20px 22px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 42, 80, 0.22);
}

.cookie_consent[hidden] { display: none; }

.cookie_consent_title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 500;
    color: var(--bs-navy);
}

.cookie_consent p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--bs-ink);
}

.cookie_consent_choices {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.cookie_consent_choices[hidden] { display: none; }

.cookie_consent_choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
}

.cookie_consent_choice input { flex: none; margin: 2px 0 0; }

.cookie_consent_choice span { font-weight: 400; }

.cookie_consent_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie_consent_buttons .button {
    flex: 1 1 auto;
    margin: 0;
}

.cookie_consent_buttons .button[hidden] { display: none; }

/* "Tik būtini" and "Pasirinkti" as visible as "Sutinku su visais", only quieter in colour. */
.cookie_consent .cookie_consent_necessary,
.cookie_consent .cookie_consent_more {
    background: #fff;
    color: var(--bs-navy);
    box-shadow: inset 0 0 0 1px var(--bs-navy);
}

.cookie_consent .cookie_consent_necessary:hover,
.cookie_consent .cookie_consent_more:hover { background: var(--bs-sky-soft); }

@media only screen and (max-width: 767px) {
    .cookie_consent {
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-width: none;
        padding: 16px;
    }

    .cookie_consent_buttons { flex-direction: column; }
}

/* "Not a robot" check (site.partials.human-check): shown only while Cloudflare Turnstile runs. */
.human_check {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 10000;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(0, 32, 64, .22);
    text-align: center;
}

.human_check[hidden] { display: none; }

.human_check_text {
    margin: 0 0 8px;
    color: var(--bs-navy);
    font-size: 14px;
}

/* ---------- Contacts page (site.pages.contacts) ---------- */

.contacts_page { padding-bottom: 32px; }

.contacts_company {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px 40px;
    align-items: center;
    margin: 0 0 28px;
    padding: 26px 28px;
    border: 1px solid var(--bs-line);
    border-left: 4px solid var(--bs-navy);
    border-radius: 14px;
    background: #fff;
}

.contacts_company_head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: var(--bs-navy);
}

.contacts_company_head p {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bs-muted);
}

.contacts_details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.contacts_detail dt {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--bs-muted);
}

.contacts_detail dd {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--bs-ink);
}

.contacts_locations {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.contacts_location_list {
    display: grid;
    gap: 16px;
}

/* No location with coordinates: no map column, the cards side by side. */
.contacts_locations_no_map { grid-template-columns: 1fr; }

.contacts_locations_no_map .contacts_location_list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.contacts_location {
    padding: 22px 24px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.contacts_location.is_active {
    border-color: var(--bs-navy);
    box-shadow: 0 0 0 3px var(--bs-sky-soft);
}

.contacts_location_head { margin: 0 0 14px; }

.contacts_location_city {
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bs-sky-soft);
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-navy);
}

.contacts_location_head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bs-ink);
}

.contacts_lines {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contacts_lines li,
.contacts_hours {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--bs-ink);
}

.contacts_lines svg,
.contacts_hours svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: none;
    stroke: var(--bs-navy);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacts_lines a { font-weight: 500; }

.contacts_line_label { color: var(--bs-muted); }

.contacts_hours {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bs-line);
}

.contacts_hours > div { flex: 1; max-width: 300px; font-size: 15px; }

.contacts_hours .contacts_line_label {
    display: block;
    margin: 0 0 4px;
}

.contacts_hours_row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: inherit; /* foundation.css sets 12px on every div */
}

.contacts_hours_row span:last-child { font-weight: 500; white-space: nowrap; }

.contacts_note {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--bs-muted);
}

.contacts_location_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

/* Quieter than the order buttons: outlined, filled on hover. */
.contacts_location_actions .button.small.secondary {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    background: #fff;
    color: var(--bs-navy);
    box-shadow: inset 0 0 0 1px var(--bs-navy);
}

.contacts_location_actions .button.small.secondary:hover,
.contacts_location_actions .button.small.secondary:focus { background: var(--bs-sky-soft); color: var(--bs-navy); }

.contacts_location.is_active .contacts_location_actions .button.small.secondary.contacts_show_map {
    background: var(--bs-navy);
    color: #fff;
}

.contacts_map {
    position: sticky;
    top: 16px;
}

.contacts_map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: var(--bs-ground);
}

.contacts_map_link {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tablet: the cards side by side, the map under them. */
@media only screen and (max-width: 1023px) {
    .contacts_locations { grid-template-columns: 1fr; }

    .contacts_location_list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .contacts_map { position: static; }

    .contacts_map iframe { height: 380px; }
}

@media only screen and (max-width: 767px) {
    .contacts_company {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .contacts_location_list { grid-template-columns: 1fr; }

    .contacts_location { padding: 18px; }

    .contacts_location_actions .button.small.secondary {
        flex: 1 1 auto;
        width: auto;
        text-align: center;
    }

    .contacts_map iframe { height: 320px; }
}