/* Parduotuve (shop.discobi.com).
 *
 * Priedas prie app.css, o ne pakaitalas: spalvos, mygtukai, `.facts`, `.gallery`
 * ir visa nuotrauku perziura atkeliauja is ten. Cia lieka tik tai, ko
 * darbastalyje nera - virsutine juosta be paemimo lauko, katalogo tinklelis ir
 * prekes puslapis.
 *
 * Skirtumas nuo darbastalio yra sаmoningas ir vienintelis: ten ekrane telpa kuo
 * daugiau eiluciu, o cia ekrane turi buti ploksle. Todel didesni tarpai,
 * didesnės nuotraukos ir maziau uzrasu. */

body.shop {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* --- virsutine juosta --- */

.shop-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    padding: 16px 0 14px;
}

.shop-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.shop-brand img { display: block; }

/* Skirtukai atskira eilute po juosta - kaip prekybos centro iskabos, o ne kaip
 * priedas prie zenklo. Ju cia du, bet vieta trecia jau yra. */
.shop-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    border-bottom: 2px solid #141414;
}

.shop-nav a {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background: #fbfbfb;
}

.shop-nav a:hover { background: var(--bg-muted); }

/* Piktogramos nustumiamos i desini krasta - ten jas ir ieskoma. */
.shop-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.shop-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
}

.shop-ico:hover { background: var(--bg-muted); }

/* Skaicius ant krepselio. Rodomas tik tada, kai jame kas nors yra: nuolatinis
 * nulis ekrane yra priekaistas, o ne informacija. */
.shop-ico-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 16px;
    padding: 0 4px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-weight: 600;
}

/* Prisijungęs - taskiukas, o ne vardas: juostoje vardui vietos nera, o
 * atsakyti i klausima "ar as prisijungęs" uztenka ir jo. */
.shop-ico-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    background: #2e7d32;
    border-radius: 50%;
}

/* Paieska juostoje. Stovi visada ir yra atidaryta: parduotuveje paieska nera
 * papildoma funkcija, o pagrindinis budas ka nors rasti. Lupa liko mygtuke,
 * kuris paieska ivykdo. */
.shop-find {
    flex: 1 1 320px;
    display: flex;
    max-width: 620px;
}

.shop-find input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    font-size: 14px;
    border: 2px solid #141414;
    border-right: none;
    border-radius: 3px 0 0 3px;
}

.shop-find input[type="search"]:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.shop-find button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 0;
    color: #fff;
    background: var(--accent);
    border: 2px solid #141414;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}

.shop-find button:hover { background: #26406f; }

/* Siauras stulpelis formoms: prisijungimui ir paskyrai per visa ekrana
 * nuteskes laukas atrodo kaip klaida. */
.shop-narrow { max-width: 560px; }

.shop-ship-line {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.shop-whois {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: 14px;
}

.shop-main { min-height: 60vh; }

/* --- katalogas: filtrai kaireje, plokstes desineje --- */

.shop-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* Siaurame ekrane filtrai keliauja virs saraso. Slepti ju negalima: tada
 * telefone parduotuve lieka be vienintelio budo susiaurinti tukstanti
 * ploksteliu. */
@media (max-width: 780px) {
    .shop-layout { grid-template-columns: 1fr; gap: 18px; }
}

.shop-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 2px solid #141414;
}

.shop-side-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.shop-clear { font-size: 12px; }

.shop-facet { margin: 16px 0 22px; }

.shop-facet h3 {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.shop-facet ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Juodi, o ne melyni. Sone ju sesios desimtys vienas po kito: melyni jie
 * skaitytusi kaip nuorodu i kitus puslapius sarasas, o tai ne nuorodos - tai
 * dabartinio saraso siaurinimas. Del tos pacios priezasties nurodyta ir
 * :visited - be jos jau spausti vardai liktu violetiniai ir atrodytu, tarsi
 * kuo nors skirtusi nuo kitu. Kad juos galima spausti, pasako pele:
 * pabraukimas uzvedus. */
.shop-facet a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    color: #141414;
}

.shop-facet a:visited { color: #141414; }

.shop-facet a:hover .shop-facet-name { text-decoration: underline; }

/* Ijungta reiksme atrodo ijungta ir be zenkliuko virsuje: sonas yra ta vieta,
 * kurioje zmogus ieskos, ka isjungti. */
.shop-facet a.on .shop-facet-name {
    font-weight: 700;
    color: #141414;
}

.shop-facet a.on .shop-facet-name::before {
    content: "\2713\00a0";
    color: var(--accent);
}

.shop-facet-n {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
}

.shop-facet-more summary {
    padding: 4px 0;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
}

.shop-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.shop-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.shop-sort { font-size: 14px; color: var(--text-muted); }

.shop-count {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* Ijungti filtrai virs saraso. Kiekvienas zenkliukas yra mygtukas "be sito" -
 * todel kryziukas, o ne tik uzrasas. */
.shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 12px;
    color: inherit;
    text-decoration: none;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.shop-chip:hover { border-color: var(--accent); }

.shop-chip-x { color: var(--text-muted); font-size: 14px; line-height: 1; }

/* --- katalogo tinklelis --- */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px 18px;
    margin-bottom: 10px;
}

.shop-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* Vienodo auksčio langelis nuotraukai. Be jo kortelės sedetu skirtingame
 * auksstyje - plokstelės fotografuojamos ir staciai, ir gulsciai, ir tinklelis
 * nuo to atrodo kaip sulauzytas. */
.shop-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    margin-bottom: 9px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.shop-cover img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.shop-nocover {
    font-size: 13px;
    color: var(--text-muted);
}

.shop-card:hover .shop-cover { border-color: var(--accent); }

.shop-artist {
    font-weight: 600;
    line-height: 1.25;
}

.shop-title {
    line-height: 1.25;
}

.shop-meta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.shop-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.shop-price { font-weight: 600; }

.shop-grade {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.shop-slash { margin: 0 2px; }

/* --- prekes puslapis --- */

.shop-back { margin: 0 0 12px; font-size: 14px; }

/* Kelias virs plokstes: nuoroda atgal ir vieta, kurioje stovim. Ilgas
 * pavadinimas siaurame ekrane nusikelia i kita eilute, o ne isstumia nuorodos
 * uz krasto. */
.shop-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 14px;
}

.shop-crumb-sep { color: var(--border); }

.shop-crumb-here {
    font-weight: 600;
    color: var(--text-muted);
}

.shop-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}

/* Kadras auksciau nei darbastalyje: cia jis ir yra puslapis. */
.shop-item .shop-photos { --stage-height: 74vh; }

.shop-facts h1 {
    margin: 0 0 4px;
    font-size: 23px;
    line-height: 1.25;
}

/* Leidimo lentele. Platesnis pirmas stulpelis nei `.facts` darbastalyje:
 * cia jame guli zodziai ("Discogs release"), o ne skaiciai. */
.shop-spec {
    width: 100%;
    margin-bottom: 22px;
}

.shop-spec th {
    width: 34%;
    white-space: nowrap;
}

/* Pirkimo blokas: kaina, bukle, pastaba, mygtukas. Rėmelis cia yra visa
 * prasme - jis pasako, kad tai vienas veiksmas, o ne dar penkios eilutes
 * duomenu po lenteles. */
.shop-buy-box {
    padding: 16px 18px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fcfcfd;
}

.shop-big-price {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 600;
}

.shop-cond {
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 14px;
}

.shop-cond th {
    width: 70px;
    padding: 2px 12px 2px 0;
    text-align: left;
    font-weight: normal;
    color: var(--text-muted);
}

/* Pardavejo zodziai. Butent jie pasako tai, ko nepasako nei vertinimas, nei
 * nuotrauka - todel savo remelyje, o ne smulkiu tekstu apacioje. */
.shop-notes {
    margin: 14px 0;
    padding: 10px 12px;
    font-size: 14px;
    background: var(--bg-muted);
    border-left: 3px solid var(--border);
    border-radius: 0 3px 3px 0;
}

.shop-buy { margin: 18px 0 6px; }

.shop-buy-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.shop-buy-btn:hover { filter: brightness(1.1); }

/* Du mygtukai vienoje eiluteje, siaurame ekrane - vienas po kitu. */
.shop-pay-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* PayPal savo spalva, o ne musu melyna: pirkejas jo ieskos akimis, o ne
 * skaitydamas. Sviesesnis uz kortelės mygtuka tycia - kortele lieka
 * numatytasis kelias. */
.shop-buy-paypal {
    background: #ffc439;
    color: #253b80;
}

.shop-soon {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.shop-ship {
    margin: 0 0 18px;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.45;
    background: var(--bg-muted);
    border-radius: 4px;
}

/* --- siuntimo puslapis --- */

.shop-h1 { margin: 0 0 10px; font-size: 24px; }

.shop-lead {
    max-width: 720px;
    margin: 0 0 20px;
    line-height: 1.5;
}

.shop-zone { max-width: 720px; }

.shop-zone h2 { margin: 0 0 10px; font-size: 17px; }

.shop-zone .facts { margin-bottom: 10px; }

.shop-zone-list {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- zanru lentynos pradiniame puslapyje --- */

.shop-shelf { margin-bottom: 34px; }

/* Vardas ir nuoroda i visa zanra vienoje eiluteje, su bruksniu po ja: taip
 * matyti, kur lentyna prasideda ir kur baigiasi. */
.shop-shelf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.shop-shelf-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.shop-shelf-head a {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.shop-shelf-head a:hover { color: var(--accent); text-decoration: underline; }

/* Penkios per eilute - butent tiek, kiek ju lentynoje ir yra, kad eilute butu
 * viena ir pilna. Siaurėjant ekranui ju maziau, o telefone lieka dvi: penkios
 * 70 pikseliu plocio kortelės nebera nuotraukos. */
.shop-grid-shelf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .shop-grid-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .shop-grid-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .shop-grid-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Antraste, nuo kurios prasideda visas sarasas. */
.shop-all-h {
    margin: 34px 0 10px;
    font-size: 19px;
    font-weight: 700;
}

/* --- jau vartytos plokstes --- */

/* Siauresnis tinklelis nei kataloge: tai priminimas, o ne antras sarasas, ir
 * vienodo dydzio kortelės apacioje varzytusi su tomis, del kuriu zmogus i si
 * puslapi atejo. */
.shop-seen {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.shop-seen-h {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
}

.shop-grid-seen {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px 14px;
    font-size: 13px;
}

.shop-grid-seen .shop-cover { height: 140px; }
.shop-grid-seen .shop-meta { font-size: 12px; }

/* --- apacia --- */

.shop-foot {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.shop-foot p { margin: 0 0 6px; }

.shop-foot-thin { color: var(--text-muted); }

/* Keturi stulpeliai per visa juosta - tokio pat ploscio, kaip bruksnys virs ju.
 * Pirmas prasideda ties kairiu jo galu, ketvirtas BAIGIASI ties desiniu: apacia
 * yra viena eile, ir jos kraštai turi sutapti su viskuo, kas virs jos.
 *
 * Stulpeliai pagal turini (`auto`) ir laisva vieta tarp ju (`space-between`), o
 * ne keturi vienodi `1fr`. Skirtumas matomas tik desiniame gale: vienodo ploscio
 * stulpelyje trumpas trijų nuorodu sarasas atsistoja jo KAIREJE, ir uz jo lieka
 * pustrecio simto pikseliu tuscios vietos iki bruksnio galo. Kaireje tokios
 * demes nesimato tik todel, kad pirmo stulpelio uzrasas atsitiktinai ilgesnis,
 * tai visa eile atrodo pastumta i sona. Dalinant laisva vieta TARP stulpeliu,
 * abu galai priremti, o tarpai lieka vienodi. */
.shop-foot-cols {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 26px 40px;
    padding: 6px 0 24px;
}

/* Siaurame ekrane keturi stulpeliai virsta dviem, telefone - vienu: vardas
 * "Credit and debit cards" trisdesimties pikseliu stulpelyje nebera uzrasas. */
@media (max-width: 900px) {
    .shop-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .shop-foot-cols { grid-template-columns: minmax(0, 1fr); }
}

.shop-foot-h {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    /* Antrastė tamsesnė uz eilutes po ja - kitaip stulpeliai susilieja i
     * viena pilka deme, kurioje nesimato, kur baigiasi vienas. */
    color: #222;
}

.shop-foot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-foot-list li { margin-bottom: 4px; }

/* Nuorodos apacioje - ramios: violetine "aplankyta" spalva cia reikstu, kad
 * puslapis prisimena, i kuria savo paties skilti zmogus jau uzsuko. */
.shop-foot a { color: inherit; text-decoration: none; }
.shop-foot a:hover { color: var(--accent); text-decoration: underline; }

/* Zenklas ir uzrasas vienoje eiluteje, o ne vienas po kitu. */
.shop-pay-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.shop-pay-list img { display: block; flex: 0 0 auto; }

@media (max-width: 900px) {
    .shop-item { grid-template-columns: minmax(0, 1fr); }
    .shop-item .shop-photos { --stage-height: 58vh; }
    /* Telefone duomenys pirmi: pavadinimas, bukle ir kaina atsako i pirma
     * klausima, o nuotraukos - i antra. */
    .shop-facts { order: -1; }
}

/* --- krepselis ir uzsakymas --- */

.shop-cart-link { position: relative; }

.shop-cart-count {
    display: inline-block;
    min-width: 17px;
    margin-left: 4px;
    padding: 1px 5px;
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    font-size: 12px;
    text-align: center;
}

.shop-buy-done { background: #2e7d32; }

/* Negalimas veiksmas atrodo negalimas, o ne sulaužytas: tas pats mygtukas,
 * tik be spalvos ir be zymeklio. */
.shop-buy-off {
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
}

.shop-elsewhere {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.shop-basket {
    width: 100%;
    max-width: 820px;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.shop-basket td {
    padding: 10px 8px 10px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.shop-basket-pic { width: 64px; }

.shop-basket-pic img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 3px;
    display: block;
}

.shop-basket-name {
    display: block;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.shop-basket-price { white-space: nowrap; font-weight: 600; }
.shop-basket-drop { width: 32px; text-align: right; }

.shop-drop {
    padding: 2px 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.shop-drop:hover { border-color: var(--danger); color: var(--danger); }

.shop-hold {
    max-width: 820px;
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.shop-totals { max-width: 420px; }

.shop-where { margin-bottom: 12px; }

.shop-where-saved {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.shop-where-saved strong { color: inherit; }

.shop-sum { max-width: 100%; }
.shop-sum td { text-align: right; }
.shop-sum-total th, .shop-sum-total td { font-weight: 600; font-size: 16px; }

.shop-free { color: #2e7d32; font-weight: 600; }

.shop-parcel { margin: 4px 0 14px; font-size: 13px; }

/* --- adreso forma --- */

.shop-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
    max-width: 1100px;
}

.shop-address label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
}

.shop-address input,
.shop-address select {
    display: block;
    width: 100%;
    max-width: 420px;
    margin-top: 3px;
    padding: 7px 9px;
}

.shop-address .hint { display: block; margin-top: 3px; }

.shop-row { display: flex; gap: 12px; }
.shop-row label { flex: 1 1 0; }

.shop-review-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
}

.shop-review-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}

.shop-done { max-width: 820px; }
.shop-done-h2 { margin: 22px 0 6px; font-size: 15px; color: var(--text-muted); }
.shop-addr { margin: 0 0 18px; line-height: 1.5; }

@media (max-width: 900px) {
    .shop-checkout { grid-template-columns: minmax(0, 1fr); }
}


/* --- pirkejo paskyra: antras kelias ir uzsakymo busena ---
 *
 * Prisijungimo puslapyje yra du keliai - nuoroda pastu ir slaptazodis - ir jie
 * NELYGIAVERCIAI: dauguma pirkeju slaptazodzio neturi ir neturės. Todel antrasis
 * suskleistas: matomas tam, kuris jo ieskos, ir nekliudo tam, kuris ne.
 */
.shop-alt {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.shop-alt summary {
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.shop-alt .shop-address { margin-top: 12px; }

/* Uzsakymo busena. Didesniu uz visa kita puslapyje, nes butent del jos i ji ir
   atsiverciama: "kur mano plokstes" turi buti atsakyta pirmu zvilgsniu, o ne
   surasta tarp eiluciu. */
.shop-state { border-left: 3px solid var(--accent); }

.shop-state-now {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 600;
}


/* Paaiskinimas po lauku. Reikalingas ten, kur laukas atrodo kaip perteklinis
   asmeninis duomuo: telefono numerio uzsakyme prasoma ne is smalsumo, o todel,
   kad be jo pastas siuntinio nepriima. Vienas sakinys po lauku atsako i tai
   greiciau, nei zmogus spėja suabejoti. */
.shop-hint {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}


/* --- parduota ploksle ---
 *
 * Puslapis lieka (zr. database/discogs_listing_repo.SHOP_SOLD_WHERE), todel
 * jam reikia savo isvaizdos. Blankesnis remelis ir perbraukta kaina atsako i
 * klausima pries perskaitant uzrasa: cia jau nieko nebus.
 */
.shop-buy-sold {
    background: #fafafa;
    border-color: var(--border);
}

.shop-price-was {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Katalogo antraste. Nedidele tycia: puslapio pagrindinis dalykas yra
   ploksteliu tinklelis, o ne uzrasas virs jo. Bet `h1` ji privalo buti - be
   jos puslapis nepasako, kas jis toks. */
.shop-cat-h1 {
    margin: 0 0 6px;
    font-size: 20px;
}

/* Savininko langelis prie plokstes: kaina, bukle, aprasymas.
 *
 * Atrodo kitaip nei visa parduotuve - brūkšniuotas remelis, pilkas fonas - ir
 * tai ne puosyba. Sis vienas blokas puslapyje yra svetimas: jo pirkejas
 * nemato niekada, ir kai savininkas ziuri i savo parduotuve pirkejo akimis,
 * jam turi buti akivaizdu, kur baigiasi tai, ka mato pirkejas. */
.shop-adm {
    margin-top: 18px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: var(--bg-muted);
    font-size: 14px;
}

.shop-adm > summary {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
}

.shop-adm[open] > summary {
    border-bottom: 1px dashed var(--border);
    color: var(--text);
}

.shop-adm-form {
    padding: 14px;
}

.shop-adm-form label {
    display: block;
    margin-bottom: 12px;
}

.shop-adm-form label > span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.shop-adm-form input[type="text"],
.shop-adm-form select,
.shop-adm-form textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}

.shop-adm-form textarea {
    resize: vertical;
}

/* Kaina ir valiuta vienoje eiluteje: skaicius be valiutos yra dviprasmis, o
 * atskira eilute jai butu trys kartus daugiau vietos nei zodziui "EUR". */
.shop-adm-price {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "input curr";
    gap: 0 8px;
    align-items: center;
}

.shop-adm-price > span { grid-area: label; }
.shop-adm-price > input { grid-area: input; }

.shop-adm-price > em {
    grid-area: curr;
    font-style: normal;
    color: var(--text-muted);
}

.shop-adm-hint {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.shop-adm-save {
    width: 100%;
}