:root {
    --brand: #2a7f77;
    --brand-dark: #21665f;
    --accent: #e85d2a;
    --drop: #b91c1c;
    --ink: #1f2430;
    --muted: #5b6272;
    --bg: #faf8f5;
    --card: #ffffff;
    --border: #e7e2da;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}

.brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
}

.brand span { color: var(--brand); }

.hero {
    padding: 3.5rem 0 2.5rem;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.hero .lead {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 40rem;
    margin: 0 auto;
}

.categories { padding: 1rem 0 3rem; }

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.category-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
}

.category-card.live { border-color: var(--brand); }

.category-icon { font-size: 2.2rem; margin-bottom: .5rem; }

.category-card h2 { font-size: 1.15rem; margin-bottom: .5rem; }

.category-card p { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }

.badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

.badge-live {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}

/* ---- App chrome ---- */

.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}

.nav-links a:hover { color: var(--brand); }

.nav-cta {
    background: var(--brand);
    color: #fff !important;
    padding: .4rem .9rem;
    border-radius: 999px;
}

.inline-form { display: inline; }

.link-button {
    background: none;
    border: none;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    padding: 0;
}

.link-button:hover { color: var(--brand); }

.page { padding: 2rem 0 3rem; min-height: 60vh; }

.flash {
    background: #e8f6ec;
    border: 1px solid #b7e2c4;
    color: #1d6b34;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

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

.form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem;
    max-width: 26rem;
    margin: 1rem auto;
}

.form-card-wide { max-width: 38rem; }

.form-card h1 { margin-bottom: 1rem; font-size: 1.5rem; }

.form-card label, .contact-box label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin: .9rem 0 .3rem;
}

.form-card input, .form-card textarea, .form-card select,
.contact-box textarea, .reply-form textarea, .filter-form input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.form-card input:focus, .form-card textarea:focus,
.contact-box textarea:focus, .reply-form textarea:focus {
    outline: 2px solid var(--brand);
    border-color: var(--brand);
}

.radio-row { display: grid; gap: .4rem; margin: .5rem 0 .25rem; }

/* Under its own label the list starts right away; under a field it keeps a little air. */
label + .radio-row { margin-top: 0; }

.radio-option { font-weight: 400 !important; }

/* An option in a list of radio buttons or tick boxes: the list's gap
   spaces them, not the margin a field's label takes above its field,
   which put the options of "Hogyan adod át?" almost 50px apart. */
.form-card .radio-row .radio-option { margin: 0; padding: .3rem 0; }

.radio-option input { width: auto; margin-right: .4rem; }

.form-errors {
    background: #fdeeee;
    border: 1px solid #f2c4c4;
    color: #a33;
    border-radius: 8px;
    padding: .6rem .9rem;
    margin-top: 1rem;
    font-size: .9rem;
}

.form-errors p { margin: .15rem 0; }

.form-errors ul { margin: .35rem 0 0 1.1rem; padding: 0; }

.form-errors li { margin: .15rem 0; }

.form-errors:focus { outline: none; }

/* The summary at the top of a form, above the first field. */
.form-errors-top { margin: 0 0 1rem; }

/* "Nothing fits?" box under a thin result list, and the one-tap offer
   after applying. */
.seeker-prompt, .seeker-offer {
    background: var(--card);
    border: 1px dashed var(--brand);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}

.seeker-prompt p, .seeker-offer p { margin: .35rem 0 .75rem; color: var(--muted); }

.seeker-prompt .btn-primary { margin-top: 0; }

.publish-search { display: flex; align-items: flex-start; gap: .4rem; margin-top: .75rem; }

.publish-search input { margin-top: .25rem; }

/* "Also available in English" bar under the header. */
.lang-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    background: #fff8e1;
    border-bottom: 1px solid #f0dfa0;
    padding: .55rem 1rem;
    font-size: .95rem;
}

.lang-notice .btn-primary { margin-top: 0; padding: .35rem .9rem; }

.lang-notice .link-button { color: var(--muted); font-size: 1.05rem; }

/* One line under the field it belongs to. */
.field-error {
    color: #a33;
    font-size: .85rem;
    margin: .35rem 0 0;
}

.form-alt { margin-top: 1rem; font-size: .9rem; color: var(--muted); }

.btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    margin-top: 1rem;
}

.btn-primary:hover { background: var(--brand-dark); }

.btn-danger { border-color: #e0b4b4; color: #a33; }

/* ---- Board ---- */

.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.board-head h1, .board-head h2 { font-size: 1.5rem; }

/* One row that scrolls sideways, like the chip row — wrapping the labels
   turns the pills into tall ovals on narrow screens. */
.filter-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.filter-tabs a.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.filter-form {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.filter-form input { max-width: 14rem; }

.listing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: .6rem;
    color: var(--ink);
    text-decoration: none;
}

a.listing-row:hover { border-color: var(--brand); }

/* ---- Match celebration ---- */

.badge-fast { background: #fff8e1; border-color: #f0dfa0; color: #8a6d1a; }

.match-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(15, 17, 22, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
}

.match-overlay-card {
    position: relative;
    background: var(--card);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    text-align: center;
    max-width: 26rem;
    animation: match-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes match-pop {
    0% { opacity: 0; transform: scale(.7); }
    100% { opacity: 1; transform: scale(1); }
}

.match-overlay-card h2 { margin: .75rem 0 .25rem; }

.match-overlay-card .btn-row { justify-content: center; margin-top: 1.25rem; }

.match-overlay-avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.match-overlay-heart {
    color: var(--brand);
    font-size: 2rem;
    animation: heart-pop .9s ease-out infinite;
}

.confetti { position: absolute; inset: 0; pointer-events: none; }

.confetti span {
    position: absolute;
    top: -5vh;
    width: 10px;
    height: 16px;
    border-radius: 3px;
    animation: confetti-fall 3.2s linear infinite;
}

.confetti span:nth-child(3n) { background: var(--brand); }
.confetti span:nth-child(3n+1) { background: #f2b705; }
.confetti span:nth-child(3n+2) { background: #2a7f77; }
.confetti span:nth-child(1) { left: 6%; animation-delay: 0s; }
.confetti span:nth-child(2) { left: 14%; animation-delay: .7s; }
.confetti span:nth-child(3) { left: 23%; animation-delay: .2s; }
.confetti span:nth-child(4) { left: 31%; animation-delay: 1.1s; }
.confetti span:nth-child(5) { left: 40%; animation-delay: .5s; }
.confetti span:nth-child(6) { left: 48%; animation-delay: 1.6s; }
.confetti span:nth-child(7) { left: 57%; animation-delay: .1s; }
.confetti span:nth-child(8) { left: 65%; animation-delay: .9s; }
.confetti span:nth-child(9) { left: 74%; animation-delay: 1.4s; }
.confetti span:nth-child(10) { left: 82%; animation-delay: .35s; }
.confetti span:nth-child(11) { left: 90%; animation-delay: 1.9s; }
.confetti span:nth-child(12) { left: 97%; animation-delay: .8s; }

@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: .6; }
}

/* ---- Occupancy & profiles ---- */

.badge-spots { background: #eef7fd; border-color: #bcdcf3; color: #21618c; }

.occupancy-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .8rem 1.1rem;
    margin-bottom: 1.25rem;
}

.occupancy-slots { display: flex; align-items: center; gap: .35rem; }

.occupancy-slots .slot {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.slot-generic {
    background: var(--bg);
    border: 1px solid var(--border);
}

.slot-generic svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: var(--muted);
}

/* The free slot shows an outlined person: "someone is missing here".
   Shape and color both follow the roommate preference. */
.slot-free { border: 2px dashed var(--brand); }

.slot-free svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.6;
    opacity: .85;
}

.tenant-mix-fields {
    display: flex;
    gap: 1rem;
}

.tenant-mix-fields label { flex: 1; font-size: .9rem; color: var(--muted); }

/* One university per row: the name with its minutes beside it. */
.uni-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: .6rem;
    margin-bottom: .5rem;
}

.uni-row .uni-row-error { grid-column: 1 / -1; margin-top: 0; }

/* display: grid above would beat the browser's [hidden] rule. */
.uni-row[hidden] { display: none; }

.btn-small { padding: .35rem .7rem; font-size: .85rem; }

#uni-add { margin-top: .1rem; }

.listing-extra-costs {
    display: block;
    font-weight: 400;
    font-size: .78rem;
    color: var(--muted);
    margin-top: .15rem;
}

.slot-tenant-lany { background: #fbeef4; border-color: #e8bcd2; }

.slot-tenant-lany svg { fill: #c2447e; }

.slot-tenant-fiu { background: #eef1fb; border-color: #c9d2f0; }

.slot-tenant-fiu svg { fill: #3d55b8; }

.slot-free-lany { border-color: #c2447e; }

.slot-free-lany svg { stroke: #c2447e; }

.slot-free-fiu { border-color: #3d55b8; }

.slot-free-fiu svg { stroke: #3d55b8; }

.slot-free-mindegy { border-color: var(--muted); }

.slot-free-mindegy svg { stroke: var(--muted); }

/* Compact occupancy strip on board and deck cards. */
.occupancy-mini {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    vertical-align: middle;
}

.occupancy-mini .mini-slot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.occupancy-mini svg { width: .85rem; height: .85rem; }

.mini-tenant-lany { background: #fbeef4; }

.mini-tenant-lany svg { fill: #c2447e; }

.mini-tenant-fiu { background: #eef1fb; }

.mini-tenant-fiu svg { fill: #3d55b8; }

.mini-tenant-semleges { background: var(--bg); }

.mini-tenant-semleges svg { fill: var(--muted); }

.mini-free { border: 1.5px dashed var(--muted); }

.mini-free svg { fill: none; stroke: var(--muted); stroke-width: 1.8; }

.mini-free-lany { border-color: #c2447e; }

.mini-free-lany svg { stroke: #c2447e; }

.mini-free-fiu { border-color: #3d55b8; }

.mini-free-fiu svg { stroke: #3d55b8; }

.profile-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin: 1rem 0 1.5rem;
}

.profile-card h1 { font-size: 1.4rem; margin-bottom: .1rem; }

.profile-card-info p { margin: .1rem 0; }

.photo-nudge { font-size: .9rem; margin-bottom: .6rem; }

.page a.host-name-link { color: inherit; }

.host-name-link { text-decoration: none; }

.host-name-link:hover { text-decoration: underline; }

/* ---- Matches ---- */

.match-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fdeee7;
    border: 1px solid #f3cdb9;
    border-radius: 12px;
    padding: .8rem 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.liker-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.deck-btn-sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
}

/* ---- Felfedezés swipe deck ---- */

.deck-page { max-width: 420px; margin: 0 auto; }

.deck-head { text-align: center; margin-bottom: 1rem; }

.deck-head h1 { font-size: 1.6rem; }

.deck-head .muted { margin-bottom: .6rem; }

.deck-tabs { justify-content: center; }

.deck {
    position: relative;
    height: min(72vh, 620px);
}

.deck-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
    touch-action: none;
    user-select: none;
}

/* The last card paints on top; the one beneath peeks out, the rest hide. */
.deck-card:not(:nth-last-child(-n+2)) { visibility: hidden; }

.deck-card:nth-last-child(2) { transform: scale(.96) translateY(12px); }

.deck-photo {
    position: relative;
    flex: 0 0 52%;
    background: var(--bg);
}

.deck-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
}

.deck-photo-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, var(--brand), var(--brand-dark));
}

.deck-stamp {
    position: absolute;
    top: 1.2rem;
    padding: .3rem .8rem;
    border: 3px solid;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .05em;
    opacity: 0;
    transition: opacity .1s;
    background: rgba(255, 255, 255, .85);
}

.deck-stamp-like { left: 1rem; color: #1f7a3d; border-color: #1f7a3d; transform: rotate(-12deg); }

.deck-stamp-pass { right: 1rem; color: #c0392b; border-color: #c0392b; transform: rotate(12deg); }

.deck-card.show-like .deck-stamp-like,
.deck-card.show-pass .deck-stamp-pass { opacity: 1; }

.deck-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1.1rem 1rem;
    min-height: 0;
}

.deck-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.deck-title { font-size: 1.1rem; }

.deck-price { font-weight: 800; color: var(--brand-dark); white-space: nowrap; }

.deck-description {
    color: var(--muted);
    font-size: .9rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.deck-more { font-size: .9rem; }

.deck-actions {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 2.2rem;
    padding-top: .5rem;
}

.deck-btn {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: transform .1s;
}

.deck-btn:active { transform: scale(.9); }

.deck-btn-pass { color: #c0392b; }

.deck-btn-like { color: #fff; background: var(--brand); border-color: var(--brand); }

.deck-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    color: var(--muted);
}

.deck-empty-waiting { display: none; }

/* Must outrank both `.filter-tabs a` (background) and `.page .filter-tabs a`
   (color: inherit), or the label renders white on white. */
.filter-tabs a.deck-link,
.page .filter-tabs a.deck-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ---- Trust signals ---- */

.badge-new { background: #e8f5ec; border-color: #bfe3cb; color: #1f7a3d; }

.badge-hot { background: #fdeee7; border-color: #f3cdb9; color: var(--brand-dark); }

.host-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}

.host-avatars { display: flex; }

.host-avatars .avatar:not(:first-child) { margin-left: -.6rem; }

.host-info { display: flex; flex-direction: column; }

.host-info .muted { font-size: .85rem; }

.host-verified { color: #1f7a3d; font-weight: 600; }

/* ---- Sticky mobile apply bar ---- */

.apply-bar { display: none; }

@media (max-width: 760px) {
    .apply-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        background: var(--card);
        border-top: 1px solid var(--border);
        padding: .65rem 1.25rem calc(.65rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    }

    .apply-bar .btn { flex-shrink: 0; }

    .apply-bar-price { font-weight: 700; }

    .apply-bar-price small {
        display: block;
        font-weight: 400;
        font-size: .75rem;
        color: var(--muted);
    }

    .listing-detail.has-apply-bar { padding-bottom: 4.5rem; }
}

/* ---- Quick-filter chips ---- */

.chip-row {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.chip-row::-webkit-scrollbar { display: none; }

.chip {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .85rem;
    text-decoration: none;
}

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

.page a.chip { color: inherit; }

.chip-active,
.page a.chip-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ---- Board cards (photo-forward, swipeable) ---- */

.listing-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 -8px;
}

/* Reverb's density: a column of about 210px. Two cards across on a phone,
   three on a tablet, and from 900px as many 224px-plus columns (200px of
   photo and the card's 12px a side) as the width allows, so a 1440 window
   shows six of 207px and a 1920 one eight. The gutter is the cards' own
   padding, 24px between photos, and the grid pulls out by 12px so the
   outer photos meet the page's edge — Reverb's -12px. */
@media (min-width: 600px) { .listing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 900px) { .listing-cards { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); margin: 0 -12px; } }

/* The board runs edge to edge on a desktop with side padding that grows
   with the screen; the header follows, so the two line up. Every other
   page keeps the reading-width container. */
.container-wide, .site-header .container { max-width: none; }

@media (min-width: 900px) {
    .container-wide, .site-header .container { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (min-width: 1500px) {
    .container-wide, .site-header .container { padding-left: 4rem; padding-right: 4rem; }
}

/* The card is Reverb's: no border and no background of its own, the
   photo with its own 16px corners and the text flush with its left edge,
   and 12px of padding all round (8px on a phone) that is the gutter. On
   hover (or keyboard focus) a white panel fills the padded box, with 28px
   corners so they run concentric with the photo's, and a soft shadow —
   the ::before Reverb draws. The panel never leaves the card's box, so a
   shelf's scroll box cannot clip it; the track makes room for the shadow.
   A grid cell or a shelf slot would otherwise grow to its content's
   smallest width, and a photo's own pixel size counts as that: a wide
   photo made a wider card with a bigger square, and on a phone pushed
   the grid off the screen. With min-width at zero every card takes
   exactly its column, whatever its photo or its title. */
.listing-card {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
}

.listing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 28px;
    background: var(--card);
    box-shadow: 0 4px 16px rgba(31, 36, 48, .12);
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}

@media (max-width: 599px) {
    .listing-card { padding: 8px; }

    .listing-card::before { border-radius: 24px; }
}

.listing-card:hover::before,
.listing-card:focus-within::before { opacity: 1; }

.card-media { position: relative; border-radius: 16px; overflow: hidden; }

/* A square, as on Reverb: a guitar or a cello stands in it whole, where
   a wide crop cut the headstock. The thumbnails are 800px on the long
   side, so the crop costs nothing. */
.card-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    aspect-ratio: 1 / 1;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.card-carousel::-webkit-scrollbar { display: none; }

.card-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

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

/* A searcher's card: their face where a room's photo would be. */
.card-media-seeker .card-slide { display: block; }

.seeker-face {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #fdf1e7, #f7dccb);
}

.seeker-face img,
.seeker-face .seeker-art {
    width: 42%;
    max-width: 150px;
    /* The board's .card-slide img rule sets height: 100%; with both sides
       fixed the browser ignores aspect-ratio and the face becomes an oval.
       Height follows the width, so a profile photo stays a circle. */
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    display: block;
}

.deck-photo-seeker,
.deck-photo-seeker .seeker-face { width: 100%; height: 100%; aspect-ratio: auto; }

.deck-photo-seeker .seeker-face img,
.deck-photo-seeker .seeker-face .seeker-art { width: 55%; max-width: 220px; }

.listing-detail-head.has-face {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.listing-detail-head.has-face .seeker-face {
    aspect-ratio: auto;
    background: none;
    flex: 0 0 auto;
}

.listing-detail-head.has-face .seeker-face img,
.listing-detail-head.has-face .seeker-face .seeker-art { width: 84px; max-width: none; }

.seeker-photo-current {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: .9rem 0 .25rem;
}

.seeker-photo-current p { margin: 0; font-size: .9rem; }

/* What sits on the photo: a status in the top-left corner ("Keresek",
   "Elkelt", "Foglalt"), the heart in the top-right, the dots at the
   bottom. A sale card's photo carries no "Eladó": every one would. */
.card-overlays {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    display: flex;
    gap: .3rem;
}

.card-overlays .badge { box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }

.card-status-badge { font-size: .85rem; padding: .3rem .7rem; }

/* The heart on a white disc, legible on a dark case and a light wall alike. */
.card-heart {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-heart svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    transition: fill .15s, transform .1s;
}

.card-heart:active svg { transform: scale(.85); }

.card-heart.is-saved svg { fill: var(--brand); stroke: var(--brand); }

.card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .9);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

/* Arrows are a mouse affordance; fingers swipe. */
@media (hover: hover) and (pointer: fine) {
    .card-media:hover .card-arrow { display: flex; }
}

.card-prev { left: .6rem; }
.card-next { right: .6rem; }

/* The dots in a white pill, as on Reverb, so they read on any photo. */
.card-dots {
    position: absolute;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    display: flex;
    gap: .35rem;
    padding: .35rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    pointer-events: none;
}

.card-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(31, 36, 48, .3);
    transition: background .15s;
}

.card-dots span.active { background: var(--ink); }

/* One column at every width: badges flow across the full card, the title
   and meta get room to breathe, and the price sits on its own bottom line —
   squeezing them beside each other stacked the chips one per line. */
.card-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem 0 .4rem;
    text-decoration: none;
    flex: 1;
}

/* The price is the loudest thing on the card, as on Reverb: half again
   the headline, with "alkuképes" or "max." as a small word beside it. */
.card-body .listing-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
    font-size: 1.3rem;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    /* The old row layout rules a line above the price on a phone; a card does not. */
    border-top: 0;
    padding-top: 0;
}

.card-body .listing-price small {
    display: inline;
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
}

.listing-meta {
    color: var(--muted);
    font-size: .85rem;
    margin-top: .2rem;
}

.listing-price {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.listing-price small { display: block; font-weight: 400; color: var(--muted); }

.badge-seek { background: #eef1fb; border-color: #c9d2f0; color: #3d55b8; }

.badge-demo { background: #fdf6e3; border-color: #ecd9a0; color: #8a6d1a; }

/* A listing let within the last week: still on the board as proof that
   rooms move here, but visibly done. */
.badge-taken { background: var(--ink); border-color: var(--ink); color: #fff; }

.listing-card.is-taken { opacity: .78; }

.listing-card.is-taken .card-slide img { filter: grayscale(.5); }

.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 2.5rem 1rem;
}

.pager { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }

/* ---- Listing detail ---- */

.listing-detail-head h1 { margin: .4rem 0 1rem; font-size: 1.6rem; }

.listing-facts {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: grid;
    gap: .35rem;
    margin-bottom: 1.25rem;
    font-size: .95rem;
}

.listing-description {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.contact-box {
    background: var(--card);
    border: 1px solid var(--brand);
    border-radius: 12px;
    padding: 1.25rem;
}

.contact-box h2 { font-size: 1.15rem; margin-bottom: .75rem; }

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

/* ---- Messages ---- */

.message-preview { color: var(--muted); font-size: .9rem; margin-top: .25rem; }

.thread { margin: 1.25rem 0; display: grid; gap: .6rem; }

.bubble {
    max-width: 75%;
    padding: .7rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border);
}

.bubble-mine {
    justify-self: end;
    background: #fdeee6;
    border-color: #f3cdb8;
}

.bubble-theirs { justify-self: start; background: var(--card); }

.bubble-time { color: var(--muted); font-size: .75rem; margin-top: .3rem; }

.reply-form textarea { margin-bottom: .25rem; }

/* ---- Social login ---- */

.social-login { display: grid; gap: .5rem; margin-bottom: 1rem; }

/* A provider's button the way its guidelines draw it: the mark at the left
   of the centred label, on white with a light border for Google, on
   Facebook's blue for Facebook. */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .7rem 1.1rem;
    text-align: center;
}

.social-btn .brand-mark { flex: none; width: 20px; height: 20px; }

.social-google {
    background: #fff;
    border-color: #dadce0;
    color: #1f1f1f;
}

.social-google:hover { background: #f8f9fa; border-color: #c6c8cc; }

.social-facebook {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.social-facebook:hover { background: #166fe5; border-color: #166fe5; }

.social-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--muted);
    font-size: .85rem;
    margin-top: .5rem;
}

.social-divider::before, .social-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

/* ---- Teams ---- */

.section-title { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }

.leave-form { margin-top: 2rem; }

.filter-form select, .form-card select {
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    width: 100%;
}

.filter-form select { width: auto; }

/* ---- Candidate voting ---- */

.candidate-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: .75rem;
}

.candidate-accepted { border-color: #2e9e50; background: #f2fbf4; }

.candidate-rejected { opacity: .6; }

.candidate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}

.candidate-intro { margin-bottom: .75rem; line-height: 1.6; }

.vote-tally {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-weight: 700;
    margin-bottom: .5rem;
}

.tally-yes { color: #1d6b34; }
.tally-no { color: #a33; }

.vote-comment {
    font-size: .9rem;
    color: var(--muted);
    border-left: 3px solid var(--border);
    padding-left: .75rem;
    margin: .35rem 0;
}

.vote-form {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .75rem;
}

.vote-form input[type="text"] {
    flex: 1;
    min-width: 12rem;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.radio-row-inline { display: flex; gap: .75rem; }

.decide-row { display: flex; gap: .5rem; margin-top: .75rem; }

.apply-box { margin-bottom: 1.25rem; }

/* ---- Compact hero on the board ---- */

.hero-compact { padding: 1.5rem 0 1.25rem; text-align: left; }

.hero-compact h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: .4rem; }

.hero-compact .lead { margin: 0 0 .75rem; max-width: none; font-size: 1rem; }

/* ---- Filter panel ----
   Grouped under headings like a property portal's filter sheet: yes/no and
   pick-one answers are tappable chips, ranges are min/max pairs. The same
   markup is a sticky sidebar on wide screens and a full-screen sheet on
   phones (see the media queries below). */

.filter-panel {
    display: block;
    margin-bottom: 0;
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border);
}

.filter-panel input, .filter-panel select { max-width: none; width: 100%; }

/* The gap between groups lives on the fieldset: a legend's own top margin
   is dropped by browsers, so the headings sat tight against whatever came
   before them. */
.filter-group {
    border: 0;
    padding: 0;
    margin: 1.4rem 0 0;
    min-width: 0;
}

.filter-group legend {
    font-weight: 700;
    font-size: 1rem;
    padding: 0;
    margin: 0 0 .6rem;
}

.filter-group > input, .filter-group > select { margin-bottom: .5rem; }

.filter-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: .5rem;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* A checkbox drawn as a chip: the input stays in the tree for the keyboard
   and the form, the span is what you see and tap. */
.chip-toggle { position: relative; display: inline-flex; }

.chip-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.chip-toggle span {
    display: inline-block;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 12px;
    padding: .55rem .9rem;
    font-size: .92rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.chip-toggle span:hover { border-color: var(--brand); }

.chip-toggle input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.chip-toggle input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.filter-actions {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding-top: 1rem;
}

.filter-actions .btn-primary { margin-top: 0; flex: 1; }

/* Number of filters that are on, shown beside the collapsed panel's title. */
.filter-count {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 .45em;
    margin-left: .35rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .75rem;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
}

/* ---- Board toolbar: search strip + filter dialog ---- */

.board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem;
    margin-bottom: .9rem;
}

/* The three fields people type first, in one pill; the rest of the
   active filters ride along as hidden inputs. */
.search-strip {
    flex: 1 1 28rem;
    display: flex;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem .3rem .3rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    min-width: 0;
}

.search-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .15rem .9rem .15rem 0;
    border-right: 1px solid var(--border);
    margin-right: .9rem;
}

.search-field:nth-of-type(3) { border-right: 0; margin-right: 0; }

.search-field span {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
}

.search-field input {
    border: 0;
    padding: 0;
    font: inherit;
    background: transparent;
    width: 100%;
    min-width: 0;
    outline: none;
}

.search-field input::placeholder { color: #a5aab5; }

.search-submit {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0;
    border-radius: 999px;
    padding: .55rem 1.1rem;
}

.filter-details {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.filter-details summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-weight: 700;
    padding: .55rem 1rem;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}

.filter-details summary:hover { border-color: var(--brand); }

.filter-details summary::-webkit-details-marker { display: none; }

/* The two faces of the closed button: the sliders icon and "Szűrők" on a
   desktop, the search pill on a phone. Open, the sheet's header is always
   "Szűrők". */
.filter-title { display: inline-flex; align-items: center; gap: .5rem; }

.filter-sliders, .filter-start svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.filter-details[open] .filter-sliders { display: none; }

/* Closed, the desktop button is the icon alone — it says enough — with the
   count beside it; the word is the open sheet's header and the tooltip. */
.filter-details:not([open]) .filter-label { display: none; }

.filter-details:not([open]) summary { padding: .6rem .8rem; }

.filter-details:not([open]) .filter-count { margin-left: 0; }

.filter-start { display: none; align-items: center; gap: .6rem; }

.filter-close { color: var(--muted); font-size: 1.15rem; line-height: 1; margin-left: auto; }

.filter-details:not([open]) .filter-close { display: none; }

/* Open, the panel covers the board: a sheet on a phone, a centred dialog
   on a desktop. The summary is its header (tap ✕ to close), the actions
   bar stays pinned to the bottom so the submit is always in reach. */
.filter-details[open] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    background: var(--card);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.filter-details[open] > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.15rem;
    padding: 1rem 1.25rem;
}

.filter-details[open] .filter-panel {
    border-top: 0;
    padding: 0 1.25rem calc(5.5rem + env(safe-area-inset-bottom));
}

.filter-details[open] .filter-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--border);
}

body.filters-open { overflow: hidden; }

@media (min-width: 900px) {
    .filter-details[open] {
        background: rgba(31, 36, 48, .45);
        overflow: hidden;
        padding: 3vh 1rem;
    }

    .filter-details[open] > summary,
    .filter-details[open] .filter-panel,
    .filter-details[open] .filter-actions {
        width: min(44rem, 100%);
        margin: 0 auto;
        background: var(--card);
    }

    .filter-details[open] > summary {
        position: static;
        border-radius: 16px 16px 0 0;
    }

    .filter-details[open] .filter-panel {
        max-height: calc(94vh - 5rem);
        overflow-y: auto;
        padding-bottom: 0;
        border-radius: 0 0 16px 16px;
    }

    /* The actions live inside the scrolling panel; sticky keeps the submit
       in view however long the form is. */
    .filter-details[open] .filter-actions {
        position: sticky;
        bottom: 0;
        width: auto;
        margin: 0 -1.25rem;
        padding: .75rem 1.25rem;
    }
}

/* On a phone there is no strip: one "Kezdd a keresést" pill, as on Airbnb,
   opens the sheet with every field in it, so the first listing stays close
   to the top. */
@media (max-width: 599px) {
    .search-strip { display: none; }

    .filter-details { width: 100%; }

    .filter-details:not([open]) summary {
        width: 100%;
        justify-content: center;
        padding: .8rem 1rem;
        font-size: 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    }

    .filter-details:not([open]) .filter-start { display: inline-flex; }

    .filter-details:not([open]) .filter-title { display: none; }

    .filter-details:not([open]) .filter-count { position: absolute; right: 1rem; }

    .filter-details:not([open]) summary { position: relative; }
}

/* ---- The similar products under a product: a row's spacing, with a
   product row's heading (.orow-head, below) ---- */

.board-row { margin: 1.25rem 0 1.75rem; }

/* The last card of a front-page row that has more: an arrow and the way to the rest. */
.page a.shelf-more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
    text-align: center;
    padding: 1.5rem;
}

/* Borderless like the rest, a dashed outline (inside the card's padding) marks it as the way on rather than a listing. */
.page a.shelf-more-card { background: transparent; border: 0; border-radius: 28px; outline: 1px dashed var(--border); outline-offset: -12px; }

@media (max-width: 599px) { .page a.shelf-more-card { border-radius: 24px; outline-offset: -8px; } }

.page a.shelf-more-card::before { display: none; }

/* Two of the next covers, tilted like a pair of snapshots, as on Airbnb. */
.shelf-more-stack {
    position: relative;
    width: 150px;
    height: 112px;
    margin-bottom: .75rem;
}

.shelf-more-thumb {
    position: absolute;
    width: 104px;
    height: 78px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 10px;
    background: linear-gradient(160deg, #fdf1e7, #f7dccb);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}

.shelf-more-thumb:first-child { left: 0; bottom: 0; transform: rotate(-7deg); z-index: 1; }

.shelf-more-thumb:nth-child(2) { right: 0; top: 0; transform: rotate(6deg); z-index: 2; }

.shelf-more-thumb:only-child { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg); }

.shelf-more-card:hover .shelf-more-thumb:first-child { transform: rotate(-10deg) translateY(-2px); }

.shelf-more-card:hover .shelf-more-thumb:nth-child(2) { transform: rotate(9deg) translateY(-2px); }

.shelf-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shelf-more-thumb .instrument-art { width: 86%; height: auto; display: block; }

.shelf-more-thumb .seeker-art { width: 58%; height: auto; display: block; }

/* Two faces on one card: the second looks the other way. */
.shelf-more-thumb:nth-child(2) .seeker-art { transform: scaleX(-1); }


.shelf-more-card .muted { font-size: .9rem; }

/* ---- Product rows (components/product-row): a row of cards that
   scrolls sideways, the way the rows on Reverb's front page do, with a
   round arrow over either end. "orow" is Reverb's overflowing row. The
   look is set by the custom properties on the section, so one row can
   differ from the others by setting them on itself. ---- */

.orow {
    --orow-gap: 16px;
    --orow-item-w: 220px;
    --orow-ctrl-size: 48px;
    /* Reverb's arrows are black at .38, and at .6 under the pointer; here
       the rest is the site's ink and the pointer brings the brand's dark
       shade, as on the buttons, so a shop's own store gives them its own
       colour. */
    --orow-ctrl-bg: rgba(31, 36, 48, .38);
    --orow-ctrl-bg-hover: var(--brand-dark);
    --orow-ctrl-color: #fff;
    /* A card's padding, which its hover panel fills: in a row it is half
       the gap, so the panel reaches halfway to the next photo, the way
       it does in the grid, and it hangs outside the item, so the photo is
       exactly as wide as the item. */
    --orow-card-pad: calc(var(--orow-gap) / 2);
    /* How far past the heading's edges the cards run before the row cuts
       them: room for a card's hover panel on a desktop, and on a phone or
       a tablet the page's own margin, so they run to the screen's edge. */
    --orow-bleed: 12px;
    /* The arrows sit on the middle of the photo, a square as wide as the
       item under the card's padding, clear of the badges and the heart. */
    --orow-ctrl-top: calc(var(--orow-card-pad) + var(--orow-item-w) / 2);
    margin: 1.25rem 0 1.75rem;
}

@media (max-width: 899px) { .orow { --orow-bleed: 1.25rem; } }

@media (max-width: 599px) { .orow { --orow-gap: 12px; --orow-item-w: 42vw; } }

/* The heading and its link, on one line; the similar products under a
   product wear it too. */
.orow-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
}

.orow-head h2 { font-size: 1.2rem; }

.page a.orow-all { font-weight: 700; color: inherit; text-decoration: none; white-space: nowrap; }

.page a.orow-all:hover { text-decoration: underline; }

/* A phone's width takes the heading and the link on one line when both
   are a size smaller. */
@media (max-width: 599px) {
    .orow-head { gap: .75rem; }

    .orow-head h2 { font-size: 1.05rem; }

    .page a.orow-all { font-size: .875rem; }
}

/* Its own formatting context, so the track's negative margin stays inside
   it instead of pulling its top up by 20px: the arrows measure from the
   top of the cards. */
.orow-body { position: relative; display: flow-root; }

/* One line of cards without a scrollbar, each snapping to the left edge.
   The track pads and pulls out by the bleed sideways and by 20px up and
   down, so a card's hover panel and its shadow have room inside the
   scroll box instead of being cut at its edge, and the scroll padding
   keeps the card that snaps in line with the heading. A swipe that runs
   past either end stops there instead of going back a page. */
.orow-track {
    display: flex;
    gap: var(--orow-gap);
    margin: -20px calc(-1 * var(--orow-bleed));
    padding: 20px var(--orow-bleed);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--orow-bleed);
    scrollbar-width: none;
    list-style: none;
}

.orow-track::-webkit-scrollbar { display: none; }

/* With min-width at zero a photo's own pixel width cannot widen its item. */
.orow-track > li {
    flex: 0 0 var(--orow-item-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

/* The card fills its item's height, so every hover panel, and the "show
   all" card's outline, is as tall as the row. The panel's corners stay
   concentric with the photo's 16px. */
.orow-track > li > .listing-card {
    flex: 1 0 auto;
    margin: 0 calc(-1 * var(--orow-card-pad));
    padding: var(--orow-card-pad);
}

.orow-track > li > .listing-card::before { border-radius: calc(16px + var(--orow-card-pad)); }

.page .orow-track > li > a.shelf-more-card {
    padding: 1.5rem;
    border-radius: calc(16px + var(--orow-card-pad));
    outline-offset: calc(-1 * var(--orow-card-pad));
}

.orow-ctrl {
    position: absolute;
    top: var(--orow-ctrl-top);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--orow-ctrl-size);
    height: var(--orow-ctrl-size);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--orow-ctrl-bg);
    color: var(--orow-ctrl-color);
    box-shadow: 0 0 24px rgba(31, 36, 48, .12);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s, opacity .2s, transform .2s;
}

.orow-prev { left: 12px; }

.orow-next { right: 12px; }

.orow-ctrl:hover { background: var(--orow-ctrl-bg-hover); }

.orow-ctrl:active { transform: translateY(-50%) scale(.94); }

.orow-ctrl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Nowhere to go that way: the script says so with aria-hidden. */
.orow-ctrl[aria-hidden="true"] { opacity: 0; pointer-events: none; }

.orow-ctrl svg { width: 28px; height: 28px; fill: currentColor; }

.orow-prev svg { transform: scaleX(-1); }

/* Fingers swipe. */
@media (hover: none) { .orow-ctrl { display: none; } }

/* A card's own photo arrows would sit under the row's at either end; in a
   row they move down to the photo's bottom corners, beside its dots. */
.orow .card-arrow { top: auto; bottom: .6rem; transform: none; }

/* A listing without photos: the cover keeps its square, with a drawn
   instrument of the family where the picture would be. */
.card-media-empty {
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #fdf1e7, #f7dccb);
}

.card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.card-media-empty .instrument-art {
    display: block;
    width: 76%;
    max-width: 260px;
    height: auto;
}

/* A searcher's card is about the person, not a room: a shorter cover with
   a smaller face, so a row of them does not read as a row of posters. */
/* The same cover height as a room's, so a shelf of mixed cards stays level. */
.card-media-seeker .seeker-face img,
.card-media-seeker .seeker-face .seeker-art { width: 34%; max-width: 110px; }

/* ---- Student guide ---- */

.guide-page { max-width: 44rem; margin: 0 auto; }

.guide-page h1 { font-size: 1.7rem; margin-bottom: .5rem; }

.guide-page h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }

.guide-page p { line-height: 1.6; }

.guide-crumb { font-size: .9rem; margin-bottom: .25rem; }

/* The way to your city on a chapter that goes city by city. Wraps, where
   the board's chip row scrolls: this is an article, not a toolbar. */
.guide-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }

.guide-page h2[id] { scroll-margin-top: 1rem; }

.guide-toc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
    margin: 1.25rem 0;
}

.page a.guide-toc-card, .guide-toc-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

.guide-toc-card:hover { border-color: var(--brand); }

.guide-toc-card strong { display: block; margin: .25rem 0 .35rem; }

.guide-toc-card p { margin: 0; color: var(--muted); font-size: .92rem; }

.guide-toc-number {
    display: inline-block;
    min-width: 1.6em;
    line-height: 1.6em;
    text-align: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

.guide-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    margin: 1rem 0 .5rem;
}

.guide-facts div {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem .9rem;
}

.guide-facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.guide-facts dd { margin: .25rem 0 0; }

.guide-steps { padding-left: 1.4rem; }

.guide-steps li { margin: .4rem 0; line-height: 1.5; }

.guide-traps {
    background: #fff8e1;
    border: 1px solid #f0dfa0;
    border-radius: 12px;
    padding: .25rem 1.1rem .75rem;
    margin: 1.25rem 0;
}

.guide-traps h2 { margin-top: .75rem; }

.guide-traps ul { padding-left: 1.2rem; margin: .25rem 0; }

.guide-traps li { margin: .35rem 0; }

.guide-partner {
    border: 1px dashed var(--brand);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin: 1.25rem 0;
}

.guide-partner-label {
    display: inline-block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--brand-dark);
    margin-right: .5rem;
}

.guide-faq {
    border-bottom: 1px solid var(--border);
    padding: .6rem 0;
}

.guide-faq summary { cursor: pointer; font-weight: 700; }

.guide-faq p { margin: .5rem 0 0; }

.guide-checked { font-size: .85rem; margin-top: 1.5rem; }

.guide-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
    font-size: .95rem;
}

/* ---- Legal pages ---- */

.legal-page { max-width: 44rem; margin: 0 auto; }

.legal-page h1 { font-size: 1.6rem; margin-bottom: .5rem; }

.legal-page h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

.legal-page ul { padding-left: 1.25rem; margin: .5rem 0; }

.legal-page li { margin-bottom: .35rem; }

.site-footer a { color: var(--muted); }

/* ---- Újdonságok ---- */

.changelog .lead { margin-bottom: 1rem; }

.changelog-entry { padding: 1.25rem 0; border-top: 1px solid var(--border); }

.changelog-entry h2 { margin-top: .25rem; }

.changelog-entry p { margin: .5rem 0; }

/* ---- Listing photos ---- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.photo-grid img {
    /* The whole photo, whatever its ratio: a wide strip or a tall portrait sits
       letterboxed in the tile instead of losing its ends to a 4:3 crop. */
    width: 100%;
    height: 130px;
    object-fit: contain;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
}

.photo-grid a { position: relative; display: block; }

.photo-like-count {
    position: absolute;
    top: .4rem;
    right: .4rem;
    background: rgba(31, 36, 48, .78);
    color: #fff;
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .8rem;
    font-weight: 700;
}

/* ---- The product page: Reverb's two columns ---- */

/* Full width like the board; the photo's stage stops at 70vh and the
   description at 75 characters a line, so a wide screen does not stretch them. */
.photo-stage a { max-height: 70vh; }

.detail-body .listing-description { max-width: 75ch; }

/* Photos on the left with the description and the specs under them; on
   the right a column that stays put while the page scrolls. On a phone
   the column follows the photos and the rest comes after. */
.detail-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-areas: "gallery" "side" "body";
    margin-bottom: 2rem;
}

.detail-gallery { grid-area: gallery; min-width: 0; }

.detail-side { grid-area: side; min-width: 0; }

.detail-body { grid-area: body; min-width: 0; }

@media (min-width: 900px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas: "gallery side" "body side";
        column-gap: 2.5rem;
        align-items: start;
    }

    .detail-side { position: sticky; top: 1rem; }
}

/* The cover on a stage: the whole photo, letterboxed, and the rest as a
   strip of thumbnails under it; the one on the stage wears a dark ring. */
.photo-stage {
    border-radius: 16px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
}

.photo-stage a { display: block; aspect-ratio: 4 / 3; cursor: zoom-in; }

.photo-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }

.photo-stage-empty {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #fdf1e7, #f7dccb);
}

.photo-stage-empty .instrument-art { width: 60%; height: auto; display: block; }

.photo-thumbs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin: .6rem 0 0;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.photo-thumbs::-webkit-scrollbar { display: none; }

.photo-thumbs a { flex: 0 0 72px; }

.photo-thumbs a:only-child { display: none; }

.photo-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid transparent;
    display: block;
}

.photo-thumbs a.is-current img { border-color: var(--ink); }

.detail-badges:empty { display: none; }

.detail-badges .badge { margin: 0 .3rem .3rem 0; }

.detail-side h1 { font-size: 1.5rem; line-height: 1.25; margin: .25rem 0 .4rem; }

.detail-condition { font-size: 1rem; margin: 0 0 .75rem; }

.detail-price { margin-bottom: .9rem; }

.detail-price strong { display: block; font-size: 1.9rem; line-height: 1.15; }

.detail-price small { font-size: .9rem; font-weight: 500; color: var(--muted); margin-right: .35rem; }

.detail-price .price-drop { display: block; font-size: .95rem; }

.detail-delivery { display: grid; gap: .3rem; font-size: .95rem; margin-bottom: 1rem; }

.detail-delivery svg { width: .95rem; height: .95rem; vertical-align: -.15em; margin-right: .3rem; }

/* The buttons, between two rules: the cart and the checkout, then a word
   to the seller and the heart. */
.detail-actions {
    display: grid;
    gap: .6rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.detail-actions .btn { margin-top: 0; }

.detail-actions .buy-box { display: grid; gap: .5rem; padding: 0; margin: 0; border: 0; }

.detail-actions .buy-form { display: grid; gap: .5rem; }

.detail-actions .buy-qty { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }

.detail-actions .buy-qty input { width: 5rem; }

.detail-secondary { display: grid; gap: .5rem; }

.detail-secondary .inline-form { display: block; }

.btn-block { display: flex; justify-content: center; width: 100%; }

.detail-side .host-card { margin-bottom: 0; }

.detail-section { margin-bottom: 1.5rem; }

.detail-section h2 { font-size: 1.15rem; margin-bottom: .6rem; }

.detail-section .listing-facts, .detail-section .listing-description { margin-bottom: 0; }

.detail-body .contact-box { margin-bottom: 1.5rem; }

/* ---- Photo lightbox ---- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 17, 22, .93);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
}

.lightbox[hidden] { display: none; }

body.no-scroll { overflow: hidden; }

.lightbox-stage {
    max-width: min(92vw, 1000px);
    position: relative;
}

.lightbox-stage img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: fixed;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: .5rem .8rem;
    opacity: .85;
    z-index: 101;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }

.lightbox-close { top: .6rem; right: .8rem; font-size: 2.2rem; }

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.6rem;
}

.lightbox-prev { left: .4rem; }
.lightbox-next { right: .4rem; }

.lightbox-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
    font-weight: 600;
}

.lightbox-like {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}

.lightbox-like:hover { color: #fff; }

.lightbox-like.is-liked {
    background: var(--brand);
    border-color: var(--brand);
}

.lightbox-hint {
    font-size: .8rem;
    font-weight: 400;
    opacity: .7;
}

@media (min-width: 641px) {
    .lightbox-hint { display: none; }
}

.lightbox-heart-pop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.lightbox-heart-pop.pop { animation: heart-pop .7s ease-out; }

@keyframes heart-pop {
    0% { opacity: 0; transform: scale(.4); }
    25% { opacity: 1; transform: scale(1.15); }
    60% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.photo-grid-manage .photo-item { text-align: center; }

.photo-grid-manage form { margin-top: .35rem; }

.photo-actions { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }

.listing-row-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

.listing-row-actions .btn-primary { margin-top: 0; }

.photo-item.is-cover img { outline: 3px solid var(--brand); outline-offset: -3px; }

.photo-cover-badge {
    display: inline-block;
    margin-top: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.listing-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

input[type="file"] {
    display: block;
    width: 100%;
    padding: .5rem 0;
    font: inherit;
}

/* ---- Account & nav badge ---- */

.nav-badge {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    font-size: .75rem;
    padding: 0 .45rem;
    vertical-align: middle;
}

.account-form {
    max-width: 24rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.account-form label { display: block; font-weight: 600; font-size: .9rem; margin: .75rem 0 .3rem; }

.account-form input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.account-form button { margin-top: 1rem; }

/* ---- Icon nav ---- */

.nav-links a, .nav-links .link-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }

.nav-has-badge { position: relative; }

@media (max-width: 640px) {
    .nav-links { gap: .35rem; }

    .nav-links .nav-label { display: none; }

    .nav-links a, .nav-links .link-button {
        padding: .55rem;
        border-radius: 10px;
    }

    .nav-links a:active, .nav-links .link-button:active { background: var(--bg); }

    .nav-icon { width: 24px; height: 24px; }

    .nav-cta { padding: .45rem .8rem; }

    .nav-has-badge .nav-badge {
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* ---- Result cards on small screens: stack, don't squeeze ---- */

@media (max-width: 640px) {
    .listing-row {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    .listing-thumb {
        width: 100%;
        height: 170px;
        border-radius: 10px;
    }

    .listing-price {
        text-align: left;
        white-space: normal;
        display: flex;
        align-items: baseline;
        gap: .35rem;
        border-top: 1px solid var(--border);
        padding-top: .5rem;
    }

    .listing-price small { display: inline; }

}

/* ---- Card title on its own line, badges above ---- */

.listing-head-badges {
    display: flex;
    gap: .4rem;
    margin-bottom: .3rem;
}

/* The stack under the photo, in a fixed order: a small category line, the
   make and model on up to two lines, the condition, the price, the place,
   then what the seller offers. Each line is cut with an ellipsis, so the
   lines sit in the same place on every card, whatever the listing says. */
.card-kicker,
.card-condition,
.card-features { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-kicker {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.listing-headline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.1rem;
    line-height: 1.3;
}

.card-condition { font-size: .9rem; }

.card-place {
    display: block;
    font-size: .85rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-place svg { width: .9rem; height: .9rem; vertical-align: -.15em; margin-right: .25rem; }

.card-features { font-size: .8rem; color: var(--muted); }

.card-fresh { font-size: .8rem; font-weight: 600; color: var(--brand-dark); }

/* Two across on a phone leaves a card about 165px wide: the type, the
   heart and the badges step down with it, and the "Összes" card's stack too. */
@media (max-width: 599px) {
    .card-body { padding: .5rem 0 .3rem; gap: .15rem; }

    .card-kicker { font-size: .65rem; }

    .listing-headline { font-size: .95rem; }

    .card-condition { font-size: .8rem; }

    .card-body .listing-price { font-size: 1.1rem; margin-top: .2rem; gap: .3rem; }

    .card-body .listing-price small,
    .card-place,
    .card-features,
    .card-fresh,
    .card-was { font-size: .75rem; }

    .card-heart { width: 1.9rem; height: 1.9rem; top: .45rem; right: .45rem; }

    .card-heart svg { width: 1.05rem; height: 1.05rem; }

    .card-overlays { top: .45rem; left: .45rem; }

    .card-overlays .badge { font-size: .7rem; padding: .2rem .55rem; }

    .shelf-more-stack { width: 110px; height: 84px; }

    .shelf-more-thumb { width: 76px; height: 58px; border-width: 3px; }
}

/* The kicker's words: "Kiemelt" in the accent colour (Reverb's "BUMP"),
   "Árcsökkenés" in red (its "PRICE DROP"). */
.card-bump { color: var(--accent); }

.card-drop-kicker { color: var(--drop); }

/* A price that came down: the old one struck through and the drop in
   red, on the line above the price. */
.card-was { font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-was s { margin-right: .3rem; }

.card-drop, .price-drop { color: var(--drop); font-weight: 600; }

.price-drop { font-size: .9rem; }

.price-drop s { color: var(--muted); font-weight: 400; margin-right: .3rem; }

.badge-featured { background: #fdeee7; border-color: #f3cdb9; color: var(--accent); }

/* The grid's head: how many it found on the left, the order on the right. */
.board-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: .25rem 0 .9rem;
}

.board-count { color: var(--muted); font-size: .95rem; }

.board-sort { display: flex; align-items: center; gap: .5rem; }

.board-sort label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }

.board-sort select {
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
}

.card-chips { display: flex; flex-wrap: wrap; gap: .3rem .4rem; margin-top: .5rem; }

/* ---- Feature chips in the badge row ---- */

.listing-head-badges {
    flex-wrap: wrap;
    row-gap: .3rem;
    margin-bottom: .5rem;
}

.badge-soft {
    background: var(--bg);
    border-color: var(--border);
    color: var(--muted);
}

/* ---- Hero banner with illustration ---- */

.hero-banner {
    position: relative;
    background: linear-gradient(135deg, #fdf1e3, #fbe0c8);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.hero-banner .hero-text {
    position: relative;
    z-index: 1;
    max-width: 55%;
}

.hero-art {
    position: absolute;
    right: -20px;
    bottom: -6px;
    height: 105%;
    max-width: 55%;
    pointer-events: none;
}

@media (max-width: 760px) {
    .hero-banner { padding: 1.5rem 1.25rem 0; }

    .hero-banner .hero-text { max-width: 100%; }

    .hero-banner .hero-lead { display: none; }

    .hero-art {
        position: static;
        display: block;
        max-width: 100%;
        height: auto;
        margin: .5rem auto -6px;
    }
}

/* ---- Structured apply fields ---- */

.apply-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .6rem;
    margin: .6rem 0;
}

.apply-fields label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
}

.apply-fields input {
    width: 100%;
    margin-top: .25rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

/* ---- Candidate photo on the board ---- */

.candidate-body { display: flex; gap: 1rem; align-items: flex-start; }

.candidate-photo {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.apply-fields select {
    width: 100%;
    margin-top: .25rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

/* ---- Design pass: links, back-links, detail rhythm ---- */

/* Content links: brand color, never browser purple */
.page a { color: var(--brand-dark); }

.page a.btn, .page a.badge, .page a.listing-row, .page a.category-card,
.page a.card-body, .page a.back-link, .page .nav-links a, .page .filter-tabs a { color: inherit; }

.page a.btn-primary, .page .nav-cta { color: #fff; }

.back-link {
    display: inline-block;
    color: var(--muted) !important;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.back-link:hover { color: var(--brand) !important; }

/* Listing detail: breathing room between badge row and title */
.listing-detail-head { margin-bottom: 1.25rem; }

.listing-detail-head .badge { margin-right: .4rem; }

.listing-detail-head h1 { margin: .65rem 0 0; }

/* Fix: active filter tab keeps white text (design-pass link rule overrode it) */
.page .filter-tabs a.active { color: #fff; }

/* ---- Impersonation banner ---- */

.impersonation-bar {
    background: #1f2430;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .5rem 1rem;
    font-size: .9rem;
    flex-wrap: wrap;
}

.impersonation-bar .btn { padding: .3rem .8rem; font-size: .85rem; }

/* ---- Share row ---- */

.share-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.share-label { font-weight: 600; font-size: .9rem; color: var(--muted); }

.share-btn { font-size: .85rem; padding: .4rem .8rem; }

.share-fb { background: #1877f2; border-color: #1877f2; color: #fff !important; }

.share-wa { background: #25d366; border-color: #25d366; color: #fff !important; }

.share-viber { background: #7360f2; border-color: #7360f2; color: #fff !important; }

/* ---- Avatars ---- */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 64px; height: 64px; }

.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

.avatar-sm.avatar-initial { font-size: .85rem; }
.avatar-lg.avatar-initial { font-size: 1.6rem; }

.thread-head, .account-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .75rem;
}

.candidate-name { display: inline-flex; align-items: center; gap: .5rem; }

.avatar-form {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.avatar-form input[type="file"] { width: auto; padding: 0; }

.applicants-cta { margin-top: .5rem; font-size: .85rem; padding: .35rem .8rem; }

.fiok-tabs { margin: 1rem 0 1.5rem; }

.account-form-wide { max-width: 30rem; }

.account-form select {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

/* ---- Situation chooser on the posting form ---- */

.situation-row .radio-option { font-size: 1rem; padding: .2rem 0; }

.situation-extra {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .25rem 1rem 1rem;
    margin-top: .75rem;
}

.form-hint { font-size: .85rem; margin: .35rem 0 0; }

/* ---- Hogyan működik page ---- */

.howto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.howto-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
}

.howto-card h2 { font-size: 1.15rem; margin: .5rem 0 .75rem; }

.howto-card ol { padding-left: 1.2rem; display: grid; gap: .6rem; }

.howto-card .muted { margin-top: .75rem; font-size: .9rem; }

/* The "after the order" card runs the width of the grid, its steps side by side where there is room. */
.howto-card-wide { grid-column: 1 / -1; }

.howto-card-wide ol { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.5rem; padding-left: 0; list-style-position: inside; }

/* ---- Button rows: consistent gaps, stacked full-width on phones ---- */

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
}

.btn-row .btn { margin-top: 0; }

@media (max-width: 640px) {
    .btn-row .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Language switcher (nav) */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lang-switch a,
.lang-switch-on {
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.2;
    text-decoration: none;
}

.lang-switch a {
    color: var(--muted);
}

.lang-switch a:hover {
    color: inherit;
    background: rgba(0, 0, 0, 0.05);
}

.lang-switch-on {
    background: var(--ink);
    color: #fff;
}

/* Visible to screen readers only. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Admin statistics */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin: 1rem 0 .5rem;
}

.stat-card {
    padding: .9rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.35;
}

.stat-number {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
}

.stat-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: .5rem;
}

.stat-table th {
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600;
    padding: .4rem .6rem;
}

.stat-table td {
    padding: .4rem .6rem;
    border-top: 1px solid var(--border);
}

.stat-table .stat-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.stat-table .stat-empty td {
    color: var(--muted);
}

/* Placeholders must never be mistakable for text already in the field.
   Without this they inherit the browser default, which on several mobile
   browsers is close enough to the real text colour to look like content. */
input::placeholder,
textarea::placeholder {
    color: #9aa0ad;
    opacity: 1; /* Firefox dims placeholders by default; keep it predictable. */
}

/* .form-hint was written to sit after a field; when it sits between a label
   and its field it needs breathing room below, or the input butts against it. */
.form-hint + input,
.form-hint + textarea,
.form-hint + select {
    margin-top: .35rem;
}

/* Quick-view map: same dark overlay as the photo lightbox, an OSM iframe
   inside. The area is deliberately approximate — the hint says so. */
.map-link { white-space: nowrap; }

.map-stage {
    width: min(92vw, 900px);
}

.map-stage iframe {
    display: block;
    width: 100%;
    height: min(70vh, 560px);
    border: none;
    border-radius: 12px;
    background: #dfe6ee;
}

.map-hint {
    color: #fff;
    opacity: .75;
    font-size: .85rem;
    text-align: center;
    margin-top: .6rem;
}

/* ---- Coming-soon landing pages: "tell me when it launches" ---- */

.interest-hero .hero-text { max-width: 46rem; }

.interest-badge {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.interest-cta .btn-large { font-size: 1.05rem; padding: .75rem 1.4rem; }

.interest-cta .form-hint { max-width: 32rem; }

.interest-thanks {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--brand);
    border-radius: 12px;
}

.interest-thanks p { margin: .25rem 0 0; }

.interest-email-form { margin-top: .75rem; }

.interest-email-form label { display: block; font-weight: 600; margin-bottom: .35rem; }

.interest-email-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.interest-email-row input {
    flex: 1 1 14rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

.interest-email-row .btn { margin-top: 0; }

.interest-steps {
    max-width: 46rem;
    padding-left: 1.2rem;
    display: grid;
    gap: .6rem;
}

/* ---- Board hero: a strip, now that the rows carry the page ---- */

.hero-board { padding: 1.1rem 1.5rem; margin-bottom: 1rem; }

.hero-board .hero-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
    max-width: 64%;
}

.hero-board h1 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 0; }

.hero-board .btn-row { margin-top: 0; }

.hero-board .btn-row .btn { padding: .45rem .9rem; }

.hero-board .hero-lead { flex-basis: 100%; margin: 0; font-size: .92rem; }

.hero-board .hero-art { height: 125%; right: -10px; bottom: -14px; }

@media (max-width: 760px) {
    .hero-board { padding: .9rem 1.1rem .95rem; }

    .hero-board .hero-text { max-width: 100%; gap: .5rem; }

    .hero-board .hero-lead, .hero-board .hero-art { display: none; }

    .hero-board .btn-row { flex-basis: 100%; }

    .hero-board .btn-row .btn { flex: 1 1 auto; text-align: center; }
}

/* ---- Subject tabs (header) ---- */

/* The site's subjects in the header, the way Airbnb lines up Homes,
   Experiences and Services: an icon, a label, and a bar under the current
   one that sits on the header's bottom edge. The brand and the account
   links keep the first line; the tabs take a line of their own under them,
   and move up between the two only once the header is wide enough for all
   four beside a signed-in Hungarian nav, which needs about 1240px. */
.cat-tabs {
    display: flex;
    align-items: stretch;
    order: 1;
    flex-basis: 100%;
    gap: 1.25rem;
    /* Reach down through the header's 1rem bottom padding, so the bar
       under the current tab lands on the header's edge. */
    margin: -.25rem 0 -1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.cat-tabs::-webkit-scrollbar { display: none; }

/* Centred while there is room, scrollable when there is not: auto margins
   give way before they let a tab overflow out of reach, which
   `justify-content: center` would. */
.cat-tab:first-child { margin-left: auto; }

.cat-tab:last-child { margin-right: auto; }

.cat-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .25rem .6rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.cat-tab::after {
    content: "";
    position: absolute;
    left: .25rem;
    right: .25rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
}

.cat-tab:hover { color: var(--ink); }

.cat-tab:hover::after { background: var(--border); }

.cat-tab.active { color: var(--ink); }

.cat-tab.active::after { background: var(--ink); }

.cat-tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    border-radius: 8px;
}

.cat-icon-wrap { position: relative; display: inline-flex; }

.cat-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transition: transform .15s;
}

@media (hover: hover) and (pointer: fine) {
    .cat-tab:hover .cat-icon { transform: scale(1.08); }
}

/* "Hamarosan" on the ones that are not built yet, where Airbnb writes NEW.
   Centred over the icon while the tabs stand close together, top-right of
   it once they have the width of a desktop. */
.cat-badge {
    position: absolute;
    top: -.4rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A phone: the brand and the account icons already take a line each, so
   the tabs are the third; keep it tight, and let a narrow screen scroll it. */
@media (max-width: 640px) {
    .cat-tabs { gap: .6rem; margin-top: -.5rem; }

    .cat-tab { padding: .5rem .15rem; font-size: .75rem; }

    .cat-tab::after { left: .15rem; right: .15rem; }
}

@media (min-width: 1300px) {
    .cat-tabs {
        order: 0;
        flex-basis: auto;
        align-self: stretch;
        gap: 1.5rem;
        margin: 0 auto -1rem;
        overflow: visible;
    }

    .cat-tab:first-child { margin-left: 0; }

    .cat-tab:last-child { margin-right: 0; }

    /* Icon beside the label, both centred on the brand: the tab is as tall
       as the header, and its bottom padding is the padding it reaches into. */
    .cat-tab {
        flex-direction: row;
        gap: .5rem;
        padding: 0 .1rem 1rem;
        font-size: .95rem;
    }

    .cat-tab::after { left: 0; right: 0; }

    .cat-icon { width: 36px; height: 36px; }

    .cat-badge { left: 60%; transform: none; }
}


/* ---- HasználtHangszer additions ---- */

/* The trail above a category, brand, shop or listing page. */
.board-crumbs { font-size: .9rem; color: var(--muted); margin-bottom: .75rem; }
.board-crumbs a { color: var(--muted); }
.board-crumbs a:hover { color: var(--brand); }

/* A shop's listing wears the badge on every card and page. */
.badge-shop { background: #eaf4f2; border-color: #bcdcd8; color: var(--brand-dark); }
.badge-shop a { color: inherit; }

/* The one rule on paying safely, on every listing page. */
.safety-box { border-color: #f0dfa0; background: #fff8e1; }

/* A sold listing's notice under the title. */
.sold-notice { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The drawn cover of a listing without photos fills the media box. */
.card-media-empty .instrument-art { width: 100%; height: 100%; display: block; }

/* The "similar" strip on a listing page: a small grid, not a shelf. */
.listing-cards-similar { margin-top: .5rem; }
.board-row-similar { margin-top: 2rem; }

/* ---- A shop's page: Reverb's shop header, and the directory's tiles ---- */

.shop-head { margin: 1rem 0 .5rem; }

.shop-cover {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    border-radius: 16px;
    margin: 0;
}

.shop-head-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* With a cover the logo sits over its foot, the way Reverb's does. */
.shop-cover + .shop-head-row { margin-top: -2.5rem; padding-left: 1.25rem; }

.shop-cover + .shop-head-row .shop-head-main { padding-top: 2.75rem; }

.shop-cover + .shop-head-row .shop-links { padding-top: 2.75rem; }

.shop-head-logo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop-head-logo-avatar .avatar { width: 100%; height: 100%; border-radius: 0; font-size: 2.2rem; }

.shop-head-main { flex: 1 1 20rem; min-width: 0; }

.shop-head h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.shop-tagline { color: var(--muted); margin: .15rem 0 .4rem; }

.shop-meta { display: flex; flex-wrap: wrap; gap: .2rem .4rem; font-size: .95rem; color: var(--muted); }

.shop-meta svg { width: .95rem; height: .95rem; vertical-align: -.15em; margin-right: .25rem; }

.shop-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

.shop-links { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; flex: 0 0 auto; }

.shop-about { margin: 1rem 0 0; max-width: 60rem; line-height: 1.6; }

.shop-tabs { margin: 1.25rem 0 0; }

.store-heading { font-size: 1.3rem; margin: .5rem 0 .75rem; }

@media (max-width: 599px) {
    .shop-cover + .shop-head-row { margin-top: -1.75rem; padding-left: .75rem; }

    .shop-cover + .shop-head-row .shop-head-main,
    .shop-cover + .shop-head-row .shop-links { padding-top: 0; }

    .shop-cover + .shop-head-row .shop-head-main { flex-basis: 100%; }

    .shop-head-logo { width: 72px; height: 72px; }
}

.shop-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.page a.shop-tile {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.page a.shop-tile:hover { border-color: var(--brand); }

.shop-tile-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    background: linear-gradient(135deg, #fdf1e3, #fbe0c8);
}

.shop-tile-body { display: block; padding: 0 1rem 1rem; }

.shop-tile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
}

.shop-tile-logo-avatar .avatar { width: 100%; height: 100%; border-radius: 0; }

.shop-tile strong { display: block; margin-top: .5rem; font-size: 1.05rem; }

.shop-tile strong .badge { vertical-align: middle; }

.shop-tile-tagline { display: block; font-size: .9rem; margin-top: .1rem; }

.shop-tile .muted { display: block; font-size: .9rem; margin-top: .2rem; }

/* ---- The posting form: three sections and the category picker ---- */

.form-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .5rem 1rem 1rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.form-section > legend {
    font-weight: 700;
    padding: 0 .35rem;
}

.form-section[hidden] { display: none; }

/* The hidden attribute always wins inside a form: the card's own
   display: block on labels would otherwise show a field the form keeps
   out of sight, such as the county beside a city we know. */
.form-card [hidden] { display: none !important; }

/* Two short fields side by side (the make and the model, the city and
   the county), one under the other on a phone. The label wraps its field,
   so it keeps the form's own label look; the field would take the label's
   bold, smaller type, which also made an iPhone zoom in on it, so it gets
   the page's own. */
.field-pair { display: flex; gap: 1rem; }

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

.form-card .field-pair input,
.form-card .field-pair select { margin-top: .3rem; font-size: 1rem; font-weight: 400; }

@media (max-width: 480px) {
    .field-pair { flex-direction: column; gap: 0; }
}

/* A short number, such as the year, needs no full-width box. */
.form-card input.field-short { max-width: 10rem; }

/* The condition as a list to pick from, each grade with what it means, so
   a seller sees the difference between "Kiváló" and "Jó" before choosing. */
.choice-group { border: 0; margin: .9rem 0 0; padding: 0; min-width: 0; }

.choice-group > legend { padding: 0; margin-bottom: .3rem; font-weight: 600; font-size: .9rem; }

.condition-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

@media (max-width: 480px) {
    .condition-options { grid-template-columns: minmax(0, 1fr); }
}

.form-card label.condition-option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-weight: 400;
    cursor: pointer;
}

.form-card .condition-option input { flex: none; width: auto; margin: .25rem 0 0; }

.condition-option strong { display: block; font-size: .95rem; }

.condition-option small { display: block; margin-top: .1rem; font-size: .8rem; line-height: 1.35; color: var(--muted); }

.form-card label.condition-option:hover { border-color: var(--brand); }

.form-card label.condition-option:has(input:checked) {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
    background: var(--bg);
}

/* What the check before sending found: the field framed in red until it
   is changed. The summary box above the form lists the same. */
.form-card input.is-invalid,
.form-card select.is-invalid,
.form-card textarea.is-invalid,
.form-card .photo-drop.is-invalid { border-color: #c44; }

.category-picker.is-invalid,
.choice-group.is-invalid,
.tradein-fields.is-invalid {
    outline: 2px solid #f2c4c4;
    outline-offset: 6px;
    border-radius: 8px;
}

.form-errors a { color: inherit; }

/* The posting form on a phone: its sections are the boxes, so the card
   around them steps back and gives its padding to the fields, which were
   258px wide on a 390px screen and cut their own placeholders short. The
   sections turn white so they still read as cards on the page. */
@media (max-width: 599px) {
    .form-card-post {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .form-card-post .form-section { background: var(--card); }

    /* The last thing on a long form: the whole width, for a thumb. */
    .form-card-post .form-submit { display: block; width: 100%; padding: .8rem 1rem; font-size: 1.05rem; }
}

.picker-search { position: relative; }

.picker-results {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin: .15rem 0 0;
    padding: .25rem 0;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    max-height: 18rem;
    overflow-y: auto;
}

.picker-results button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .5rem .75rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.picker-results button:hover,
.picker-results button:focus { background: var(--bg); outline: none; }

.picker-results small { display: block; font-size: .8rem; color: var(--muted); }

.picker-empty { padding: .5rem .75rem; font-size: .9rem; color: var(--muted); }

.picker-chosen { margin: .6rem 0 0; font-size: .95rem; }

.picker-step { margin-top: .85rem; }

.picker-step-title { margin: 0 0 .4rem; font-weight: 600; font-size: .9rem; }

.picker-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

@media (min-width: 600px) {
    .picker-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.picker-tile {
    border: 1px solid var(--border);
    background: var(--card);
    color: inherit;
    border-radius: 8px;
    padding: .55rem .6rem;
    font: inherit;
    font-size: .9rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.picker-tile:hover { border-color: var(--brand); }

.picker-tile-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.picker-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* A long name ("Wireless rendszerek gitárokhoz, basszusgitárokhoz") wraps
   inside its chip; kept on one line it ran past the picker on a phone and
   pushed the whole page sideways. */
.picker-chips .chip {
    max-width: 100%;
    font: inherit;
    font-size: .85rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.picker-chips .chip-active { color: #fff; }

/* ---- A shop's own area: overview tiles, the stock table ---- */

.bolt-tabs { margin: 0 0 1.25rem; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .85rem 1rem;
    color: inherit;
    text-decoration: none;
}

.stat-tile strong { font-size: 1.6rem; line-height: 1.1; }

.stat-tile-alert { border-color: var(--accent); }

.stat-tile-alert strong { color: var(--accent); }

.dash-stats-row { margin-top: 1rem; }

.stock-thumb-art { display: flex; align-items: center; justify-content: center; overflow: hidden; }

.stock-thumb-art .instrument-art { width: 100%; height: 100%; display: block; }

.stock-status .badge { vertical-align: middle; }

.link-danger { color: #9b1c1c !important; }

.stat-tile span { font-size: .82rem; color: var(--muted); }

a.stat-tile:hover { border-color: var(--brand); }

.shop-address-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1.5rem;
}

.shop-address-card h3 { margin: 0 0 .3rem; font-size: 1rem; }

.shop-address-card p { margin: .2rem 0; overflow-wrap: anywhere; }

.stock-tabs { margin-bottom: .75rem; }

.stock-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.stock-toolbar input[type="search"] { flex: 1 1 14rem; }

.stock-toolbar select { flex: 0 1 auto; }

.stock-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin-bottom: .75rem;
}

.stock-bulk .radio-option { margin-right: auto; }

/* A menu list's buttons submit the bulk form, so the list stays inside it. */
.stock-bulk .menu-list { min-width: 11rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.stock-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: .9rem;
}

.stock-table th, .stock-table td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.stock-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

.stock-table tr:last-child td { border-bottom: 0; }

.stock-table tr.is-closed td { color: var(--muted); }

.stock-item { display: flex; align-items: center; gap: .6rem; min-width: 16rem; }

.stock-thumb {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.stock-price { white-space: nowrap; }

.stock-actions { white-space: nowrap; }

/* "Szerkesztés" as the one button and the rest behind "…": a menu that
   drops from the button, one open at a time (the script in the partial). */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }

.row-actions .btn { margin-top: 0; }

.menu { position: relative; }

.menu-toggle { list-style: none; cursor: pointer; line-height: 1; font-weight: 700; letter-spacing: .05em; padding: .35rem .55rem; }

.menu-toggle::-webkit-details-marker { display: none; }

/* A toggle with a word on it ("Kijelöltek") is a plain button with a caret. */
.menu-toggle-text { letter-spacing: 0; line-height: inherit; padding: .55rem 1.1rem; }

.menu-caret { font-size: .8em; margin-left: .15em; }

.menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    z-index: 30;
    min-width: 12.5rem;
    display: grid;
    padding: .35rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 36, 48, .14);
    text-align: left;
    white-space: nowrap;
}

.menu-list form { display: block; margin: 0; }

.page a.menu-item, .menu-item {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.page a.menu-item:hover, .menu-item:hover { background: rgba(0, 0, 0, .05); }

.menu-item.is-danger { color: #9b1c1c; }

.form-head { margin-bottom: .75rem; }

.form-head h1 { margin: 0; }

/* The list is fixed to the viewport once open (the script), so a table's
   scroll box never clips it. */
.menu-list.is-fixed { position: fixed; right: auto; }

.stock-table .empty-state { text-align: center; }

.shop-logo { object-fit: contain; background: #fff; }

.shop-logo-preview { display: block; width: 6rem; height: 6rem; border: 1px solid var(--border); border-radius: 12px; margin: .25rem 0 .5rem; }

.stock-toolbar input[type="search"],
.stock-toolbar select {
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: #fff;
}

/* On a phone the table becomes a stack of cards with air between them:
   the item and its "…" on the first line, the facts on the second. */
@media (max-width: 720px) {
    .stock-table, .stock-table tbody { display: block; background: transparent; border: 0; }
    .stock-table thead { display: none; }
    .stock-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem .7rem;
        padding: .8rem .85rem;
        margin-bottom: .75rem;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
    }
    .stock-table tr { position: relative; }
    .stock-table td { display: block; border: 0; padding: 0; }
    .stock-table td.stock-select { flex: 0 0 auto; order: -3; }
    .stock-item { flex: 1 1 100%; min-width: 0; order: -2; padding-right: 2.6rem; }
    /* The "…" sits in the card's corner; "Szerkesztés" takes the card's last
       line on its own, at the right. */
    .stock-actions { flex: 1 1 100%; order: 10; white-space: normal; padding: 0; margin-top: .2rem; }
    .stock-table .row-actions .menu { position: absolute; top: .65rem; right: .65rem; }
    .stock-price, .stock-status, .stock-meta { flex: 0 0 auto; font-size: .85rem; }
    .stock-meta::before { content: attr(data-label) " "; color: var(--muted); }
    .stock-table .empty-state { flex: 1 1 100%; }
}

@media (max-width: 720px) {
    .stock-table td.stock-item { display: flex; }
}

/* ---- Opening a shop (Fiókom → Bolt nyitása) and closing it ---- */

.shop-open { display: grid; gap: 1.25rem; max-width: 46rem; margin-top: 1rem; }

.shop-open-pitch h2 { margin: 0 0 .4rem; }

.shop-open-pitch .lead { margin: 0 0 .75rem; font-size: 1.05rem; }

.shop-open-benefits { margin: 0 0 .75rem; padding-left: 1.2rem; display: grid; gap: .4rem; }

.shop-close { max-width: 30rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

.shop-close h3 { margin: 0 0 .3rem; }

.shop-close p { margin: 0 0 .75rem; }

/* ---- Admin: aldomain ellenőrzés ---- */

.subdomain-verdict {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    background: var(--card);
    border: 1px solid #e0a000;
    border-radius: 12px;
}

.subdomain-verdict.is-live { border-color: #2f9e44; }

.subdomain-verdict p { margin: .3rem 0 0; }

.subdomain-table td:first-child { font-weight: 600; white-space: nowrap; }

.subdomain-table td { word-break: break-word; }

/* ---- A shop's storefront: its category menu beside the grid ---- */

.store-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}

.store-side { position: sticky; top: 1rem; }

.store-menu summary {
    cursor: pointer;
    font-weight: 700;
    padding: .5rem 0;
    list-style: none;
}

.store-menu summary::-webkit-details-marker { display: none; }

.store-menu-list, .store-menu-list ul { list-style: none; margin: 0; padding: 0; }

.store-menu-list ul {
    margin: .1rem 0 .3rem .7rem;
    padding-left: .5rem;
    border-left: 2px solid var(--border);
}

.store-menu-list a {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
}

.store-menu-list a:hover { background: rgba(0, 0, 0, .05); }

.store-menu-list li.is-open > a { font-weight: 700; }

.store-menu-list li.is-active > a { background: var(--brand); color: #fff; }

.store-menu-list .count { color: var(--muted); font-size: .85rem; }

.store-menu-list li.is-active > a .count { color: inherit; }

.store-crumbs { margin-bottom: .25rem; }

.store-about { margin-top: 1.5rem; font-size: .92rem; color: var(--muted); }

.store-about h3 { font-size: 1rem; margin: 0 0 .3rem; color: var(--ink); }

.store-about p { margin: .3rem 0; }

@media (min-width: 721px) {
    .store-menu summary { pointer-events: none; }
}

@media (max-width: 720px) {
    .store-layout { grid-template-columns: 1fr; gap: 1rem; }
    .store-side { position: static; }
    .store-menu {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: .25rem .75rem;
    }
}

/* ---- A branded store on its subdomain: the shop is the brand ---- */

.store-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
}

/* The logo keeps its shape: a fixed height, the width its own ratio (a
   wide wordmark fits, a square mark stays square), capped so it never
   crowds the search box. Alone, without the name, it may stand taller. */
.store-logo { height: 40px; width: auto; max-width: 11rem; border-radius: 6px; object-fit: contain; }

.store-brand.is-logo-only .store-logo { height: 48px; max-width: 15rem; }

@media (max-width: 720px) {
    .store-logo { max-width: 8rem; }
    .store-brand.is-logo-only .store-logo { height: 40px; max-width: 11rem; }
}

.store-search { display: flex; gap: .4rem; flex: 1 1 16rem; max-width: 28rem; }

.store-search input {
    flex: 1;
    min-width: 0;
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.store-contact {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.25rem;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--muted);
}

.store-contact a { color: inherit; }

.store-footer { margin-top: 2rem; }

/* The shop's own look (Boltom → Megjelenés): the tagline under the name,
   the notice under the header, the cover as the front page's hero. The
   brand colour needs no rule of its own: the layout writes it over --brand. */

.store-brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.store-tagline { font-size: .78rem; font-weight: 500; color: var(--muted); }

.store-notice {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    padding: .55rem 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    overflow-wrap: anywhere;
}

.store-notice-bar { border-radius: 0; margin: 0; padding: .55rem 0; }

.store-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 220px;
    margin-top: 1rem;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--card);
    background-size: cover;
    background-position: center;
}

.store-hero-text {
    width: 100%;
    padding: 2.5rem 1.5rem 1.25rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.store-hero h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }

.store-hero p { margin: .25rem 0 0; font-size: 1.05rem; }

@media (max-width: 720px) {
    .store-hero { min-height: 160px; }
    .store-hero-text { padding: 2rem 1rem .9rem; }
}

/* The same look on the shop's page on the marketplace: the cover as a banner, the tagline under the name. */

.shop-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    border-radius: 14px;
    margin-top: 1rem;
}

.shop-tagline { margin: .1rem 0 .5rem; font-size: 1.05rem; color: var(--muted); }

.shop-cover-preview {
    display: block;
    max-width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: .25rem 0 .5rem;
}

/* The colour field: a picker beside the hex it writes. */

.color-field { display: flex; gap: .5rem; align-items: center; }

.account-form .color-field input[type="color"] {
    flex: 0 0 3rem;
    width: 3rem;
    height: 2.6rem;
    padding: .15rem;
    background: var(--card);
    cursor: pointer;
}

.color-field input[type="text"] { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- Category search: a filter you type into ---- */

.category-search-field { position: relative; }

.category-search-input { padding-right: 1.8rem; }

.category-search-clear {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: .2rem .4rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.category-search-clear:hover { color: var(--ink); }

.search-field .category-search-clear { right: 0; }

.category-search-results { max-height: 18rem; overflow-y: auto; }

.picker-results button.is-active { background: var(--bg); }

/* ---- The account area: navigation beside the page ---- */

/* Full width, like the board: the wide container's side padding is the only margin. */
.account-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.account-main { min-width: 0; }

.account-nav { position: sticky; top: 1rem; }

.account-nav-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }

.account-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }

.account-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

.account-nav a:hover { background: rgba(0, 0, 0, .05); }

.account-nav a.is-active { background: var(--brand); color: #fff; }

.account-nav .nav-badge { position: static; margin-left: auto; }

/* The groups, the way Reverb's sidebar reads, and the shop's own pages nested under it. */
.account-nav-group {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: .9rem .75rem .25rem;
}

.account-nav ul ul { margin: .1rem 0 .3rem .9rem; padding-left: .5rem; border-left: 2px solid var(--border); }

.account-nav ul ul a { font-weight: 500; font-size: .92rem; padding: .35rem .6rem; }

.account-nav ul ul a.is-current { background: rgba(0, 0, 0, .06); font-weight: 700; }

/* On a desktop the sidebar carries the shop's pages, so its own tab row goes. */
@media (min-width: 801px) { .bolt-tabs { display: none; } }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.dash-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}

.dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.dash-card h2 { font-size: 1.05rem; margin: 0; }

.dash-card h2 a { color: inherit; text-decoration: none; }

.dash-card h2 a:hover { color: var(--brand); }

.dash-card > p { margin: .35rem 0 0; }

.dash-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem 0;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.dash-card-head + .dash-row { border-top: 0; }

.dash-row:hover strong { color: var(--brand); }

.dash-row.is-unread strong::before { content: '● '; color: var(--brand); }

.dash-row.is-closed { opacity: .7; }

.dash-row small { color: var(--muted); }

.dash-stats { margin: .25rem 0 .5rem; }

@media (max-width: 800px) {
    /* minmax(0, …): a bare 1fr would grow to the pill row's full width instead of letting it scroll. */
    .account-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .account-nav { position: static; min-width: 0; }
    .account-nav-head { display: none; }
    .account-nav-group, .account-nav ul ul { display: none; }
    .account-nav ul { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: .4rem; padding-bottom: .25rem; }
    .account-nav ul::-webkit-scrollbar { display: none; }
    .account-nav a {
        white-space: nowrap;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: .45rem .85rem;
    }
    .account-nav a.is-active { border-color: var(--brand); }
    .account-nav .nav-badge { margin-left: .35rem; }
}

/* ---- Sales: the deal in the conversation, and its own page ---- */

.sale-panel {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--card);
    border: 1px solid var(--brand);
    border-radius: 12px;
}

.sale-panel summary { cursor: pointer; font-weight: 700; list-style: none; }

.sale-panel summary::-webkit-details-marker { display: none; }

.sale-panel summary::before { content: '+ '; color: var(--brand); }

.sale-panel[open] summary::before { content: '– '; }

.sale-panel-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }

.sale-panel-head a { margin-left: auto; }

.sale-panel .account-form { max-width: 30rem; margin-top: .5rem; }

.sale-step p { margin: .35rem 0; }

.sale-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

.sale-cancel { margin-top: .75rem; }

.sale-cancel .link-button { color: var(--muted); font-size: .9rem; }

.form-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; }

.form-row label { margin-top: .75rem; }

.sale-facts { margin: .75rem 0; }

.sale-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }

.sale-timeline li { position: relative; padding: .35rem 0 .35rem 1.1rem; }

.sale-timeline li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: .85rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
}

.sale-time { display: inline-block; min-width: 9.5rem; color: var(--muted); font-size: .9rem; }

.sale-row { text-decoration: none; color: inherit; }


@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .sale-time { display: block; min-width: 0; }
}

/* A radio or checkbox in an account form sits beside its words, not above them. */
.account-form .radio-option { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .25rem; font-weight: 500; }

.account-form .radio-option input { width: auto; margin: 0; }

/* ---- "Megveszem": the box on the listing, the order page ---- */

.buy-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.buy-box .btn { margin-top: 0; }

.buy-box .buy-price { display: flex; flex-direction: column; }

.buy-box .buy-price strong { font-size: 1.3rem; }

.buy-box .buy-price .muted { font-size: .9rem; }

.buy-box .form-hint { flex-basis: 100%; margin: 0; }

/* ---- The cart and the checkout: Reverb's two columns ---- */

/* The lines (or the form) on the left, a summary on the right that stays
   put while the page scrolls, with the total and the button. On a phone
   the summary follows the lines. */
.cart-layout, .checkout-layout { display: grid; gap: 1.5rem; align-items: start; margin-top: 1rem; }

.cart-main, .checkout-form { min-width: 0; }

@media (min-width: 900px) {
    .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 2.5rem; }

    .cart-summary, .checkout-summary { position: sticky; top: 1rem; }
}

.cart-summary, .checkout-summary {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
}

.cart-summary h2, .checkout-summary h2 { font-size: 1.15rem; margin: 0 0 .5rem; }

.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .95rem; }

.summary-row[hidden] { display: none; }

.summary-total { border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .75rem; font-size: 1.15rem; font-weight: 700; }

.cart-summary .btn-block, .checkout-summary .btn-block { margin-top: .9rem; }

.cart-summary .form-hint, .checkout-summary .form-hint { margin-top: .75rem; }

.checkout-form.account-form { max-width: none; background: transparent; border: 0; padding: 0; }

.checkout-form.account-form button { margin-top: 0; }

.checkout-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    margin: 1rem 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.checkout-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

.checkout-item .checkout-price { margin-left: auto; white-space: nowrap; font-size: 1.15rem; }

/* The address and the billing block are cards like the seller's group above them, not the
   browser's own dark fieldset frame with nothing between it and the fields. */
.checkout-address,
.checkout-billing {
    margin-top: 1rem;
    padding: .25rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 0;
}

.checkout-address legend,
.checkout-billing legend { font-weight: 700; padding: 0 .35rem; }

.checkout-billing legend .muted { font-weight: 400; }

.checkout-total { margin: 0; }

.dash-alert { font-weight: 700; }

.apply-bar-actions { display: flex; gap: .5rem; flex-shrink: 0; }

.apply-bar-actions .btn { margin-top: 0; padding: .55rem .85rem; }

/* ---- The cart and the checkout ---- */

.cart h1 .muted { font-size: 1rem; font-weight: 400; }

/* A group per seller, its lines divided by rules rather than boxed. */
.cart-group { margin-bottom: 1.5rem; }

.cart-group-head { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.cart-lines { display: grid; gap: 0; margin: 0; }

.cart-line {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
}

.cart-line-title { color: inherit; text-decoration: none; }

.cart-line-title:hover { text-decoration: underline; }

.cart-line-condition { font-size: .9rem; }

.cart-thumb { display: block; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--bg); }

.cart-thumb img, .cart-thumb .instrument-art { display: block; width: 100%; height: 100%; object-fit: cover; }

.cart-line-main { min-width: 0; display: grid; gap: .25rem; }

.cart-line-main .muted { font-size: .9rem; }

.cart-qty { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }

.cart-qty label { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }

.cart-qty input, .buy-qty input {
    width: 4.5rem;
    padding: .4rem .5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.cart-qty .btn { margin-top: 0; }

.cart-line-end { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; white-space: nowrap; }

.cart-line-end .link-button { color: var(--muted); font-size: .85rem; }

.cart .back-link { display: inline-block; margin-top: .5rem; }

.nav-cart .nav-badge { margin-left: .1rem; }

.buy-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.buy-form .btn { margin-top: 0; }

.buy-qty { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }

.checkout-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .25rem 1rem .9rem;
    margin: 0 0 1rem;
    min-width: 0;
}

.checkout-group > legend { font-weight: 700; padding: 0 .35rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.checkout-group .checkout-item { margin: .6rem 0; }

.checkout-address[hidden] { display: none; }

/* The postcode under the ways, while no address is asked for: every way's price before picking one. */
.checkout-quote { margin: 0 0 1rem; }

.checkout-quote[hidden] { display: none; }

.checkout-quote input { max-width: 9rem; }

.sale-lines { margin: .5rem 0 0; padding-left: 1.2rem; }

.sale-lines li { margin: .2rem 0; }

@media (max-width: 560px) {
    .cart-line { grid-template-columns: 4rem minmax(0, 1fr); }
    .cart-thumb { width: 4rem; height: 4rem; }
    .cart-line-end { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* The order's parcels and its document */

.shipment-card { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 8px; }

.document-card { margin: .5rem 0 1rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 8px; }

.document-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.document-facts { margin: .5rem 0; }

.document-manual summary { cursor: pointer; margin: .5rem 0; }

.document-manual .account-form { max-width: 30rem; }

.badge-alert { background: #fde8e8; color: #9b1c1c; }

.sale-billing-form { margin-top: .5rem; }

.api-key-reveal { margin: .5rem 0; }

.api-key { display: block; margin-top: .4rem; padding: .5rem .75rem; background: var(--bg-soft, #f4f4f4); border-radius: 6px; font-size: .95rem; word-break: break-all; user-select: all; }

/* ---- The shop's orders ---- */

.stat-tile-alert { border-color: var(--brand); }

.stat-tile-alert strong { color: var(--brand); }

.orders-table .order-items { font-size: .9rem; }

.orders-table tr.is-new td { background: #fff8e1; }

.orders-table .order-invoice.is-due { color: var(--brand); }

.orders-table .stock-actions .btn-small { margin-top: 0; }

.bolt-tabs .nav-badge { margin-left: .25rem; }

@media (max-width: 720px) {
    .orders-table .order-items { flex: 1 1 100%; }
}

/* ---- Admin: the category tree ---- */

.admin-category-node {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}

.admin-category-node h2 { margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.25rem; }

.admin-category-node h2 .muted { font-size: .85rem; font-weight: 400; }

.admin-category-forms { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-top: .5rem; }

.admin-category-forms input[type="text"], .admin-category-forms select {
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    max-width: 18rem;
}

.admin-category-forms .btn { margin-top: 0; }

.admin-category-table .stock-actions .link-button { margin-right: .5rem; }

.admin-category-table code { font-size: .85rem; }

.admin-category-add { margin-top: 1.25rem; }

/* ---- The posting form: the photo picker and the sending button ---- */

.photo-picker { position: relative; }

/* With the picker script the input hides behind the drop zone, still there for the keyboard. */
.form-card .photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.form-card .photo-drop {
    display: block;
    margin: .5rem 0 0;
    padding: 1.25rem 1rem;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: var(--bg);
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
}

.form-card .photo-drop:hover,
.form-card .photo-drop.is-over,
.form-card .photo-input:focus-visible + .photo-drop { border-color: var(--brand); background: #fff; }

.form-card .photo-drop[hidden], .photo-previews[hidden] { display: none; }

.photo-drop strong { display: block; }

.photo-drop span { display: block; margin-top: .25rem; font-size: .85rem; font-weight: 400; color: var(--muted); }

/* On a touch screen nothing is clicked or dragged: the zone says tap. */
.photo-drop .photo-drop-touch { display: none; }

@media (hover: none) and (pointer: coarse) {
    .photo-drop .photo-drop-mouse { display: none; }

    .photo-drop .photo-drop-touch { display: block; }
}

.photo-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
    margin-top: .75rem;
}

.photo-preview {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.photo-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* The file's name ("IMG_4521.HEIC") says nothing next to its picture;
   only a file the browser cannot show needs it. */
.photo-preview .photo-name {
    display: none;
    padding: .25rem .35rem;
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A file the browser cannot show (HEIC on most desktops): a blank tile with the name. */
.photo-preview-blank img { display: none; }

.photo-preview-blank .photo-name { display: block; }

/* The first photo is the one on the card: it says so, and every other
   one offers to take its place. */
.photo-preview.is-cover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.photo-preview .photo-cover-badge {
    position: absolute;
    left: .3rem;
    bottom: .3rem;
    margin: 0;
    padding: .15rem .5rem;
    font-size: .7rem;
    line-height: 1.4;
}

.photo-preview-blank .photo-cover-badge { bottom: 1.7rem; }

/* A small star in the corner opposite the ×: a longer button wrapped
   onto two lines and hid half of a phone's 100px photo. The line under
   the photos says what it does. */
.photo-make-cover {
    position: absolute;
    top: .25rem;
    left: .25rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.photo-make-cover:hover { background: var(--brand); }

.photo-preview-blank::before {
    content: '🖼';
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--bg);
    font-size: 2rem;
}

.photo-remove {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.photo-remove:hover { background: #a33; }

.photo-count { margin: .5rem 0 0; font-size: .85rem; }

.picker-change { margin-left: .5rem; font-size: .9rem; }

/* The uploaded photos on the edit page sit in a section like the others. */
.form-section-plain { padding-top: 1rem; }

.form-section-title { margin: 0 0 .75rem; font-weight: 700; }

.form-section .photo-grid { margin-bottom: 0; }

.btn.is-busy, .btn[disabled] { opacity: .65; cursor: progress; }

/* ---- Beszámítás: what the seller takes as part of the price ---- */

.tradein { margin-top: 1rem; }

.tradein-fields {
    margin: .5rem 0 0;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.tradein-fields .form-hint { margin-top: 0; }

.tradein-label { margin: .9rem 0 .4rem; font-weight: 600; font-size: .92rem; }

.tradein-fields label[for="tradein_note"] { margin-top: .9rem; }

/* Several categories: the picks as chips with a cross, the families as
   tappable chips, a search box under them for anything deeper. */
.category-multi .multi-picked { margin-bottom: .5rem; }

.category-multi .multi-picked:empty { display: none; }

.category-multi .multi-pick { display: inline-flex; align-items: center; gap: .35rem; }

.category-multi .multi-remove {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 0 0 .1rem;
    cursor: pointer;
}

.category-multi .multi-families .chip { font: inherit; font-size: .85rem; cursor: pointer; }

.category-multi .picker-search { margin-top: .6rem; }

.category-multi .multi-search { width: 100%; }

/* On the product page: the wishes as chips in one facts row. */
.tradein-row .chip { display: inline-block; margin: .15rem .25rem .15rem 0; vertical-align: middle; }

.tradein-row .tradein-note { display: block; margin-top: .25rem; }

.tradein-row .tradein-cta { display: inline-block; margin-top: .35rem; font-weight: 600; }

.tradein-row .tradein-mine { display: block; margin-top: .25rem; color: var(--brand-dark, var(--brand)); font-weight: 600; }

/* The kept trade-in sets on the profile: a name to edit, the count, a delete. */
.tradein-templates { list-style: none; padding: 0; margin: .5rem 0 0; }

.tradein-template {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .6rem 0;
    border-top: 1px solid var(--border);
}

.tradein-template-rename { display: flex; gap: .5rem; align-items: center; }

.tradein-template-rename input { width: 14rem; max-width: 60vw; }