/**
 * Noiz Template - Custom CSS
 * 
 * Custom overrides and plugin-specific styles
 */

/* Suspicious message warnings (from plugin) */
ul#messages_area .suspicious-msg .suspicious-message-warning {
    background-color: #ffdddd;
    border: 1px solid #ff5c5c;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    color: #000000;
}

ul#messages_area li.suspicious-msg {
    border-color: #ff5c5c !important;
}

/* Multi-line listing titles override */
ul.featured.with-pictures ul.card-info > li.title a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    line-height: 1.3em;
    max-height: none;
    font-weight: 500;
}

article.item:not(.no-image) ul.card-info > li.title,
ul.featured.with-pictures ul.card-info > li.title {
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
}

section#listings.grid > article:not(.no-image) ul.card-info > li.title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
}

section#listings.list ul.card-info > li.title a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    line-height: 1.3em;
}

body.home-page .header-tabs { display: none; } 

div.gallery > #media[data-view="gallery"] .preview:not(.locked) + .map-container + .nav-buttons .nav-button.zoom, div.gallery > #media[data-view="gallery"] .preview:not(.locked) + .map-container + .nav-buttons .nav-button.map, div.gallery .nav-buttons .nav-button {
    background: var(--noiz-dark-orange);
    color: #ffffff !important;
}

.submission_instructions {
    font-size: 14px;
}

.submission_instructions a {
    color: var(--noiz-dark-orange);
}

.carousel-slide-heading { }
 
 .table-cell .checkboxes > *:not(.active) { display: none; }
 
 .carousel-caption .button { background-color:  var(--noiz-dark-orange) !important; }

/* Delete conversation button styles */
#messages_cont .delete-conversation {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    margin: 0 0 20px 0 !important;
    background: transparent !important;
    border: 1px solid #dc3545 !important;
    border-radius: 6px !important;
    color: #dc3545 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    width: fit-content !important;
}

#messages_cont .delete-conversation:hover {
    background: #dc3545 !important;
    color: white !important;
}

#messages_cont .delete-conversation svg {
    flex-shrink: 0 !important;
}

#messages_cont .delete-conversation:hover svg {
    stroke: white !important;
}

#messages_cont ul#messages_area {
    clear: both !important;
}

.message-list-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.message-item-link {
    flex: 1 !important;
}

/* Individual message delete icon */
.message-sender-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.delete-message {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

.delete-message:hover {
    background: rgba(220, 53, 69, 0.1) !important;
}

.delete-message svg {
    display: block !important;
}

/* =============================================
   LISTINGS COUNT - Below H1
   ============================================= */

.listings-count {
    font-size: 14px;
    margin-bottom: 16px;
    padding: 0 15px;
}

.listings-count .count-number {
    font-weight: 600;
}

/* =============================================
   GRID NAVBAR - Modern Rounded Style
   ============================================= */

/* Container - horizontal layout */
.grid_navbar.listings-area {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Switcher container - flex layout */
.grid_navbar .switcher {
    float: none;
    display: flex;
    align-items: center;
    height: auto;
    gap: 0;
}

/* View mode buttons container - rounded pill background */
.grid_navbar .switcher .buttons {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

/* Individual view buttons */
.grid_navbar .buttons > div {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.grid_navbar .buttons > div:hover {
    background: rgba(0, 0, 0, 0.05);
}

.grid_navbar .buttons > div.active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* SVG icons for view modes */
.grid_navbar .buttons > div > svg {
    display: block;
    transition: color 0.2s ease;
}

.grid_navbar .buttons > div.active > svg,
.grid_navbar .buttons > div:hover > svg {
}

/* Grid navbar layout - right aligned actions */
.grid_navbar.listings-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.grid_navbar .hook {
    display: none;
}

/* Navbar actions container */
.grid_navbar .navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Navbar buttons - Clear Filters & Save Search */
.navbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.navbar-btn svg {
    flex-shrink: 0;
}

/* Clear Filters Button */
.navbar-btn-clear {
    border: 1px solid transparent;
}

.navbar-btn-clear:hover {
    text-decoration: none;
}

/* Save Search Button */
.navbar-btn-save {
    border: 1px solid transparent;
}

.navbar-btn-save:hover {
}

/* Hide switcher wrapper styling, use buttons directly */
.grid_navbar .switcher {
    display: flex;
    align-items: center;
}


/* Sorting dropdown - rounded pill style */
.grid_navbar .sorting {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: normal;
}

.grid_navbar .current {
    display: flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
    line-height: normal;
}

.grid_navbar .current .sort-icon {
    flex-shrink: 0;
}

.grid_navbar .current:hover {
}

.grid_navbar .current:hover .sort-icon {
}

.grid_navbar .current .link {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0;
}

.grid_navbar .sorting span.arrow {
    width: 12px;
    height: 12px;
    margin: 0 0 0 6px;
    background-size: contain;
    background-position: center;
}

/* Dropdown menu */
.grid_navbar ul.fields {
    top: calc(100% + 4px);
    left: auto;
    right: 0;
    border-radius: 10px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.grid_navbar ul.fields > li {
    padding: 8px 16px;
}

.grid_navbar ul.fields > li a {
    display: block;
    transition: color 0.2s ease;
}

.grid_navbar ul.fields > li a:hover,
.grid_navbar ul.fields > li a.active {
}

/* Hide filter hook on desktop (shown via mobile CSS) */
.grid_navbar .hook {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid_navbar.listings-area {
        justify-content: space-between;
    }
    
    .grid_navbar .current {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .grid_navbar .current .link {
        font-size: 13px;
    }
    
    .grid_navbar .buttons > div {
        width: 32px;
        height: 32px;
    }
    
    /* Show grid button on mobile - override original-style.css */
    .grid_navbar.listings-area .buttons > div.grid {
        display: flex !important;
    }
}
/* =============================================
   FILTERS AREA - Block position for categoryFilter
   ============================================= */

.filters-area {
    margin-bottom: 20px;
}

.filters-area .side_block {
    margin-bottom: 0;
}

.filters-area .side_block .content {
    padding: 0;
}

/* =============================================
   PAGINATION - Modern numbered pagination
   ============================================= */

.pagination-nav {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.pagination-nav .pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-nav .pagination-item {
    display: inline-flex;
    height: 36px;
}

.pagination-nav .pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination-nav .pagination-link:hover {
    text-decoration: none;
}

.pagination-nav .pagination-item.active .pagination-link {
    background: var(--noiz-dark-orange, #e67e22);
    border-color: var(--noiz-dark-orange, #e67e22);
    color: #fff;
}

.pagination-nav .pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-nav .pagination-ellipsis:hover {
}

.pagination-nav .pagination-ellipsis span {
    line-height: 1;
}

/* Pagination Jump Dropdown */
.pagination-jump-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px;
    z-index: 1000;
    min-width: 160px;
}

.pagination-jump-dropdown.open {
    display: block;
}

.pagination-jump-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
}

.pagination-jump-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 9px solid transparent;
}

.pagination-jump-header {
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 500;
}

.pagination-jump-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.pagination-jump-btn {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}

.pagination-jump-btn:hover {
}

.pagination-jump-btn:active {
}

.pagination-jump-input {
    flex: 1;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    width: 60px;
    -moz-appearance: textfield;
}

.pagination-jump-input::-webkit-outer-spin-button,
.pagination-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pagination-jump-input:focus {
    outline: none;
    border-color: var(--noiz-dark-orange, #e67e22);
}

.pagination-jump-go {
    width: 100%;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: var(--noiz-dark-orange, #e67e22);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-jump-go:hover {
    background: var(--noiz-light-orange, #f39c12);
}

.pagination-nav .pagination-prev .pagination-link,
.pagination-nav .pagination-next .pagination-link {
    gap: 6px;
    padding: 0 14px;
}

.pagination-nav .pagination-arrow {
    font-size: 18px;
    line-height: 1;
}

.pagination-nav .pagination-text {
    font-size: 13px;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .pagination-nav .pagination {
        gap: 3px;
    }
    
    .pagination-nav .pagination-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 13px;
        border-radius: 6px;
    }
    
    .pagination-nav .pagination-text {
        display: none;
    }
    
    .pagination-nav .pagination-prev .pagination-link,
    .pagination-nav .pagination-next .pagination-link {
        padding: 0 10px;
    }
    
    .pagination-nav .pagination-ellipsis {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 13px;
        border-radius: 6px;
        margin-bottom: 4px;
    }
    
    .pagination-jump-dropdown {
        min-width: 140px;
        padding: 10px;
    }
    
    .pagination-jump-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .pagination-jump-input {
        height: 28px;
        width: 50px;
        font-size: 13px;
    }
    
    .pagination-jump-go {
        height: 30px;
        font-size: 12px;
    }
}

/* Hide duplicate buttons from categoryFilter box - now in navbar */
.filter-area .cf-clear-all,
.filter-area .save-cf-search {
    display: none;
}

/* Responsive navbar actions */
@media (max-width: 768px) {
    .grid_navbar.listings-area {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .grid_navbar .navbar-actions {
        gap: 6px;
    }
    
    .navbar-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .navbar-btn span {
        display: none;
    }
}

/* Mobile Grid View - 2 columns */
@media screen and (max-width: 767px) {
    section#listings.grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;
        padding: 0 15px;
    }
    
    section#listings.grid > article {
        flex: 0 0 50%;
        max-width: calc(50% - 10px);
        margin: 5px;
        padding: 0 0 20px 0;
    }
    
    section#listings.grid div.picture {
        width: 100%;
        height: auto;
        padding-bottom: 100%;
    }
    
    section#listings.grid ul.card-info {
        padding: 8px 0 0 0;
        width: 100%;
    }
    
    section#listings.grid ul.card-info > ol {
        display: none;
    }
    
    section#listings.grid ul.card-info > li.system {
        gap: 8px;
    }
}
/* ---------------------------------------------------------------------------
   Listing condition badge
   ---------------------------------------------------------------------------
   Condition used to render as another comma-separated value in li.fields,
   visually identical to the category. It is a primary buying signal for used
   gear (set on ~89% of listings), so it gets its own badge.

   Colours come from per-theme tokens in light.css / dark.css. Brand orange is
   deliberately avoided: it is the call-to-action colour, and reusing it for a
   passive attribute would weaken that signal.
--------------------------------------------------------------------------- */
/* The text colour is set on the <li>, not on the badge itself. A legacy rule
   `#listings .featured span { color: inherit }` carries an ID, so it outranks
   any class selector we could put on the span. Colouring the parent turns that
   forced inherit to our advantage and avoids !important. */
ul.card-info > li.condition {
    margin-top: 0.35rem;
    /* Tight underneath: the price sits directly below and carries 10px of its
       own padding, so anything more here reads as a gap between the badge and
       the price rather than the two belonging together. */
    margin-bottom: 0.125rem;
    color: var(--condition-badge-text);
}

.condition-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.6em;
    border: 1px solid var(--condition-badge-border);
    border-radius: 8px;              /* echoes the 12px thumbnail, scaled to a 25px chip */

    /* Outline, not filled. This chip carried --condition-badge-bg until the
       exchange chip landed beside it hollow and read better - lighter on a card
       that already has a photo, a title and a price competing for attention.
       The token is left defined in light.css / dark.css rather than removed;
       nothing else uses it, but it is the one place the fill would come back
       from if this is reverted. */
    background-color: transparent;

    color: inherit;
    font-size: 0.75em;               /* was 0.8125em (13px -> 12px) */
    font-weight: 300;                /* was 500; the chip reads as a label, not an emphasis */
    line-height: 1.45;
    white-space: nowrap;
}

/* Condition was briefly colour-coded per grade (gold/green/blue/grey/grey),
   reverted back to one neutral grey chip for every state. */

/* ---------------------------------------------------------------------------
   Listing card type scale
   ---------------------------------------------------------------------------
   Title was 17px/400 and price 20px/500, so the two competed. The price is now
   clearly the heavier element: on a marketplace grid it is what people scan.

   Weights stop at 600 on purpose - Onest ships Light/Regular/Medium/SemiBold
   only (300/400/500/600). Asking for 700 would give a synthesised faux-bold.

   !important appears on the title solely to override `.link-large`, which
   declares font-size and font-weight as !important in style.css.
--------------------------------------------------------------------------- */
/* The selector has to carry #listings: style.css sets
   `section#listings .link-large { font-size: 1.0625em !important }`, and an ID
   beats any number of classes, so a class-only rule silently loses on desktop
   even with !important. The second selector covers cards rendered outside
   #listings (the home page featured block). */
section#listings ul.card-info > li.title a,
ul.card-info > li.title a,
ul.card-info > li.title a.link-large {
    font-size: 1.125em !important;  /* 18px */
    font-weight: 500 !important;    /* Medium */
}

/* style.css drops titles to 1em on small screens; keep that. */
@media screen and (max-width: 767px) {
    section#listings ul.card-info > li.title a,
    ul.card-info > li.title a,
    ul.card-info > li.title a.link-large {
        font-size: 1em !important;
    }
}

ul.card-info > li.price_tag > div > span,
ul.card-info .price-tag > span {
    font-size: 1.4375em;            /* 23px */
    font-weight: 500;               /* Medium - the price leads on size, not weight */
}

/* ---------------------------------------------------------------------------
   Grid card layout
   ---------------------------------------------------------------------------
   1. Cards per row on wide screens.
   2. Pin the price to the bottom of the card.

   (1) went 5 -> 6 -> back to 5. At six the card carried the same five rows of
   text as a much wider card (title, condition, category, location/date,
   price) - the info block measured 79% of the image's own height, so text
   competed with the photo instead of sitting under it. At five it is 58%,
   and the photo leads. Dropping card rows was tried alongside this and
   reverted: the category and location/date both earn their place.

   On (2): the grid stretches every card in a row to the same height, but the
   card's content only filled its natural height, so the price landed wherever
   the text ended - 23px higher on a one-line title than a two-line one - and
   the leftover space sat below it. Making the column chain grow and pushing
   the price down with margin:auto aligns every price in a row and moves the
   slack above the price instead.
--------------------------------------------------------------------------- */
@media screen and (min-width: 1440px) {
    body.no-sidebar section.grid > article {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

section#listings.grid article.item {
    display: flex;
    flex-direction: column;
}

section#listings.grid article.item > .main-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

section#listings.grid article.item ul.card-info {
    flex: 1 1 auto;
}

/* li.system holds the price row */
section#listings.grid article.item ul.card-info > li.system {
    margin-top: auto;
}

/* Home page featured blocks: match the category grid's per-row count above
   1440px. This is style.css's own default (20%), so nothing to override here
   any more - see the six-per-row note above for why it went there and back.
   The .two-middle layout keeps its own 33% rule regardless. */

/* Featured cards are already flex columns with a growing card-info, but the
   price still followed the text; push it down so prices share a baseline.
   Note the class differs between the two card templates: listing.tpl emits
   li.system, featured_item.tpl emits li.price_tag. */
ul.featured.with-pictures > li ul.card-info > li.system,
ul.featured.with-pictures > li ul.card-info > li.price_tag {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Reserve two lines for the card title
   ---------------------------------------------------------------------------
   With the price pinned to the bottom of the card, any variation in content
   height shows up as a gap above the price. Title length is what varies:
   across 100 home page cards, 46 titles ran to one line, 45 to two and 9 to
   three, and the gap above the price tracked that exactly (0-88px, median 23
   - one line).

   Reserving two lines makes the 91% that are one or two lines identical, so
   the gap disappears for them. Titles are deliberately not clamped, since a
   truncated model name loses real information on gear listings, so the 9 that
   run to three lines still sit one line lower.

   2 lines x 1.3 line-height x 1.125em (the 18px title against the 16px li).
--------------------------------------------------------------------------- */
/* No min-height here on purpose. Reserving two lines kept every card the
   same height, but on a one-line title the reserved line sat between the
   title and the condition badge and visibly detached them. The slack is
   better spent above the bottom-pinned price, where it reads as breathing
   room, so the title box is left at its natural height and simply capped at
   two lines by the clamp below. */

section#listings.grid article.item ul.card-info > li.title a,
ul.featured.with-pictures > li ul.card-info > li.title a {
    line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Clamp card titles to exactly two lines
   ---------------------------------------------------------------------------
   Paired with the min-height above, every card title now occupies exactly two
   lines, so cards are structurally identical and the gap above the price
   disappears - including the row effect, where one tall card lifted the gap
   for everything beside it.

   The trade-off is that ~9% of titles are truncated with an ellipsis. The full
   title remains in the link's title attribute and on the listing page.

   !important is required: earlier rules in this file deliberately un-clamped
   these titles (display:block, -webkit-line-clamp:unset, overflow:visible),
   so those have to be reversed explicitly.
--------------------------------------------------------------------------- */
section#listings.grid article.item ul.card-info > li.title a,
ul.featured.with-pictures > li ul.card-info > li.title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: calc(2 * 1.3 * 1em);
}

/* ---------------------------------------------------------------------------
   EXPERIMENT: price directly under the condition
   ---------------------------------------------------------------------------
   Card order becomes: title, condition, price, category, location/date.

   Reordering is done with flex `order` rather than by moving markup, so this
   is one block to delete if it does not work out. card-info is already a flex
   column. The featured / new badges are left unordered, so they keep the
   default `order: 0` and stay above the title - which is where they sit in
   the stock template.

   Note the price can no longer be pinned to the bottom, so it sits wherever
   the title leaves it - prices no longer share a baseline across a row.
--------------------------------------------------------------------------- */
section#listings.grid article.item ul.card-info > li.title,
ul.featured.with-pictures > li ul.card-info > li.title { order: 1; }

section#listings.grid article.item ul.card-info > li.condition,
ul.featured.with-pictures > li ul.card-info > li.condition { order: 2; }

section#listings.grid article.item ul.card-info > li.system,
ul.featured.with-pictures > li ul.card-info > li.price_tag { order: 3; }

section#listings.grid article.item ul.card-info > li.fields,
ul.featured.with-pictures > li ul.card-info > li.fields { order: 4; }

/* Category sits below the price, not above the title.

   It was above the title on both card templates and, on home-page rows, the
   fields line printed it a second time below the price - the same fact twice
   on one card. The line below the price is the one that survives, so the
   ordering moves to match; the styling is untouched, which is what makes the
   surviving line look exactly like the one that used to sit above.

   Same order as li.fields on purpose: with Category_ID now skipped in that
   loop, the fields line is usually empty, and where it is not, the category
   still reads first because it comes first in the markup. */
section#listings.grid article.item ul.card-info > li.card-category,
ul.featured.with-pictures > li ul.card-info > li.card-category { order: 4; }

section#listings.grid article.item ul.card-info > li.useful,
ul.featured.with-pictures > li ul.card-info > li.useful { order: 5; }

/* Cancel the bottom pinning - the price is no longer the last row.
   The separation from the condition badge above comes almost entirely from
   this row's own 10px padding-top (style.css), so the margin here is kept
   minimal: at 0.375rem the badge and price read as two unrelated blocks
   rather than one price statement. */
section#listings.grid article.item ul.card-info > li.system,
ul.featured.with-pictures > li ul.card-info > li.system,
ul.featured.with-pictures > li ul.card-info > li.price_tag {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Price directly under the condition badge
   ---------------------------------------------------------------------------
   style.css sets `ul.card-info > li.price_tag > *:last-child { margin-top:
   15px }` - inherited from the layout where the price sat far down the card
   and needed separating from whatever was above it. With the price now
   straight after the condition badge that spacing reads as a gap rather than
   separation, so it is zeroed for both card templates.
--------------------------------------------------------------------------- */
section#listings.grid article.item ul.card-info > li.price_tag > *:last-child,
section#listings.grid article.item ul.card-info > li.system > *:last-child,
ul.featured.with-pictures > li ul.card-info > li.price_tag > *:last-child {
    margin-top: 0;
}


/* ---------------------------------------------------------------------------
   Footer - dark band
   ---------------------------------------------------------------------------
   Replaces the stock light-grey three-column footer: brand / links / app,
   closing with socials bottom-right.

   Dark in BOTH colour schemes - this is a deliberate brand surface, not a
   themed one, so the tones are stated outright rather than inherited. That
   means the footer needs its own light-on-dark text colours; it cannot borrow
   the page's, which flip with the theme.

   The inner container reuses .point1 (added in the markup) so the footer's
   width tracks the site's actual breakpoint ladder instead of a second,
   driftable copy of it - see .footer-inner below.
--------------------------------------------------------------------------- */
.page-footer {
    /* Built from the existing brand tokens (defined in light.css/dark.css) rather
       than new hex values, so the footer tracks the palette instead of drifting
       from it. Both are defined identically in light and dark, which is what makes
       an always-dark footer safe here. */
    --footer-bg-main: var(--noiz-black, #010101);
    --footer-text: #f5f5f5;
    --footer-muted: #a1a1a6;
    --footer-rule: rgba(255, 255, 255, 0.1);
    --footer-accent: var(--noiz-dark-orange, #ee6820);

    background: var(--footer-bg-main);
    color: var(--footer-muted);
    margin-top: 3rem;
    padding: 0;
}

.page-footer a {
    color: var(--footer-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.page-footer a:hover,
.page-footer a:focus-visible {
    color: var(--footer-text);
    text-decoration: none;
}

/* Inner container.
   The footer must line up with the page above it at EVERY width, and the site
   container is not a single value - .point1 steps through 540px / 720px / 92vw /
   1110px / 93vw. So this reuses .point1 (added in the markup) for the ladder
   rather than restating it here, where it would silently drift the first time
   someone retunes a breakpoint. A fixed max-width was tried first and matched
   only around 1400px, going badly wrong on wide screens - at 1920 the page runs
   1786px while a 1110px footer sat marooned in the middle.

   .point1 supplies max-width only, so centring is added here. The 15px gutter is
   mirrored from .content-padding, which the rest of the site applies at <=767px
   only; above that the container is flush, so adding padding would push the
   footer 15px inboard of everything else. */
.footer-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .footer-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* --- Band: brand / links / app ------------------------------------------ */
.footer-main {
    padding: 3rem 0 1.5rem;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr) minmax(180px, auto);
    gap: 2.5rem 3rem;
    align-items: start;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}

/* logo-wordmark.png (957x235, ~4:1) is white-on-transparent artwork already made
   for a dark background, unlike the round mark used elsewhere on the site (a
   near-black disc that needs inverting to read here) - so no filter is needed,
   but the very wide aspect ratio means sizing by height alone would make it run
   wider than the brand column on narrow screens. max-width caps that instead. */
.footer-logo img {
    height: 44px;
    width: auto;
    max-width: 100%;
}

.footer-tagline {
    margin: 0;
    max-width: 32ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--footer-muted);
}

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

.footer-link-col {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-link-col li + li {
    margin-top: 0.6rem;
}

/* Column headings are the one place with real hierarchy - in the stock footer
   every link and heading shared a weight, so nothing read as a grouping. */
.footer-col-title {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--footer-text);
}

.footer-link-col a {
    font-size: 0.9rem;
}

.footer-app .footer-col-title {
    margin-bottom: 1rem;
}

.footer-app .mobile-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* The PWA badge is injected by the PWA plugin as .pwa-install-button and is a
   black raster-ish badge that clashed badly with the site's type. Rather than
   replace it (the plugin binds its install handler to this element) it gets a
   neutral outlined frame so it reads as part of the footer. footer-forum-link
   shares that same frame treatment for visual consistency with the app badges
   above it. */
.page-footer .pwa-install-button,
.footer-store-link,
.footer-forum-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--footer-rule);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page-footer .pwa-install-button:hover,
.footer-store-link:hover,
.footer-forum-link:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.page-footer .pwa-install-button img,
.footer-store-link img {
    display: block;
    height: 32px;
    width: auto;
}

/* Sits below the app badges, not among them - full width of the app column
   rather than inline, and icon+label rather than icon-only like the store
   badges (those are internationally recognisable marks; the forum icon isn't,
   so it needs the text to actually communicate what it links to). */
.footer-forum-link {
    display: inline-flex;
    gap: 0.6rem;
    width: fit-content;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;   /* larger than the shared 0.5/0.75 - this badge carries a label, not just a mark */
}

/* forum-icon.svg is near-black artwork (like logo.svg) - see the note on
   .footer-logo img for why invert(1) is required rather than brightness(0)
   invert(1), which would flatten it to a blank shape on this background. */
.footer-forum-link img {
    display: block;
    height: 24px;
    width: 24px;
    filter: invert(1);
}

.footer-forum-link span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--footer-text);
}

.footer-forum-link:hover span {
    color: var(--footer-accent);
}

/* --- Closing row: copyright left, socials hard right -------------------- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--footer-rule);
}

.footer-copy {
    font-size: 0.8125rem;
    color: var(--footer-muted);
}

.footer-copy a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* menus/footer_social_icons.tpl defaults each icon to Bootstrap's .ml-4
   (24px) unless marginClass is truthy - footer_data.tpl passes ''
   intending to opt out, but Smarty's {if $marginClass} treats an empty
   string as falsy, so the ml-4 default stays applied. That stacked on top
   of the flex gap put ~44px between 20px icons. Overridden here rather
   than editing the shared partial, which other pages also call. */
.footer-socials a {
    display: block;
    margin-left: 0 !important;
    color: var(--footer-muted);
}

.footer-socials svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-socials a:hover {
    color: var(--footer-accent);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Brand spans the full width above the two remaining columns, otherwise the
       logo is stranded beside a single narrow link column. */
    .footer-brand {
        grid-column: 1 / -1;
    }
    /* .footer-links is already 2 columns at every width - nothing to override here. */
}

@media (max-width: 767px) {
    .footer-main-grid,
    .footer-links {
        grid-template-columns: 1fr;
    }
    .footer-main {
        padding: 2rem 0 1.25rem;
    }
    /* Socials above the fine print on narrow screens - reading order puts the
       useful thing first instead of trailing the legal line. */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 2rem;
    }
    .footer-bottom .footer-socials {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------
   Personalised feed ("based on what you viewed")
   ---------------------------------------------------------------------------
   One horizontally scrollable row of normal listing cards, with arrows.

   Native overflow rather than a carousel library: the bundled fancyapps build
   reports 0 slides even for its own documented markup, so its arrows rendered
   but scrolled nothing. Overflow also brings touch swipe and keyboard scrolling
   for free.
--------------------------------------------------------------------------- */
.personal-feed-scroller {
    position: relative;
}

/* The scroll viewport. Scrollbar is hidden because the arrows (and swipe) are
   the affordance; the row would otherwise show a permanent bar under the cards
   on platforms that reserve space for one. */
.personal-feed .personal-feed-body {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* legacy Edge */
    -webkit-overflow-scrolling: touch;
}

.personal-feed .personal-feed-body::-webkit-scrollbar {
    display: none;                      /* WebKit */
}

/* One non-wrapping line. `gap` is what puts air between the cards - the stock
   grid relies on Bootstrap column padding, which does nothing here because the
   row is flex rather than a .row of columns. */
.personal-feed .personal-feed-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
}

/* Cards keep their Bootstrap column classes (col-sm-4 col-md-3) from
   listing.tpl, whose percentage widths are meant for a wrapping row and would
   otherwise fight the flex line. Width is set here instead, and shrinking is
   disabled so twelve cards stay full size and overflow rather than squashing
   to fit. */
.personal-feed .personal-feed-row > article.item {
    flex: 0 0 auto;
    width: calc((100% - 100px) / 6);    /* six across, minus the five 20px gaps */
    max-width: none;
    min-width: 170px;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

/* Arrows, centred on the card artwork rather than the whole card - the title
   and price below would otherwise drag them visually off-centre. */
.personal-feed .personal-feed-nav {
    position: absolute;
    top: 90px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    /* A hairline of page background separates the circle from a card it
       overlaps, so it reads as floating above the row rather than as part of
       whichever artwork happens to sit behind it. */
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--noiz-black, #010101);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Brand orange on hover. The arrow stays white - it keeps contrast against
   both states, where switching the arrow colour instead would leave a dark
   glyph on a mid-orange disc. */
.personal-feed .personal-feed-nav:hover {
    background: var(--noiz-dark-orange, #ee6820);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.34);
}

.personal-feed .personal-feed-nav svg {
    width: 20px;
    height: 20px;
}

/* Sit half-outside the row so they overlap the edge cards slightly, making it
   read as "there is more this way" rather than as page furniture. */
.personal-feed .personal-feed-nav.is-prev { left: -18px; }
.personal-feed .personal-feed-nav.is-next { right: -18px; }

/* [hidden] alone loses to display:flex above. */
.personal-feed .personal-feed-nav[hidden] {
    display: none;
}

@media (max-width: 1199px) {
    .personal-feed .personal-feed-row > article.item {
        width: calc((100% - 60px) / 4);
    }
}

@media (max-width: 767px) {
    /* The row element is section#listings.grid, reused from the stock listings
       markup, so two stock rules outrank anything selected by class alone here:

         section#listings.grid          -> flex-wrap: wrap
         section#listings.grid > article -> flex 0 0 50%, max-width calc(50% - 10px), margin 5px

       The first collapsed the scroller into a wrapping grid. The second, once
       combined with the min-width: 170px set above, left each card 180px wide
       inside a ~355px row - so exactly one fitted per line and the section
       rendered as twelve stacked rows of one card. Both need an ID in the
       selector to be beaten, hence #personal_feed rather than .personal-feed. */
    #personal_feed section.grid.personal-feed-row {
        flex-wrap: nowrap;
        gap: 12px;
        margin: 0;
    }

    /* Two cards across, with the third partly visible. That peek is what tells
       a touch user the row scrolls, since the arrows are hidden at this width.
       min-width has to be cleared explicitly: a min-width beats a max-width in
       CSS, so the 170px floor above would otherwise still win on a 360px phone
       no matter what width is set here. */
    #personal_feed .personal-feed-row > article.item {
        flex: 0 0 auto;
        width: 44%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
    /* Swipe is the natural gesture on touch; floating arrows over the cards
       would just cover artwork. */
    .personal-feed .personal-feed-nav {
        display: none;
    }
}

/* ===========================================================================
   Row scroller (shared component)
   ---------------------------------------------------------------------------
   Generic horizontal card row, used by the opted-in homepage listing boxes.
   Driven by noizRowScroller() in js/lib.js.

   The personalised feed still carries its own .personal-feed-* copy of this;
   it shipped first and is deliberately left alone here rather than refactored
   in the same change as a new rollout. Merging the two is a follow-up.
   =========================================================================== */
.row-scroller {
    position: relative;
}

.row-scroller__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* legacy Edge */
    -webkit-overflow-scrolling: touch;
}

.row-scroller__viewport::-webkit-scrollbar {
    display: none;                      /* WebKit */
}

/* The row keeps its Bootstrap .row class, which brings flex-wrap: wrap - the
   one thing a scroller cannot have. Class-only selectors are enough here: the
   cards are sized by .col-* utilities (specificity 0,1,0), not by an ID rule
   like the personal feed's section#listings.grid. */
.row-scroller__viewport > ul.featured {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* Six across, matching "Με βάση αυτά που είδες" exactly - same widths, same
   breakpoints. These boxes used to be four across, which next to the feed read
   as two different grids on one page. The feed is the reference now, so the
   card sizes are shared rather than each row having its own idea. */
.row-scroller__viewport > ul.featured > li {
    flex: 0 0 auto;
    width: calc((100% - 100px) / 6);   /* six across, minus the five 20px gaps */
    max-width: none;
    min-width: 170px;
    margin: 0;
}

@media (max-width: 1199px) {
    .row-scroller__viewport > ul.featured > li {
        width: calc((100% - 60px) / 4);
    }
}

@media (max-width: 767px) {
    /* Two across with the third peeking, so a touch user can see it scrolls -
       the arrows are hidden at this width. This is where the component earns
       its keep: seven stacked cards become one swipeable line. */
    .row-scroller__viewport > ul.featured {
        gap: 12px;
    }
    .row-scroller__viewport > ul.featured > li {
        width: 44%;
        min-width: 0;
    }
}

/* Arrows. Same treatment as the feed's: black disc, white glyph, white ring so
   it separates from whatever artwork it overlaps. */
.row-scroller__nav {
    position: absolute;
    top: 90px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--noiz-black, #010101);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.row-scroller__nav:hover {
    background: var(--noiz-dark-orange, #ee6820);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.34);
}

.row-scroller__nav svg {
    width: 20px;
    height: 20px;
}

.row-scroller__nav.is-prev { left: -18px; }
.row-scroller__nav.is-next { right: -18px; }

/* [hidden] alone loses to display:flex above. */
.row-scroller__nav[hidden] {
    display: none;
}

@media (max-width: 767px) {
    /* Swipe is the natural gesture on touch, and floating arrows would just
       cover artwork. */
    .row-scroller__nav {
        display: none;
    }
}

/* Category and seller lines on listing cards.

   The selectors say section#listings, not section#listings.grid. These fields
   were once supplied only by the personalised feed, so the rules were scoped to
   the grid; they now render on every listing page, and the grid has three
   modes. In list mode none of this applied and the rating star - an SVG with no
   intrinsic size - expanded to fill its container, 545px of solid black on the
   recently-added page.

   The ordering rules further up stay grid-only on purpose: list mode lays its
   cards out differently and does not want the grid's column order. */
section#listings article.item ul.card-info > li.card-category,
ul.featured > li ul.card-info > li.card-category {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.3;
    /* Explicit, not var(--noiz-light-grey): that token is declared twice in
       the theme (#464646 and #c8c8c8) and the later one wins, so the
       fallback here never applied and this rendered at #c8c8c8 - about
       1.7:1 on a white card. #767676 is the intended grey and clears AA. */
    color: #767676;
}

section#listings article.item ul.card-info > li.card-category span,
ul.featured > li ul.card-info > li.card-category span {
    /* One line; a long Greek category name must not push the price down and
       leave the cards in the row at different heights. */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    Seller line, last row of the card.

    The ordering is kept separate from the appearance and stays grid-only. The
    grid card is a flex column whose rows are sequenced with `order`, not by DOM
    position: title 1, condition 2, price 3, fields/category 4, location 5.
    Anything without an explicit order defaults to 0 and jumps to the TOP -
    which is where this line landed at first, second from the top, despite being
    last in the markup. 10 rather than 6 so a row inserted later does not
    silently displace it.

    List mode does not use that column order and must not inherit it.
*/
section#listings.grid article.item ul.card-info > li.card-seller,
ul.featured > li ul.card-info > li.card-seller {
    order: 10;
}

/* Appearance applies in every grid mode - see the note above the category. */
section#listings article.item ul.card-info > li.card-seller,
ul.featured > li ul.card-info > li.card-seller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    color: #767676;   /* same duplicate-token trap as the category line above */
}

/* The name yields the space: a long shop name must not push the rating off
   the card, since the rating is the smaller and more scannable of the two. */
section#listings article.item ul.card-info > li.card-seller .card-seller__name,
ul.featured > li ul.card-info > li.card-seller .card-seller__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section#listings article.item ul.card-info > li.card-seller .card-seller__rating,
ul.featured > li ul.card-info > li.card-seller .card-seller__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    white-space: nowrap;
}

section#listings article.item ul.card-info > li.card-seller .card-seller__star,
ul.featured > li ul.card-info > li.card-seller .card-seller__star {
    width: 12px;
    height: 12px;
    fill: var(--noiz-yellow, #FFCF00);
}

section#listings article.item ul.card-info > li.card-seller .card-seller__votes,
ul.featured > li ul.card-info > li.card-seller .card-seller__votes {
    opacity: 0.75;
}

/* Price row sits directly under the condition badge, so its 10px padding-top
   from style.css was the largest part of the gap between them - bigger than
   either margin. 4px keeps the row clear of the badge without reading as a
   separation between two unrelated blocks. Only the grid card is touched; the
   list view keeps the original rhythm. */
section#listings.grid article.item ul.card-info > li.system {
    padding-top: 4px;
}

/* ---------------------------------------------------------------------------
   Box cards: identical metrics to the feed at every width.

   Two things had to be beaten here, and neither showed up at 1280px:

   1. style.css has
        body.no-sidebar aside:not(.two-middle) section:not(.side_block) .featured > li
        { flex: 0 0 20%; max-width: 20% }
      inside @media (min-width: 1440px). That is specificity (0,4,4) - far above
      a plain .row-scroller__viewport > ul.featured > li - and it sets
      flex-basis, which beats `width` outright. On a wide screen the boxes
      snapped to five across while the feed stayed at six.

   2. The cards keep Bootstrap's .row > * column padding (12px each side), which
      the feed's cards do not have. Same card width, smaller thumbnail inside.

   Hence the deliberately heavy selector and the explicit flex shorthand. The
   numbers are copied from the feed rather than re-derived, because "the same
   as the feed" is the actual requirement.
   ------------------------------------------------------------------------- */
body.no-sidebar .row-scroller.lb-scroller .row-scroller__viewport > ul.featured > li,
.row-scroller.lb-scroller .row-scroller__viewport > ul.featured > li {
    flex: 0 0 auto;
    width: calc((100% - 100px) / 6);   /* six across, minus the five 20px gaps */
    min-width: 170px;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1199px) {
    body.no-sidebar .row-scroller.lb-scroller .row-scroller__viewport > ul.featured > li,
    .row-scroller.lb-scroller .row-scroller__viewport > ul.featured > li {
        width: calc((100% - 60px) / 4);
    }
}

@media (max-width: 767px) {
    /* The feed's row is section#listings.grid, which carries 15px of side
       padding at this width; the box's ul has none. Both cards are 44%, but of
       different content boxes - 139px against 152px - and the rows started at
       different left edges. Matching the padding fixes both at once. */
    .row-scroller.lb-scroller .row-scroller__viewport > ul.featured {
        padding-left: 15px;
        padding-right: 15px;
    }

    body.no-sidebar .row-scroller.lb-scroller .row-scroller__viewport > ul.featured > li,
    .row-scroller.lb-scroller .row-scroller__viewport > ul.featured > li {
        width: 44%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------------------------------------------------------------------------
   "Προβολή όλων" — the per-row link to the full listing page.

   Was a bare underlined anchor, which read as body text next to a section
   heading and, on mobile, as a stray line under the row. As a pill it reads as
   the one action the row offers, without competing with the cards: outlined
   rather than filled, because a solid brand button here would pull more
   attention than the listings it points at.
   ------------------------------------------------------------------------- */
.content_block.has-header-link > a.block-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--highlight-border-color, #d4d4d4);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    /* Theme-aware, not var(--noiz-black): that is a fixed near-black, so in
       dark mode the pill rendered black-on-dark and was effectively invisible.
       --body-font-color follows the theme (#111 light, #DADADA dark). The
       border token is likewise theme-aware. */
    color: var(--body-font-color, #111111);
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.content_block.has-header-link > a.block-header-link:hover,
.content_block.has-header-link > a.block-header-link:focus-visible {
    border-color: var(--noiz-dark-orange, #ee6820);
    background: var(--noiz-dark-orange, #ee6820);
    color: #ffffff;
    text-decoration: none;
}

.block-header-link__arrow {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    /* Nudges forward on hover - the pill already signals "clickable", this
       signals "goes somewhere". */
    transition: transform 0.15s ease;
}

.content_block.has-header-link > a.block-header-link:hover .block-header-link__arrow {
    transform: translateX(2px);
}

@media (max-width: 767px) {
    /* Below the row on mobile (order-3), where a full-width pill would look
       like a form submit. Kept inline and centred instead. */
    .content_block.has-header-link > a.block-header-link {
        margin-top: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content_block.has-header-link > a.block-header-link,
    .block-header-link__arrow {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Chat attachments
   ------------------------------------------------------------------------- */
.chat-compose-actions {
    display: flex;
    align-items: center;
    /* Wraps so the hint can drop to its own line on a narrow screen; without
       this the mobile rule below has nowhere to put it. */
    flex-wrap: wrap;
    gap: 10px;
}

/* A paperclip on its own is only discoverable to someone already looking for
   one, and nothing announced that the conversation takes audio at all. The
   control is now a labelled pill in the brand colour, sitting next to a line
   naming what it accepts. */
.chat-media-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--noiz-dark-orange, #ee6820);
    border-radius: 999px;
    background: transparent;
    color: var(--noiz-dark-orange, #ee6820);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Fills on hover rather than only changing colour: the outline state already
   uses the brand colour, so a hover that only shifted hue would be invisible. */
.chat-media-button:hover,
.chat-media-button:focus-visible {
    background: var(--noiz-dark-orange, #ee6820);
    color: #ffffff;
}

.chat-media-button:focus-visible {
    outline: 2px solid var(--noiz-dark-orange, #ee6820);
    outline-offset: 2px;
}

.chat-media-button svg { width: 18px; height: 18px; flex: 0 0 auto; }

.chat-media-button__label { white-space: nowrap; }

/* What the button accepts, stated once beside it. Muted: it answers a question
   the visitor has on first use and should not compete with the send button
   afterwards. */
/*
    Sits under the attach button on its own line rather than beside it - it is a
    sentence now, and on the same row it either squeezed the button or wrapped
    raggedly depending on the viewport.

    align-self, not text-align. div.send-controls is a flex column with
    align-items: center, and its buttons only look left-aligned because
    "div.send-controls > div { width: 100% }" stretches them - a rule that
    selects div and therefore skips this span. So the span stays shrink-wrapped
    and gets centred as a flex item, and no amount of text-align inside a box
    that is itself centred would move it.

    flex-start rather than a fixed side: on the cross axis of a column it
    follows the inline direction, so the RTL stylesheet needs no counterpart.

    max-width stops the sentence running the full width of a desktop
    conversation, where one unbroken line would be far wider than the buttons it
    describes.
*/
.chat-media-hint {
    display: block;
    align-self: flex-start;
    margin-top: 8px;
    max-width: 46ch;
    font-size: 0.8125rem;
    line-height: 1.35;
    opacity: 0.7;
}

/* On a phone the compose row is tight. The icon keeps its meaning without the
   word next to it, and the hint carries the detail underneath. */
@media (max-width: 575px) {
    .chat-media-button {
        gap: 0;
        width: 38px;
        padding: 0;
        border-radius: 50%;
    }

    .chat-media-button__label {
        display: none;
    }

    .chat-media-hint {
        flex-basis: 100%;
        order: 10;
        margin-top: 6px;
        font-size: 0.75rem;
    }
}

/* Queued-but-unsent attachments, above the send row. */
.chat-media-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.chat-media-tile {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--condition-badge-bg, #F4F4F6);
}

.chat-media-tile img,
.chat-media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pulses while the upload is in flight, so a large video does not look stuck. */
.chat-media-tile.is-uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.14), rgba(0,0,0,0.05));
    animation: chatMediaPulse 1.1s ease-in-out infinite;
}

@keyframes chatMediaPulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
    .chat-media-tile.is-uploading::after { animation: none; }
}

/* An audio attachment has nothing to show as a thumbnail. It used to fall
   through to the <video> branch, which renders a zero-height black box for a
   file with no video track - an attachment that looked like a failed upload.
   A speaker glyph on the tile background says "sound" without pretending to be
   a preview. */
.chat-media-tile.is-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--noiz-dark-orange, #ee6820);
}

.chat-media-tile.is-audio svg { width: 30px; height: 30px; }

.chat-media-tile__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Voice recording

   One control on its own row above the attach button. Press to start, press
   again to stop and send - so the button has to carry its own running state
   rather than handing it to a separate strip.
   --------------------------------------------------------------------------- */
/* A column, so the "new feature" line sits under the button rather than beside
   it, and align-items keeps both pinned left - send-controls centres its
   children, which is what put the attach hint in the middle of the page. */
.chat-compose-voice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}

/* Quieter than the button and the same size as the attach hint below it, so the
   two read as one register rather than competing. The brand colour rather than
   grey: it is an announcement, and it is the only thing on the page that has
   anything to announce. */
.chat-voice-new {
    max-width: 46ch;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--noiz-dark-orange, #ee6820);
}

.chat-voice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--noiz-dark-orange, #ee6820);
    border-radius: 999px;
    background: transparent;
    color: var(--noiz-dark-orange, #ee6820);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chat-voice-button:hover,
.chat-voice-button:focus-visible {
    background: var(--noiz-dark-orange, #ee6820);
    color: #ffffff;
}

.chat-voice-button:focus-visible {
    outline: 2px solid var(--noiz-dark-orange, #ee6820);
    outline-offset: 2px;
}

.chat-voice-button svg { width: 18px; height: 18px; flex: 0 0 auto; }

.chat-voice-button__label { white-space: nowrap; }

/* Tabular figures so ticking seconds do not change the button's width. */
.chat-voice-button__time {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.chat-voice-button__time:empty { display: none; }

/* Recording. Red rather than the brand orange, and filled rather than outlined:
   this is the one control on the page that means "your microphone is live", and
   wearing the same colour as every other button would read as just another
   action. The hover rule above is overridden so it does not flip back to orange
   under the cursor. */
.chat-voice-button.is-recording,
.chat-voice-button.is-recording:hover,
.chat-voice-button.is-recording:focus-visible {
    border-color: #d92d20;
    background: #d92d20;
    color: #ffffff;
}

/* The dot only exists while recording - the resting button is label and mic
   glyph alone. */
.chat-voice-button__dot { display: none; }

.chat-voice-button.is-recording .chat-voice-button__dot {
    display: block;
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffffff;
    animation: chatVoicePulse 1.2s ease-in-out infinite;
}

/* The whole button breathes as well, so the running state is legible from
   across the page and not only from the small dot. */
.chat-voice-button.is-recording {
    animation: chatVoiceGlow 1.8s ease-in-out infinite;
}

@keyframes chatVoicePulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.2 } }

@keyframes chatVoiceGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.45) }
    50%      { box-shadow: 0 0 0 6px rgba(217, 45, 32, 0) }
}

/* Motion is the signal here, so when it is suppressed the state still has to
   read: the dot stays solid rather than stopping mid-fade, and the colour
   change carries it on its own. */
@media (prefers-reduced-motion: reduce) {
    .chat-voice-button.is-recording,
    .chat-voice-button.is-recording .chat-voice-button__dot {
        animation: none;
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   Listing location, under the title

   Replaces the "Τοποθεσία" fieldset that used to sit far down the page beside a
   map. Location decides whether a listing is worth reading, so it belongs next
   to the title.
   --------------------------------------------------------------------------- */
.listing-header__location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: -4px;      /* the h1 carries its own bottom margin */
    margin-bottom: 14px;
    font-size: 0.9375rem;
    line-height: 1.3;
    /* Muted deliberately: it sits directly under the title and should read as
       an attribute of it, not compete with it. */
    opacity: 0.75;
}

.listing-header__location svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--noiz-dark-orange, #ee6820);
}

@media (max-width: 767px) {
    .listing-header__location {
        margin-top: 2px;
        font-size: 0.875rem;
    }
}

/* ---------------------------------------------------------------------------
   Listing details: the right-hand panel follows the reader

   Title, fields and contact form travel together on the right while the photos
   and description scroll on the left - the arrangement Reverb uses, and it works
   for the same reason: on a listing with fifteen photos the way to ask about the
   item would otherwise be a long way from wherever you happen to be looking.
   --------------------------------------------------------------------------- */
/*
    .main-wrapper carries overflow: hidden, which silently disables sticky
    anywhere inside it: an ancestor with a clipping overflow becomes the
    containing scroll box, so the panel sticks to that instead of to the
    viewport and simply scrolls away. Everything on the panel itself was already
    correct - position, top, align-self - and it still did nothing, which is what
    made this hard to see.

    overflow-x: clip contains the same horizontal overflow without creating a
    scroll container, so sticky works again. Measured on the page rather than
    assumed: document scrollWidth stays at the viewport width either way, so
    nothing starts overflowing sideways.

    Scoped to the listing page via the body class rather than changed globally -
    the wrapper's clipping is doing a job everywhere else, and this is not the
    place to find out what.
*/
@media (min-width: 992px) {
    .view-details-page .main-wrapper {
        overflow: visible;
        overflow-x: clip;
    }
}

@media (min-width: 992px) {
    .listing-details-aside {
        position: sticky;

        /*
            Just enough air above the panel, and no more.

            This was 88px, written for a fixed header that this theme does not
            have - .page-header is static and scrolls away with everything else.
            The offset was therefore 88px of empty page above a pinned panel for
            the whole of the scroll, which is exactly the gap it looked like.
        */
        top: 16px;

        /*
            Room between the content and the panel's own edge.

            The column's 12px of Bootstrap gutter is the right amount when the
            panel is invisible, but once it pins it grows a shadow and reads as a
            surface - and text 12px from the edge of a surface looks cramped.
            Horizontal only: any padding at the top would put back the blank
            strip above the title that the margin below is careful to avoid.
        */
        /*
            No padding on the column itself.

            The card's inset moved to .listing-details-panel, so that anything
            outside that wrapper - the banner block - sits below the card at the
            column's own width instead of inside its padding.
        */
        padding-left: 0;
        padding-right: 0;

        /*
            Air above the title, inside the panel.

            This was zero on purpose once: padding here shows as blank space
            above the title for the whole time the panel is pinned, and at the
            time the panel had no visible edge, so that space read as a gap
            rather than as inset. Now that it grows a shadow and reads as a
            surface, text against its top edge is the thing that looks wrong.

            The margin below drops by the same 18px, so the title still lines up
            with the top of the photo in the resting state - which is what the
            margin is for.
        */

        /*
            Rounded, like the gallery frame beside it and the buttons inside it.

            Only meaningful once the panel is pinned and has a shadow to draw
            its edge - but set unconditionally rather than on .is-stuck, because
            a corner radius that appears the moment you scroll is a visible
            change of shape mid-scroll.
        */

        /*
            Without this the panel does not stick at all.

            .row is a flex container, so its children stretch to the full height
            of the row by default. A sticky element that is already as tall as
            its container has nowhere to travel, so it simply scrolls away with
            everything else - which is exactly what it did.

            flex-start lets the panel size to its own content and leaves the rest
            of the row's height as the range it can stick within.
        */
        align-self: flex-start;

        /*
            Line the title up with the top of the photo.

            Both columns start at the same y, but the gallery block sits 30px
            lower than the column it is in - a margin that collapses out of the
            inner <section> in the left column, where every element in the chain
            reports margin-top: 0.

            margin, not padding. Padding is inside the box, so it travelled with
            the panel when it stuck and left 30px of blank space above the title
            for the whole scroll. A margin does the same job in normal flow and
            disappears once the panel is pinned, which is where it is no longer
            aligning with anything.
        */
        margin-top: 12px;

        /*
            No max-height, and so no scrollbar of its own.

            Capping the height did guarantee the whole panel was reachable, but
            it put a second scrollbar on the page, which reads as a bug rather
            than a feature. Uncapped, a panel taller than the viewport scrolls
            with the page until its bottom arrives and sticks from there - the
            behaviour everyone already expects, and nothing to explain.
        */
    }
}

/* Below lg the two columns stack, and a pinned panel would cover the photos it
   is meant to describe. Static, in normal flow. */
@media (max-width: 991px) {
    .listing-details-aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/*
    A shadow once the panel is pinned, and none before.

    While the panel is scrolling with the page it is simply part of the page and
    needs no treatment. Once it stops and the photos keep moving underneath, a
    faint shadow explains why - it reads as one layer sitting above another
    rather than as content that has frozen.

    Kept very light on purpose. This is a hint about depth, not a card: anything
    heavier turns a quiet column of facts into a floating box competing with the
    photos.

    CSS cannot ask whether a sticky element is currently stuck, so the class is
    set from a sentinel - see listing_details.tpl.
*/
.listing-details-panel {
    transition: box-shadow 0.18s ease;
}

@media (min-width: 992px) {
    /* The class is set on the aside by the sentinel observer; the shadow is
       painted on the wrapper, which is the thing that looks like a card. */
    .listing-details-aside.is-stuck .listing-details-panel {
        /* Two layers: a tight one to draw the edge, a wide soft one for the
           lift. A single wide shadow at this strength turns into a grey haze
           with no discernible edge. */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 34px rgba(0, 0, 0, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .listing-details-panel { transition: none; }
}

/* The tick in front of a delivery option is noise. Every other row states its
   value plainly, and with the unticked options hidden there is nothing left for
   a tick to distinguish it from. */
.listing-details-facts .value ul.checkboxes > li svg {
    display: none;
}

/* The title moved into this column, so it no longer needs the full-width
   two-column split it had as a page header. */
.listing-details-aside .listing-header {
    margin: 0 0 4px;
}

/*
    One left edge for the whole header.

    The row's negative gutter is off (margin: 0 above), so each column's own
    12px padding is no longer cancelled by it - the title and the location line
    have rules that zero their padding, but the condition tag and the price sat
    12px further in than both. Four items stacked vertically with two different
    left edges reads as a mistake, and the panel's padding now supplies all the
    inset any of them need.
*/
.listing-details-aside .listing-header > * {
    padding-left: 0;
    padding-right: 0;
}

/* The title is the loudest thing in the panel. It was competing with the price
   and the field labels at 1.6rem; at 2.15 it reads as the heading it is. */
.listing-details-aside .listing-header h1 {
    flex: 0 0 100%;
    max-width: 100%;
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1.14;
    margin-bottom: 10px;
}

@media (max-width: 1199px) {
    .listing-details-aside .listing-header h1 { font-size: 1.95rem; }
}

/* Condition, as a tag under the title - the first fact anyone checks on a
   second-hand instrument. Outlined rather than filled: it labels the item, it is
   not a button, and a solid block here would pull attention off the price. */
/*
    Condition and the specs button, one line.

    position: relative because the specs popover hangs off this row rather than
    off the button - anchored to the button it would be as narrow as the word
    "Χαρακτηριστικά", and the field list needs the panel's full width for its
    fixed 160px label column plus a value.
*/
.listing-header__tagline {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 2px 0 10px;
}

.listing-header__condition {
    display: inline-block;
    margin: 0;
    padding: 4px 11px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* Price. The largest text on the page after the title, since it is the other
   half of the decision. */
.listing-header__price {
    margin: 4px 0 16px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.listing-header__price a {
    color: inherit;
    text-decoration: underline;
}

/* "From ..." and "/ month" are qualifiers, not part of the number. */
.listing-header__price-from,
.listing-header__price-unit {
    font-size: 0.9375rem;
    font-weight: 400;
    opacity: 0.7;
}

/* Similar listings, now full width below the listing rather than crammed into
   the panel. */
.listing-details-bottom {
    margin-top: 28px;
}

.listing-details-aside .listing-header > .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* The field list, now a compact spec panel rather than a full-width table. */
.listing-details-facts {
    margin-bottom: 18px;
}

/*
    Label and value on one line, both left aligned, in one colour.

    They were pushed to opposite edges with space-between, the label greyed and
    the value right aligned. On a wide panel that left a gulf between "Μάρκα:"
    and "PRS" with the eye having to cross it, and the two halves of one fact
    looked like two different kinds of thing.

    A fixed label column instead: the values line up with each other, the label
    sits next to its value, and both read as the same sentence. No borders and
    tighter rows, so a short list of facts reads as a list rather than a table.
*/
.listing-details-facts .table-cell {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}

/*
    The clearfix pseudo-elements have to go.

    Every row carries .clearfix, whose ::before is an empty box meant to contain
    floats. There are no floats here, but the row is a flex container, so that
    empty box becomes a real flex item - and the 10px gap then indents the label
    by 10px. Every field sat that far right of the title above it, which is
    visible now that the panel has an edge of its own.
*/
.listing-details-facts .table-cell::before,
.listing-details-facts .table-cell::after {
    display: none;
}

/*
    One label width for every row, written specifically enough to win.

    The theme sets .name to a fixed 160px, which beat a plain percentage here -
    so ordinary rows sat at 160px while the delivery row, which the theme rule
    does not reach, used 40% and started its value 69px further right. The values
    no longer lined up, which is the thing this panel is for.

    Fixed rather than a percentage, to match what the theme was already doing and
    so the column does not move as the panel width changes.
*/
.listing-details-facts .table-cell .name,
.listing-details-facts .table-cell.wide-field .name {
    flex: 0 0 160px;
    max-width: 160px;
    text-align: left;

    /*
        Readable, and still clearly the label.

        The theme paints .name #888, which on the white background is about
        3.5:1 - under the 4.5:1 minimum for body text, and it showed: the labels
        were noticeably harder to read than their own values.

        Derived from the text colour at 75% rather than hard-coded, so it lands
        correctly in the dark theme too, where a fixed grey would have to be
        light instead of dark. Opacity alone was not enough - the theme sets
        colour, and 100% opacity on #888 is still #888.
    */
    color: var(--body-font-color);
    font-weight: 600;
    opacity: 0.85;
}

/* The weight is on the label, as in the counters strip: the field names are
   what a reader scans, and bolding a dozen values made the whole list loud. */
.listing-details-facts .value {
    flex: 1 1 auto;
    text-align: left;
    font-weight: 400;
    overflow-wrap: anywhere;
}

/*
    The fieldset wrapper is stripped of its own styling here.

    fieldset_header.tpl has to stay - its opening divs are closed further down
    details.tpl, and removing it is what broke the layout earlier - but it draws
    a grey panel around whichever fields happen to be grouped. With the headings
    hidden, that produced a shaded block around three rows and nothing around the
    others, splitting one list of facts into two for no reason a reader could
    see.
*/
.listing-details-facts .fieldset,
.listing-details-facts .fieldset .body,
.listing-details-facts .fieldset .body > div {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/*
    Checkbox fields line up with the rest.

    "Παράδοση" is a checkbox field, so field_out gives it the wide-field class
    and it was set to display: block - label on one line, ticked options on the
    next. Beside five aligned label/value rows it read as something having gone
    wrong rather than as a different kind of field.

    It uses the same two columns now. The options stack inside the value column
    when there is more than one, which keeps them tidy without breaking the
    alignment.
*/
/*
    flex-direction has to be forced back to row.

    The theme sets column on wide-field elsewhere, which is what kept the label
    stacked above its options no matter what else was set here - display was
    already flex and flex-wrap already nowrap, so nothing looked wrong until the
    computed flex-direction was read.
*/
.listing-details-facts .table-cell.wide-field {
    display: flex;
    flex-direction: row;
}

/* The utility margin on the options list pushes the value off the label's
   baseline; the row spacing is handled by the cell. */
.listing-details-facts .value ul.checkboxes.mt-2 {
    margin-top: 0;
}

/*
    The ticked options are a Bootstrap grid, and it has to be undone here.

    field_out renders them as <ul class="checkboxes row"> with each option a
    col-lg-4. That is three-across on a full-width page; inside a value column
    that is 60% of a third of the screen it gives each option a sliver, and
    "Στην χώρα μου" collapsed to an ellipsis.

    Stacked in the value column instead - one option per line, full width, tick
    beside its label.
*/
.listing-details-facts .value ul.checkboxes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    Only the options the seller actually chose.

    Flynax prints every option in the set and strikes through the ones that do
    not apply, so this listing showed "Στην χώρα μου", "Ευρώπη" and "Παγκόσμια"
    crossed out above the one true answer. That is a form control's way of
    thinking; on a listing the field should state its value the way every other
    row does. The chosen options carry .active.

    Scoped to this panel - the same markup elsewhere keeps its current
    behaviour.
*/
.listing-details-facts .value ul.checkboxes > li:not(.active) {
    display: none;
}

.listing-details-facts .value ul.checkboxes > li {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 0;
}

.listing-details-facts .value svg {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Listing description, above the field list

   It used to print last, inside a fieldset below every field. It reads first
   now - after the photos, before the specifics - so it needs to look like prose
   rather than like another table row.
   --------------------------------------------------------------------------- */
.listing-description {
    margin: 0 0 22px;
    font-size: 1rem;
    line-height: 1.6;
    /* Long descriptions are often pasted as one unbroken block; honour any line
       breaks the seller actually typed. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.listing-description .value {
    padding: 0;
}

/* Sellers paste links; keep them visible and stop a long URL widening the
   column on a phone. */
.listing-description a {
    color: var(--noiz-dark-orange, #ee6820);
    overflow-wrap: anywhere;
}

/* Sent attachments inside a message bubble. */
.message-media {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.message-media__item {
    display: block;
    max-width: 240px;
    max-height: 240px;
    border-radius: 10px;
    overflow: hidden;
}

.message-media__item img,
video.message-media__item { max-width: 240px; max-height: 240px; border-radius: 10px; display: block; }

/* Chat image lightbox: the theme's modal, sized to the image rather than the
   other way round. max-height keeps a tall photo inside the viewport instead of
   pushing the modal off-screen, which is what a plain <img> does here. */
.chat-lightbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fills the modal box, which is sized in JS from the viewport. The image is
   contained inside it rather than the other way round - letting the photo
   dictate the box is what pushed the modal off-screen. */
.chat-lightbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.chat-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* Prev/next. Same black disc with a white glyph as the homepage row arrows, so
   the two read as one control vocabulary. Sat inside the image rather than
   outside it: the modal sizes to its content, so anything hung off the edges
   would be clipped on a narrow screen. */
.chat-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 0 3px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--noiz-black, #010101);
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease;
}

.chat-lightbox__nav:hover { background: var(--noiz-dark-orange, #ee6820); }
.chat-lightbox__nav.is-prev { left: 10px; }
.chat-lightbox__nav.is-next { right: 10px; }

/* Position counter, so it is obvious there is more than one and where you are. */
.chat-lightbox__count {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    /* Swipe is not wired up, so the arrows have to stay - just smaller. */
    .chat-lightbox__nav { width: 34px; height: 34px; font-size: 22px; }
    .chat-lightbox__nav.is-prev { left: 4px; }
    .chat-lightbox__nav.is-next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-lightbox__nav { transition: none; }
}

/* The sent thumbnail should read as clickable. */
a.message-media__item { cursor: zoom-in; }

/* ---------------------------------------------------------------------------
   Chat video: poster tile in the bubble, real playback in the lightbox.
   ------------------------------------------------------------------------- */
a.message-media__item.is-video {
    position: relative;
    display: block;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

a.message-media__item.is-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* The tile is the button; the frame underneath must not swallow the click
       or take keyboard focus of its own. */
    pointer-events: none;
}

/* Play badge, centred over the frame. */
.message-media__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.message-media__play svg {
    width: 54px;
    height: 54px;
    padding: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

a.message-media__item.is-video:hover .message-media__play svg {
    background: var(--noiz-dark-orange, #ee6820);
    transform: scale(1.06);
}

/* In the lightbox the video gets the whole box, controls and all. */
.chat-lightbox.is-video video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #000;
}

@media (prefers-reduced-motion: reduce) {
    .message-media__play svg { transition: none; }
}

/* ==========================================================================
   SYSTEM NOTICES
   ==========================================================================
   Replaces the stock notice panel, which was dropped over the top of the page
   and on the home page landed in the middle of the hero image.

   The strip is a dark surface in both themes rather than a themed one. Light
   and dark here are two stylesheets redefining the same :root variables, and a
   notice built out of those variables is the exact shape of the earlier
   "Προβολή όλων" bug - a colour that reads correctly in one theme and vanishes
   in the other. A dark bar with light text is legible under both, and it is
   what a transient message looks like on every other site the visitor uses.

   Colour carries the type, but never alone: each type also has its own icon,
   so the difference survives a monochrome display or a red-green deficiency.
   ========================================================================== */

.noiz-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* Above the highest z-index in the template (10000, the modal mask): a
       message about a failed action must not appear behind the dialog that
       caused it. */
    z-index: 10001;

    background: #16171a;
    color: #f4f4f5;
    box-shadow: 0 -8px 28px -8px rgba(0, 0, 0, 0.45);

    /* Sits off-screen until .is-visible. Transitioning transform rather than
       `bottom` keeps the animation on the compositor. */
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.noiz-notice.is-visible {
    transform: translateY(0);
}

.noiz-notice__inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    max-width: 1280px;
    margin: 0 auto;

    /* The bottom padding clears the iOS home indicator, which sits over the
       strip in the installed web app. env() resolves to zero everywhere else,
       hence the max() rather than a plain addition. */
    padding: 15px 24px;
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0px));
}

.noiz-notice__icon {
    flex: 0 0 auto;
    display: block;
    width: 21px;
    height: 21px;

    /* Optical alignment with the first line of text rather than the box. */
    margin-top: 1px;
}

.noiz-notice__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.noiz-notice__text {
    flex: 1 1 auto;
    min-width: 0;          /* lets a long unbroken string wrap instead of pushing the close button off */
    font-size: 0.95rem;
    line-height: 1.55;
    word-wrap: break-word;
}

.noiz-notice__text a {
    color: var(--noiz-light-orange, #ff8200);
    text-decoration: underline;
}

/* Validation errors arrive as a list. A single one reads better without a
   bullet hanging off the side of it. */
.noiz-notice__text ul {
    margin: 0;
    padding: 0 0 0 18px;
}

/* The bullet has to be set on the item, not the list: the template's reset
   clears list-style on every li, and that beats a value inherited from the ul.
   The stock notice styled its items for the same reason. */
.noiz-notice__text ul > li {
    list-style: disc;
}

.noiz-notice__text ul > li + li {
    padding-top: 4px;
}

.noiz-notice__text ul > li:only-child {
    list-style: none;
    margin-left: -18px;
}

.noiz-notice__close {
    position: relative;    /* containing block for the two strokes below */
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: -4px -6px 0 0;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #a1a1aa;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Drawn rather than a glyph: the multiplication sign renders at a different
   weight and baseline in every font on the stack. */
.noiz-notice__close::before,
.noiz-notice__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.noiz-notice__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.noiz-notice__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.noiz-notice__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.noiz-notice__close:focus-visible {
    outline: 2px solid var(--noiz-light-orange, #ff8200);
    outline-offset: 2px;
}

/* --- types ---------------------------------------------------------------
   A hairline in the type colour along the top edge, so the kind of message is
   readable from the shape of the bar before the icon is looked at. */
.noiz-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: currentColor;
}

.noiz-notice--notice  { color: #4ade80; }
.noiz-notice--warning { color: #fbbf24; }
.noiz-notice--error   { color: #f87171; }

/* The type colour belongs to the icon and the hairline. The message itself
   stays near-white - coloured body text on a dark bar is harder to read, and
   the two accents already carry the meaning. */
.noiz-notice__text {
    color: #f4f4f5;
}

@media (max-width: 767px) {
    .noiz-notice__inner {
        gap: 11px;
        padding: 13px 16px;
        padding-bottom: max(13px, env(safe-area-inset-bottom, 0px));
    }

    .noiz-notice__text {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .noiz-notice {
        transition: none;
    }
}

/* ==========================================================================
   SITE-WIDE LISTING GRID DENSITY
   ==========================================================================
   Category pages, search results and recently-added rendered four cards to a
   row while the home page rendered six, so the same card design read as two
   different grids depending on where you were. These bring the section grid to
   the home page's density and breakpoints.

   The width comes from Bootstrap's .col-md-3 (25%) on article.item, so the
   override needs to beat a plain class selector. section#listings.grid already
   carries an ID, which is enough - the same reason #personal_feed was needed
   when the feed was built.

   Breakpoints mirror the row scroller exactly rather than approximately: six
   across on desktop, four on laptops, three on tablets, two on phones. Where
   they disagreed before, a card changed size when crossing between the home
   page and a category page.
   ========================================================================== */

@media (min-width: 1200px) {
    section#listings.grid > article.item {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    section#listings.grid > article.item {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    section#listings.grid > article.item {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Phones keep the stock two-across. The scroller's 44% peek is deliberate for a
   horizontal row - it hints that there is more sideways. A wrapping grid has no
   sideways, so a peek there would just be a clipped card. */

/* ==========================================================================
   "ACCEPTS EXCHANGE" BADGE
   ==========================================================================
   Sits beside the condition chip on the card, because it answers a related
   question about the same item - what state it is in, and how you can get it.

   Deliberately quieter than the condition badge: outline only, no fill. The
   condition applies to every listing and is the primary chip; exchange applies
   to about one in fourteen and is a bonus. Two identically-weighted chips side
   by side would compete, and the eye would stop reading either as primary.

   It borrows the condition badge's geometry exactly - same padding, radius,
   size and weight - so the pair reads as one unit rather than two components
   that happen to be adjacent.
   ========================================================================== */

.exchange-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 0.15em 0.6em;
    border: 1px solid var(--condition-badge-border);
    border-radius: 8px;

    /* Outline, same as the condition chip beside it. The two are deliberately
       identical in treatment and told apart by their words alone - one names a
       state, the other names a possibility, and neither outranks the other. */
    background-color: transparent;

    /* No colour of its own on purpose. Brand orange was the obvious choice and
       is the wrong one - the note above this section already settled that it is
       the call-to-action colour and spending it on a passive attribute weakens
       the signal. It also could not have worked: a legacy
       `#listings .featured span { color: inherit }` carries an ID and beats any
       class selector here, which is why the condition chip colours its parent
       <li> instead. That trick does not extend to a second chip needing a
       different colour, so this one inherits the same grey - which is now the
       intended look for both rather than a constraint worked around. */

    font-size: 0.75em;
    font-weight: 300;
    line-height: 1.45;
    white-space: nowrap;
}

/* The row holding both chips needs to wrap rather than overflow: at 170px the
   two together are wider than the card, and without this the second one is
   clipped at the edge instead of dropping to the next line. */
ul.card-info > li.condition {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    align-items: center;
}

/* The gap above supplies the spacing when they wrap onto separate lines;
   margin-left would then indent the second chip for no reason. */
ul.card-info > li.condition .exchange-badge:first-child {
    margin-left: 0;
}

/* ==========================================================================
   CHAT AUDIO PLAYER
   ==========================================================================
   Sits inside the message bubble. Built rather than using <audio controls>,
   which renders differently in every browser and is wider than the bubble at
   its narrowest in Chrome.

   Sized to the bubble, not the viewport: a voice note is a small object in a
   conversation, and a player that fills the width would read as the message
   rather than an attachment to it.
   ========================================================================== */

.chat-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 260px;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

/*
    There is no li.me variant here any more, and there should not be one.

    The original pair of rules lightened the player on sent messages, on the
    stated grounds that "the bubble's own background is dark on sent messages".
    It is not. In the light theme a bubble has no background at all - style.css
    gives ul#messages_area > li a border and nothing else, and li.me only
    changes the border colour. So the inversion painted a white track and a
    white tint onto a white page, and a sent voice note arrived with an
    invisible progress bar.

    Sent versus received was the wrong axis. What actually changes the backdrop
    is the theme: dark.css sets #252525 on a received bubble and #2a2030 on a
    sent one. So the values below are dark-on-light for both bubble kinds, and
    dark.css carries the inversion for both.
*/

.chat-audio__el {
    display: none;                 /* ours is the visible one */
}

.chat-audio__toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--noiz-dark-orange, #ee6820);
    color: #fff;
    cursor: pointer;
}

.chat-audio__glyph {
    width: 16px;
    height: 16px;
}

/* Play and pause occupy the same slot; only one is ever shown, so the button
   does not change size when the state flips. */
.chat-audio__glyph.is-pause,
.chat-audio.is-playing .chat-audio__glyph.is-play {
    display: none;
}

.chat-audio.is-playing .chat-audio__glyph.is-pause {
    display: block;
}

/* 4px of pale grey was too faint to read as a control at all, particularly
   inside the tinted pill. Darker, and a little taller. */
.chat-audio__track {
    flex: 1 1 auto;
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.26);
    cursor: pointer;
}

/* A 4px bar is a hard target for a finger or a mouse. The padding is applied
   as a pseudo-element so the hit area grows without the bar getting thicker. */
.chat-audio__track::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
}

.chat-audio__track:focus-visible {
    outline: 2px solid var(--noiz-dark-orange, #ee6820);
    outline-offset: 4px;
}

.chat-audio__fill {
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--noiz-dark-orange, #ee6820);
}

/* An explicit colour rather than opacity: 0.75. Opacity was applied over
   whatever the bubble's text colour happened to be, which on a pale bubble left
   the duration grey on near-white - the faintest thing in the player, and the
   one part carrying actual information. */
.chat-audio__time {
    flex: 0 0 auto;
    min-width: 38px;               /* holds "--:--" and "12:34" without shifting */
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: rgba(0, 0, 0, 0.62);
}

@media (prefers-reduced-motion: no-preference) {
    .chat-audio__fill {
        transition: width 0.1s linear;
    }
}

/* ==========================================================================
   CHAT COMPOSE: SEND BUTTON
   ==========================================================================
   The label sat off-centre. style.css gives every input[type=button] a fixed
   height: 40px, and div.send-controls then overrides the padding to 12px 24px.
   With border-box that leaves a 16px content box for roughly 19px of text, and
   the flex centring on the base rule does not reliably apply to the internal
   text of a replaced element like <input>, so the label drifted rather than
   being clipped.

   Letting the padding define the height removes the conflict: the box is as
   tall as its content plus padding, and the text is centred by construction
   instead of by a rule that inputs may ignore.
   ========================================================================== */

div.send-controls #send_message {
    height: auto;
    padding: 12px 24px;
    line-height: 1.2;
}

/* Own row, above the attachment controls, left aligned so it lines up with the
   attach button beneath it rather than sitting diagonally opposite it. */
.chat-compose-send {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

/* No mobile width rule here on purpose: style.css already makes this button
   full width under 768px, and a second rule at a different breakpoint would
   only be a place for the two to disagree later. */


/* ==========================================================================
   Listing page: actions, specs popover, facts strip
   ========================================================================== */

/*
    Three buttons, three weights.

    Filled, outlined, plain - contacting the seller is the thing most people
    came to do, making an offer is the alternative, saving is a bookmark. Three
    buttons shouting equally is the same as having no primary action, so the
    ranking is the whole point of the styling.

    Full width and stacked rather than side by side: the panel is a narrow
    column, and three Greek labels do not fit across it at a readable size.
*/
.listing-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 18px;
}

/*
    Written with the parent in the selector so it beats the theme's own button
    and anchor rules, which is what made the three disagree about their size.
*/
.listing-actions .listing-actions__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 8px;

    /*
        font-family: inherit is the whole reason two of these three looked
        different.

        <button> does not inherit the page font - browsers give it the system UI
        default - while <a> does. Contact and Make an offer are anchors and came
        out in Onest; Save to favourites is a button and came out in Arial, at a
        different size and with different letterforms, sitting directly beneath
        them.
    */
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.listing-actions__btn:hover,
.listing-actions__btn:focus {
    text-decoration: none;
}

.listing-actions__btn svg {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
}

/*
    Written as a.<class>, not .<class>.

    Two of these three are anchors, and the theme's link colour is brand orange.
    A single class ties with `a` on specificity and loses on order, so the
    outlined button came out with orange text and the ranking the three weights
    exist to express collapsed. The tag qualifier is the smallest thing that
    wins.

    The label span inherits for the same reason - .link carries its own colour
    elsewhere in the theme.
*/
.listing-actions a.listing-actions__btn--primary {
    background: var(--button-color);
    color: var(--button-text-color);
}

.listing-actions a.listing-actions__btn--primary:hover,
.listing-actions a.listing-actions__btn--primary:focus {
    background: var(--button-hover-color);
    color: var(--button-text-color);
}

.listing-actions__btn .link {
    color: inherit;
}

/* Outlined, not filled in a second colour. Two solid blocks stacked read as two
   primary actions, and the border is enough to say "this is also a button". */
/*
    Both tag names, spelled out.

    The first version of this rule was `a.listing-actions__btn--secondary`,
    written to outrank the theme's link colour - which meant it never matched
    Save to favourites, a <button>. That button fell through to the theme's
    default black while Make an offer sat next to it in #111, and the two looked
    like different controls for no reason anyone could see.

    A tag qualifier is still needed to beat `a`, so both are listed rather than
    the qualifier dropped.
*/
.listing-actions a.listing-actions__btn--secondary,
.listing-actions button.listing-actions__btn--secondary {
    background: transparent;
    border-color: var(--highlight-border-color);
    color: var(--body-font-color);
}

.listing-actions a.listing-actions__btn--secondary:hover,
.listing-actions a.listing-actions__btn--secondary:focus,
.listing-actions button.listing-actions__btn--secondary:hover,
.listing-actions button.listing-actions__btn--secondary:focus {
    border-color: var(--noiz-dark-orange);
    color: var(--noiz-dark-orange);
}

/*
    There is no third weight any more.

    Save to favourites used to be a "ghost": no border and 75% opacity. Beside
    an outlined button in the same font at the same size, that did not read as a
    quieter variant - it read as the same button rendered in a slightly
    different grey, which looks like a bug rather than a hierarchy. Both
    secondary actions now share one treatment, and the primary is the only thing
    that stands apart.

    The rule is kept as a no-op comment rather than the class being left in the
    stylesheet unused: the class is gone from the markup too.
*/

/*
    Back into the column.

    style.css declares `.favorite { position: absolute }` - everywhere else on
    the site that class is a heart floating in the corner of a listing card, so
    absolute is right there and wrong here. Left alone it pulled the button out
    of the flex column and dropped it across the title.

    All four offsets are reset, not just position: they are set on the same rule
    and would otherwise sit there waiting for anything that gives this button a
    positioned ancestor.
*/
.listing-actions__btn.favorite {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
}

/*
    And no zoom on hover.

    style.css gives `.favorite:hover` a transform: scale(1.05) - a nice touch on
    the small heart floating over a grid card, and quite wrong on a full-width
    button, which grew sideways under the pointer while the button above it just
    changed colour. The two now hover identically: border and text to the
    accent, nothing moves.
*/
.listing-actions__btn.favorite:hover,
.listing-actions__btn.favorite:focus {
    transform: none;
}

/*
    Outline when not saved, filled when saved.

    The heart's fill/stroke have to be set in CSS, not left to the svg's own
    fill="none" stroke="currentColor" attributes: style.css targets .favorite svg
    with `fill: #bababa; stroke: none`, and any CSS declaration beats a
    presentation attribute. Unset, the heart was a solid grey blob in both
    states - which is the one thing this button must not be, since telling you
    which state you are in is its entire job.
*/
.listing-actions__btn.favorite svg {
    fill: none;
    stroke: currentColor;
}

/* Saved: the button takes the accent, border and all, so the state is legible
   without reading the label. */
.listing-actions__btn.favorite.remove {
    opacity: 1;
    color: var(--noiz-dark-orange);
    border-color: var(--noiz-dark-orange);
}

.listing-actions__btn.favorite.remove svg {
    fill: currentColor;
    stroke: currentColor;
}

/*
    The specs peek.

    A trigger and a panel that is filled by cloning the real list. Positioned
    against .listing-specs-peek, so the popover follows the button rather than
    the panel - the button can move without the popover needing a new offset.
*/
/* Static, so the popover resolves against .listing-header__tagline and gets the
   panel's full width rather than the button's. Inline-flex so it sits on the
   condition line instead of starting a row of its own. */
.listing-specs-peek {
    position: static;
    display: inline-flex;
    margin: 0;
}

/*
    Set to match the condition tag it now sits beside - same family, size and
    weight - so the two read as one line rather than as a tag with a heavier
    button stuck to it.

    font-family: inherit for the same reason as the action buttons: this is a
    <button>, and a button does not inherit the page font. It was rendering in
    Arial next to a span in Onest.
*/
.listing-specs-peek__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--body-font-color);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.3;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.listing-specs-peek.is-open .listing-specs-peek__trigger,
.listing-specs-peek__trigger:hover,
.listing-specs-peek__trigger:focus {
    opacity: 1;
    color: var(--noiz-dark-orange);
}

.listing-specs-peek__trigger svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

/*
    A real surface, unlike the panel it sits in.

    The sticky panel is deliberately flat - it is part of the page. This is
    layered above the page and has to say so, or the field rows read as though
    they belong to whatever they happen to be covering.

    Pinned to both edges of the panel rather than given a width: the label
    column is a fixed 160px, and any width small enough to look like a tooltip
    left the values wrapping onto two lines.
*/
.listing-specs-peek__popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 18px;
    background: var(--body-background-color);
    border: 1px solid var(--highlight-border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
}

/*
    Listed / Views / Saves / Offers.

    Label left, number right - four rows read as a table that way, and the eye
    can run down the numbers without reading the labels twice. Quieter than the
    field list on purpose: this is context, not content.
*/
/*
    One line, not four rows.

    These are footnotes to the decision, not part of it - four full-width rows
    with the numbers pushed to the right edge gave them the weight of a spec
    table. Wrapped inline at a smaller size they read as a single caption under
    the buttons, which is what they are.
*/
.listing-facts-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Centred: four short pairs on one rule-topped line read as a caption for
       the block above them, and a caption sits under the middle of what it
       captions rather than hanging off its left edge. */
    justify-content: center;
    gap: 4px 18px;
    margin: 0 0 20px;
    /* No rule above it. The buttons already end the block they belong to, and a
       line between them and their own counters cut the panel in half where it
       did not need cutting - the size difference does that job on its own. */
    padding: 14px 0 2px;
    font-size: 0.8125rem;
}

.listing-facts-strip__row {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

/*
    The weight is on the label, not the number.

    These four pairs are read as a list of what is being reported - listed,
    views, offers, saves - and the labels are what a reader scans to find the
    one they want. Bolding the numbers instead made four unrelated figures the
    loudest thing in a strip that is deliberately quiet.
*/
.listing-facts-strip__label {
    font-weight: 600;
    opacity: 1;
}

.listing-facts-strip__value {
    font-weight: 400;
    opacity: 0.75;
}

/*
    The seller block's inline contact form is off.

    "Επικοινωνήστε με τον πωλητή" now opens the site's contact popup, and the
    same form sitting open underneath it made the button look decorative. The
    seller's identity - name, member since, reviews link - stays, because that is
    what a buyer is actually checking at this point.

    Hidden here rather than removed from listing_details_seller.tpl: that file's
    {if}/{else} branches open and close different numbers of divs, and editing it
    is how the whole left column disappeared once already.
*/
.listing-details-aside .seller-short > .form {
    display: none;
}


/*
    One left edge for the whole field list.

    Most of this site's fields belong to no group and render bare; the rest sit
    inside a fieldset, whose body has an unclassed inner div carrying 30px of
    padding meant to indent a group under its heading. The heading is hidden
    here, so that indent had nothing to indent from - the list simply stepped
    30px to the right halfway down and stepped back again.

    Scoped to .listing-details-facts so the fieldset keeps its indent on the
    submission form and everywhere else it is used as intended.

    #controller_area is in the selector to win, not to narrow. style.css sets
    the 30px through `#controller_area div.fieldset > div.body > div`, and an id
    beats any number of classes - three earlier attempts at this rule were in the
    stylesheet, matched the element, and lost silently. The id is on the page
    wrapper, so this changes nothing about which elements are selected.
*/
#controller_area .listing-details-facts .fieldset > .body > div {
    padding: 0;
}

/* The header is already d-none; this removes the space it reserved. */
#controller_area .listing-details-facts .fieldset > header {
    padding: 0;
}

/*
    One list, not a stack of one-row groups.

    Nearly every field on this site belongs to no group, and Flynax wraps each
    of those in its own div carrying margin-bottom: 20px. With one field per div
    that is 20px of air between every row - the fields read as a dozen separate
    blocks rather than as one list, and the eye cannot pair a label with its
    value across the gap.

    The rows carry their own 3px, raised to 5px here, which is the spacing this
    actually wanted.
*/
#controller_area .listing-details-facts .listing-fields > div {
    margin-bottom: 0;
}

.listing-details-facts .table-cell {
    padding: 5px 0;
}

/*
    The counters strip at the foot of the left column is off.

    "21 Προβολές" and "Αναρτήθηκε: πριν 4 μέρες" are now in the panel, in the
    facts strip, next to saves and offers - reading them twice on one page makes
    the page look assembled rather than designed.

    Only the two lists inside the section are hidden, not the section itself:
    the report-listing link is injected into it by a hook, and it is the one
    thing here that is not a duplicate.
*/
.view-details-page .listing-details-stat > ul.counters,
.view-details-page .listing-details-stat > ul.controls > li:first-child {
    display: none;
}

/*
    What is left of that section: the report link, alone under the panel.

    The section ships as a two-column flex row built for the full page width -
    counters left, controls right - and with one item left in it that layout
    only pushes the link off to one side. Reset to a centred block, at the size
    of a footnote, because that is what it is: findable, and never competing
    with the reasons to buy.
*/
/*
    Right, against the card's own inset, with air above it.

    justify-content rather than text-align, because the section carries
    Bootstrap's `d-flex` - `display: flex !important` - so a display change here
    is silently ignored and text-align has nothing to act on. align-items covers
    the column-reverse direction the section switches to below 576px, where
    justify-content works on the vertical axis instead.
*/
.listing-details-report .listing-details-stat {
    justify-content: flex-end;
    align-items: flex-end;
    margin: 30px 0 0;
    text-align: right;
}

.listing-details-report .listing-details-stat > ul.controls {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The theme pads these list items for a full-width stats row - 12px top and
   bottom, which is most of the 40px this 14px line was occupying and all of the
   gap under it. */
.listing-details-report .listing-details-stat > ul.controls > li {
    margin: 0;
    padding: 0;
}

/*
    Grey, not the brand orange.

    The plugin styles it as a .link, which takes the accent colour used for
    every "do this" control on the page. This is the opposite of those: a thing
    almost nobody needs, that should be findable without ever competing with the
    reasons to buy. Derived from the text colour so it lands correctly in the
    dark theme too.
*/
.listing-details-report .listing-details-stat #report-broken-listing,
.listing-details-report .listing-details-stat #report-broken-listing.link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--body-font-color);
    font-size: 0.8125rem;
    /* Tight line box: at the foot of the card, the font default left about 13px
       of slack under the text that read as extra padding. */
    line-height: 1.1;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.listing-details-report .listing-details-stat #report-broken-listing:hover {
    opacity: 1;
}

/* The plugin's own warning glyph, scaled down to match the text beside it -
   it ships at icon size for a full-width row - and taking the text's colour
   rather than keeping its own. */
.listing-details-report .listing-details-stat .rbl-icon {
    display: inline-flex;
    margin-left: 0 !important;
}

.listing-details-report .listing-details-stat .rbl-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: currentColor;
}


/* ==========================================================================
   The offer form
   ========================================================================== */

.offer-form__asking {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--highlight-border-color);
    font-size: 0.9rem;
}

.offer-form__asking span {
    opacity: 0.6;
}

.offer-form__asking strong {
    font-size: 1.05rem;
}

.offer-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

/*
    The euro sign is furniture, not content.

    It sits inside the field's own border rather than beside it, so the buyer is
    typing a number into something that already says what the number is. The
    input carries no border of its own - the wrapper is the field.
*/
.offer-form__amount {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 0 12px;
    border: 1px solid var(--form-field-line-color, var(--highlight-border-color));
    border-radius: 8px;
    background: var(--body-background-color);
}

.offer-form__amount:focus-within {
    border-color: var(--noiz-dark-orange);
}

.offer-form__currency {
    flex: 0 0 auto;
    padding-right: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0.55;
}

.offer-form__amount input {
    flex: 1 1 auto;
    width: 100%;
    padding: 12px 0;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 600;
}

.offer-form__amount input:focus {
    outline: none;
    box-shadow: none;
}

.offer-form textarea {
    width: 100%;
    margin-bottom: 18px;
    resize: vertical;
}

.offer-form__submit {
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--button-color);
    color: var(--button-text-color);
    font-size: 0.9875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.offer-form__submit:hover:not(:disabled) {
    background: var(--button-hover-color);
}

.offer-form__submit:disabled {
    opacity: 0.6;
    cursor: default;
}


/* ==========================================================================
   The Offers page
   ========================================================================== */

.offers-page__group {
    margin-bottom: 36px;
}

.offers-page__heading {
    margin: 0 0 14px;
    font-size: 1.25rem;
    font-weight: 700;
}

/*
    An offer is a fact and a decision side by side.

    Left: what it is about and what was said. Right: the number, its state, and
    the buttons. The number is the largest thing in the row because it is what
    the row is - scanning a list of offers means scanning a column of prices.
*/
.offer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1px solid var(--highlight-border-color);
    border-radius: 10px;
}

/* Resolved offers step back. They are history, and history should not compete
   with the one row that still needs an answer. */
.offer-row--declined,
.offer-row--withdrawn,
.offer-row--countered,
.offer-row--expired {
    opacity: 0.6;
}

.offer-row--accepted {
    border-color: var(--noiz-dark-orange);
}

.offer-row__main {
    flex: 1 1 300px;
    min-width: 0;
}

.offer-row__listing {
    margin-bottom: 4px;
    font-size: 1.05rem;
    font-weight: 600;
}

.offer-row__meta {
    font-size: 0.85rem;
    opacity: 0.65;
}

.offer-row__date::before {
    content: '·';
    margin: 0 6px;
}

.offer-row__message {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--highlight-border-color);
    font-size: 0.9rem;
}

.offer-row__side {
    flex: 0 0 auto;
    text-align: right;
}

.offer-row__amount {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.offer-row__status {
    margin-top: 2px;
    font-size: 0.85rem;
    opacity: 0.7;
}

.offer-row__status--accepted {
    color: var(--noiz-dark-orange);
    opacity: 1;
    font-weight: 600;
}

.offer-row__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.offer-row__actions button {
    padding: 8px 14px;
    border: 1px solid var(--highlight-border-color);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.offer-row__actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Accept is the affirmative action and reads as the primary one; decline and
   counter stay outlined so the row has one obvious answer rather than three. */
.offer-row__action--accept {
    background: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text-color);
}

.offer-row__action--accept:hover:not(:disabled) {
    background: var(--button-hover-color);
    border-color: var(--button-hover-color);
}

.offer-row__actions button:not(.offer-row__action--accept):hover:not(:disabled) {
    border-color: var(--noiz-dark-orange);
    color: var(--noiz-dark-orange);
}

@media (max-width: 575px) {
    .offer-row__side {
        flex: 1 1 100%;
        text-align: left;
    }

    .offer-row__actions {
        justify-content: flex-start;
    }
}

/* "Your offer" - which of the rows in a chain the reader wrote. Quiet: it is a
   clarification, not a heading. */
.offer-row__mine {
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--highlight-border-color);
    border-radius: 999px;
    font-size: 0.75rem;
}


/* ==========================================================================
   Listing page: breathing room, description accordion, breadcrumbs
   ========================================================================== */

/*
    Air between the photos and the panel.

    The two columns are adjacent, so the only thing separating them was the
    gallery's own 12px of column padding - and now that the panel grows a shadow
    when it pins, 12px reads as the two touching. Added on the photo side rather
    than as panel padding: padding inside the panel moves its text but not its
    edge, so the gap would not have changed at all.
*/
@media (min-width: 992px) {
    .view-details-page #content {
        padding-right: 44px;
    }
}

/*
    The description, as a disclosure.

    <details>/<summary> rather than a div and a click handler: the state, the
    keyboard behaviour and the accessible name come from the browser, and it
    works before any script has run.

    The default triangle marker is removed in favour of a chevron that can be
    rotated, because the native one cannot be positioned or coloured and sits
    tight against the text.
*/
.listing-description {
    margin-bottom: 26px;
}

.listing-description__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--highlight-border-color);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Both are needed: -webkit-details-marker for Safari, ::marker for the rest. */
.listing-description__summary::-webkit-details-marker {
    display: none;
}

.listing-description__summary::marker {
    content: '';
}

.listing-description__summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /* Pointing down when open, right when closed. The -3px lifts the glyph onto
       the text's optical centre - a rotated square hangs low otherwise. */
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.15s ease;
    opacity: 0.55;
}

.listing-description:not([open]) .listing-description__summary::after {
    transform: translateY(0) rotate(-45deg);
}

.listing-description__summary:hover {
    color: var(--noiz-dark-orange);
}

/*
    Line breaks once, not twice.

    The theme renders this field with `white-space: pre-line`, and the value has
    already been through nl2br - so every newline the seller typed arrives as
    "<br>\n" and is honoured twice: once as the tag, once as the preserved
    newline. Every description on the site was double-spaced, and the blank
    lines between paragraphs were four lines deep.

    It also put most of a screen of blank above the first word, because the
    partial that renders the value opens with an HTML comment followed by two
    newlines - which `pre-line` faithfully reproduced.

    `normal` is correct precisely because the <br>s are already there: they do
    the work, and whitespace goes back to collapsing the way it does everywhere
    else on the page.
*/
.listing-description .value {
    padding-top: 16px;
    white-space: normal;
}

/*
    Breadcrumbs, legibly.

    13px is a size for something you are not meant to read. On a marketplace the
    trail is how a buyer gets from one instrument to the rest of its category,
    so it is navigation rather than decoration and should be readable at a
    glance.

    Set on the descendants as well as the container: the theme sizes the li and
    the a directly, so a rule on #bread_crumbs alone changes only the separators.
*/
#bread_crumbs,
#bread_crumbs li,
#bread_crumbs li a,
#bread_crumbs ul {
    font-size: 0.9375rem;
    line-height: 1.5;
}

/*
    And dark enough to read.

    The links were #888 - about 3.5:1 on white, under the 4.5:1 minimum, and the
    same mistake the field labels had. Derived from the text colour rather than
    hard-coded so the dark theme gets a light grey instead of a dark one; the
    separators stay lighter, since they are punctuation rather than words.
*/
#bread_crumbs li a {
    color: var(--body-font-color);
    opacity: 0.8;
}

#bread_crumbs li a:hover {
    color: var(--noiz-dark-orange);
    opacity: 1;
}


/*
    Both disclosures read as section headings.

    The summary was set at 1.15rem, which put it between the field labels and
    the title without belonging to either. At 1.45rem it is unambiguously a
    heading for the block under it - which is what it has to be, since on a
    closed one it is the only thing there is.

    The specs accordion borrows the description's summary class rather than
    getting a parallel set of rules: two disclosures on one page that open the
    same way should not be able to drift apart visually.
*/
.listing-description__summary {
    font-size: 1.6rem;
}

/* Closed by default, so it needs a little air above it - the description
   directly above has none of its own once collapsed. */
.listing-specs-acc {
    margin-bottom: 26px;
}

.listing-specs-acc > .listing-details-facts {
    padding-top: 14px;
}


/* ==========================================================================
   The seller card at the foot of the panel
   ========================================================================== */

/*
    A rule, not a box.

    The theme paints every .side_block with the grey content background, which
    made the seller a card inside a card - and the panel already has an edge of
    its own once it pins. A hairline separates it from the counters above
    without adding a second surface.

    The selector carries .listing-details-aside to outrank
    `#content_wrapper .side_block` and friends in style.css; a lone class rule
    was ignored.
*/
.listing-details-aside .seller-card,
.seller-card {
    margin-top: 4px;
    padding: 18px 0 0;
    border-top: 1px solid var(--highlight-border-color);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.seller-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Fixed and round. A photo of any aspect ratio is cropped to the same circle,
   so a column of sellers lines up instead of stepping in and out. */
.seller-card__avatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
}

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

/* The fallback: one letter on a flat tint. Not a stock silhouette - the same
   grey person on every listing tells a reader nothing. */
.seller-card__avatar--letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--content-background-color);
    color: var(--body-font-color);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.85;
}

/*
    Name and rating share the first line; the location takes the second.

    A wrapping flex row rather than fixed positions, because the middle item is
    injected by the seller-reviews plugin and is simply absent for a seller with
    no reviews - where a two-column layout would leave a hole.

    The location is pushed onto its own line by flex-basis rather than by being
    outside the list, so the thumbnail sits to the left of all three lines
    instead of only the first two.
*/
.seller-card__identity {
    display: flex;
    flex-wrap: wrap;
    /*
        Baseline. Twice now the alternative has been tried and it is wrong both
        times, for the same reason each time.

        Within a line box, the baseline sits at half-leading plus the font's
        ascent - so a bigger font's baseline is lower in the box even when the
        boxes are identical. Centring the boxes therefore drops the 17px name
        below the 13.6px text beside it, and forcing a shared line-height does
        not help: it makes the boxes equal while leaving the ascents different,
        which is exactly what puts the name low.

        Baseline alignment is the one rule that ignores size, which is what this
        line needs - it has three text sizes on it. The stars were never part of
        this problem; see .srr-star below.
    */
    align-items: baseline;
    column-gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seller-card__identity > .seller-card__location {
    flex: 0 0 100%;
}

/* No shared line-height. It was written to support centring the boxes, and
   equal boxes with unequal ascents is precisely what pushed the name below the
   rest - see the note on align-items above. */

.seller-card__name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
}

.seller-card__name a {
    color: inherit;
}

.seller-card__name a:hover {
    color: var(--noiz-dark-orange);
}

/*
    The rating row, which the seller-reviews plugin injects.

    It ships as an <li class="account-rating counter"> built for a wider box and
    carries the theme's counter spacing; here it needs to sit tight under the
    name at the size of a caption.
*/
.seller-card__identity .account-rating {
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.seller-card__identity .srr-stars {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

/*
    The stars, sized to the text beside them.

    This is what actually looked wrong on this line, and it is a size problem
    rather than a position one - which is why three attempts at aligning it
    failed. The plugin draws each star in a 16px box for a rating widget that
    stands on its own; here they sit next to 13.6px text, so they overshot the
    caps at the top and the baseline at the bottom and read as floating above
    the line no matter where the box was aligned.

    13px matches the text's own extent. background-size: contain is required
    with it - the image is drawn at its natural size otherwise and would simply
    be cropped by the smaller box.
*/
.seller-card__identity .srr-star {
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.seller-card__identity .srr-account-rating {
    font-weight: 700;
}

/* Tight under the name: the two lines are one block about one person, and the
   3px of air was enough to read as two separate facts. The line-height on the
   row above supplies all the separation needed. */
.seller-card__location {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: -2px;
    font-size: 0.9rem;
    opacity: 0.75;
}

.seller-card__location svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.seller-card__listings {
    display: inline-block;
    margin-top: 14px;
}


/*
    The similar-listings row, sized like every other row scroller.

    style.css has a rule for listing cards that live inside an <aside>:

      body:not(.no-sidebar) aside:not(.two-middle) section:not(.side_block) .featured > li
      @media screen and (min-width: 1440px) { flex: 0 0 25%; max-width: 25% }

    This row is in the bottom blocks area, which content.tpl renders inside an
    <aside>, so it matched - and at (0,4,3) it beats the shared component's own
    (0,3,0) rule. The cards came out four across at 335px instead of six at
    206px, which is exactly the mismatch with the homepage this change set out
    to remove.

    #main_container is in the selector purely to outrank that: it wraps the
    whole page, so it narrows nothing. Scoped to .row-scroller__viewport rather
    than applied to .featured generally, so ordinary aside grids elsewhere keep
    the theme's four-across behaviour.
*/
#main_container .row-scroller__viewport > ul.featured > li {
    flex: 0 0 auto;
    width: calc((100% - 100px) / 6);
    max-width: none;
    min-width: 170px;
}

@media (max-width: 1199px) {
    #main_container .row-scroller__viewport > ul.featured > li {
        width: calc((100% - 60px) / 4);
    }
}

@media (max-width: 767px) {
    #main_container .row-scroller__viewport > ul.featured > li {
        width: 44%;
        min-width: 0;
    }
}


/*
    "Παρόμοιες καταχωρίσεις" reads like the homepage rows it copies.

    style.css sizes those headings through `body.home-page section.content_block
    > h3` - scoped to the homepage, so this row inherited the default 18.7px at
    weight 400 while the rows it is modelled on are 2.15em at 600. Same values
    here rather than widening the theme's selector, which would restyle every
    block on every page.

    The top margin is the other half of it: on the homepage these rows have the
    one above them for separation, and here it follows the seller card with
    nothing between.
*/
section.content_block.similarListings {
    margin-top: 54px;
}

section.content_block.similarListings > h3 {
    font-size: 2.15em;
    font-weight: 600;
    margin-bottom: 22px;
}

/*
    Full-width thumbnails, as on the homepage.

    featured.tpl gives each card Bootstrap column classes, and their 12px of
    horizontal padding took 24px out of a 207px card - so the artwork rendered
    at 183px square against the homepage's 207px, which is exactly the "smaller
    thumbnails" difference. The homepage boxes already come out at zero padding;
    the gap between cards is the flex `gap`, not column padding, so removing it
    costs nothing.
*/
#main_container .row-scroller__viewport > ul.featured > li {
    padding-left: 0;
    padding-right: 0;
}


/*
    The delivery row sat 8px low.

    Its value is a <ul class="checkboxes row mt-2"> rather than plain text, and
    .mt-2 is a Bootstrap utility - which means `margin-top: 0.5rem !important`.
    An earlier rule here tried to zero it and lost silently to that flag, so the
    value hung below its own label while every other row lined up, and the row
    was 44px tall against everyone else's 36.

    !important to match, which is the only thing that beats a utility class, and
    scoped tightly enough that it cannot affect .mt-2 anywhere else.
*/
.listing-details-facts .value ul.checkboxes.mt-2 {
    margin-top: 0 !important;
}

/*
    A rule and more air above "Παρόμοιες καταχωρίσεις".

    It is a different kind of thing from everything above it - the page has
    finished talking about this instrument and started suggesting others - and
    at 54px it still read as one more section of the listing. The line makes the
    break explicit rather than relying on the reader to feel it.
*/
section.content_block.similarListings {
    margin-top: 90px;
    padding-top: 46px;
    border-top: 1px solid var(--highlight-border-color);
}


/* ==========================================================================
   The listing panel on mobile
   --------------------------------------------------------------------------
   Below lg the theme moves the panel's children into an `aside.left.second-copy`
   it builds in the content column (flynaxTpl.sidebar in js/lib.js). That copy
   is not .listing-details-aside, so none of the panel rules above reach it -
   which is why the title bled off both edges and the buttons sat on the screen
   edge. These are the few that have to apply there too.
   ========================================================================== */

@media (max-width: 991px) {
    /* The copy is dropped in with no padding of its own, so its contents ran
       edge to edge. */
    aside.left.second-copy {
        padding-left: 16px;
        padding-right: 16px;
    }

    /*
        The same inset for the description, the specs and the price history.

        #content has 12px of column padding and the row cancels it with a -12px
        gutter, so its contents start at x=0 - the accordion titles and every
        line of description text were touching the screen edge.

        Applied to .content-section rather than to .listing-details, so the
        gallery above keeps running full width. A photo bleeding to the edges is
        right on a phone; a paragraph doing it is not. 16px matches the panel
        copy above, so the description lines up with the title.
    */
    .view-details-page .content-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    /*
        The title was cut off at both ends, and the cause was not overflow.

        .listing-header is a Bootstrap .row, whose -12px gutter is normally
        cancelled by the column padding inside it. The desktop rule that zeroes
        that margin is scoped to .listing-details-aside and does not match the
        copy, so the row hung 12px past each edge of a full-width container and
        the first and last letters were clipped.
    */
    aside.left.second-copy .listing-header {
        margin-left: 0;
        margin-right: 0;
    }

    aside.left.second-copy .listing-header > * {
        padding-left: 0;
        padding-right: 0;
    }

    /* 27px was the theme's default, inherited for the same reason. Sized to the
       column it is now in. */
    aside.left.second-copy .listing-header h1 {
        font-size: 1.6rem;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    /*
        The counters on one line.

        With all four labels this needs about 427px at 11px, so it wrapped on
        every phone made - and the size that would actually fit four pairs into
        343px is around 9px, which nobody can read.

        Dropping one label is what makes it fit: "πριν 1 εβδομάδα" reads as a
        date without being told it is one, where the other three are bare
        numbers and cannot lose theirs. That gets it onto one line from 390px
        up, which is most phones in use; a 375px screen - an SE or a mini -
        still takes two.
    */
    .listing-facts-strip {
        font-size: 0.6875rem;
        column-gap: 12px;
        row-gap: 2px;
    }

    .listing-facts-strip__row--listed .listing-facts-strip__label {
        display: none;
    }
}


/* ==========================================================================
   The panel's card surface
   --------------------------------------------------------------------------
   Everything that makes the panel look like a card lives here rather than on
   the <aside>. The aside stays the sticky grid column; this wrapper is the
   visible surface, so anything the template leaves outside it - the banner
   block - reads as sitting below the card while still travelling with it.
   ========================================================================== */

@media (min-width: 992px) {
    .listing-details-panel {
        /* 12px at the foot rather than 22: the report link is the last thing in
           the card now that the banner has left it, and it was floating in the
           middle of the bottom inset. */
        padding: 18px 26px 12px;
        border-radius: 14px;
    }
}

/* The side blocks, now a row of their own after the columns. */
.listing-details-side-blocks {
    margin-top: 26px;
}

@media (max-width: 991px) {
    /* The mobile copy already carries the 16px inset; a second one here would
       indent the card inside it. */
    .listing-details-panel {
        padding: 0;
    }
}


/* ==========================================================================
   Multi-value fields, and the specs popover at a size that fits
   ========================================================================== */

/*
    Several values on one line, separated by a bullet.

    Fields like Παράδοση hold a set - "Στην χώρα μου", "Χέρι με χέρι" - and the
    theme renders them as a grid of Bootstrap columns, so each one took a line
    of its own and the row grew as tall as the number of options. Stacked with
    no separator they also read as two unrelated rows rather than as one answer
    with two parts.

    Inline with a bullet between says "these belong together" in the width of a
    character. The selector is `.active ~ .active`, not `+`: the unticked
    options are display:none but still siblings, so adjacency would skip the
    separator whenever a hidden one sat between two shown ones.
*/
.listing-details-facts .value ul.checkboxes {
    display: block;
    margin: 0;
}

.listing-details-facts .value ul.checkboxes > li.active {
    display: inline;
    width: auto;
    max-width: none;
    padding: 0;
}

.listing-details-facts .value ul.checkboxes > li.active ~ li.active::before {
    content: '•';
    margin: 0 7px;
    opacity: 0.4;
}

/*
    The popover, sized to hold a full field list.

    At the page's 16px a twelve-row listing came to 491px and ran off the bottom
    of the window. Smaller type here is not a compromise - a hover panel is
    glanced at, not read - and it is the difference between the whole list
    fitting and half of it needing a scroll.

    The label column shrinks with it: 160px is sized for the wider list in the
    left column, and it was pushing the values further right than they needed to
    be in a narrower box.
*/
.listing-specs-peek__popover.listing-details-facts .table-cell {
    padding: 2px 0;
    font-size: 0.875rem;
}

/*
    min-width as well as flex-basis, or only half the rows narrow.

    style.css sets `min-width: 160px` on .name above 768px, and a min-width
    beats a flex-basis - but only for the rows it targets, which is
    :not(.wide-field). So the ordinary rows kept a 160px label column while the
    checkbox rows took the 138px asked for here, and their values started 22px
    apart in a list that is meant to be one column.
*/
.listing-specs-peek__popover.listing-details-facts .table-cell .name,
.listing-specs-peek__popover.listing-details-facts .table-cell.wide-field .name {
    flex: 0 0 138px;
    min-width: 138px;
    max-width: 138px;
}


/*
    "Ιστορικό τιμής" as a disclosure like the two above it.

    The block renders its own <h3> - Header is a column on the block row, and
    Smarty 2 cannot pass blocks_manager a modified copy of the array - so the
    heading is hidden here and the <summary> carries the title instead. Hiding
    rather than editing the block keeps the name coming from
    blocks+name+price_history, editable in the admin like every other block.
*/
.listing-price-history .content_block > h3 {
    display: none;
}

/* The block ships as a full-width bottom block with its own outer spacing; in
   the content column that reads as a gap between the title and its chart. */
.listing-price-history .content_block {
    margin: 0;
    padding: 0;
    background: none;
}

.listing-price-history > .content_block,
.listing-price-history .price-history-wrapper {
    padding-top: 14px;
}