/* Marketplace layout (Vinted-like structure, own brand).
   Vocabulary and CSS variables are theme-local (07 §34):
   --hue / --hue-dark / --hue-soft / --face / --corner.
   Defaults below reproduce the catalog's first variants exactly. */

:root {
    --hue: #0f7f72;
    --hue-dark: #0a5f56;
    --hue-soft: #e4f4f2;
    --face: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --corner: 14px;
    --ink: #1c2b28;
    --mist: #6b7f7b;
    --line: #e3e9e8;
}

* { box-sizing: border-box; }

body.plaza {
    margin: 0;
    font-family: var(--face);
    color: var(--ink);
    background: #ffffff;
    font-size: 16px;
    line-height: 1.45;
}

.plaza a { color: inherit; text-decoration: none; }
.plaza a:hover { color: var(--hue-dark); }

/* ---------- header ---------- */

.shop-head {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.shop-head-row {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* anchor components carry the .plaza prefix: the base `.plaza a`
   (0,1,1) outranks a lone class (0,1,0) and would repaint them ink */
.plaza .brand-mark {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--hue);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.plaza .brand-mark:hover { color: var(--hue-dark); }

.seek-band {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    background: #f4f6f6;
    border: 1px solid var(--line);
    border-radius: calc(var(--corner) * 2);
    overflow: hidden;
}

.seek-band:focus-within {
    border-color: var(--hue);
    background: #ffffff;
}

.seek-scope {
    border: 0;
    background: transparent;
    padding: 10px 8px 10px 16px;
    font: inherit;
    color: var(--mist);
    max-width: 11rem;
    border-right: 1px solid var(--line);
}

/* best-effort symmetry of the native popup list (011c-3 №5): Chromium
   honors limited option padding; the popup itself stays a UA control */
.seek-scope option { padding: 6px 10px; }

.seek-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    font: inherit;
    color: var(--ink);
}

.seek-input:focus, .seek-scope:focus { outline: none; }

.seek-btn {
    border: 0;
    background: transparent;
    color: var(--hue);
    font: inherit;
    font-weight: 700;
    padding: 0 18px;
    cursor: pointer;
}

.plaza .sell-cta {
    background: var(--hue);
    color: #ffffff;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: calc(var(--corner) * 2);
    box-shadow: 0 2px 10px rgba(28, 43, 40, 0.18);
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.plaza .sell-cta:hover {
    background: var(--hue-dark);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(28, 43, 40, 0.24);
}

.city-sel { position: relative; }

.city-sel-btn {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--corner);
    color: var(--mist);
    white-space: nowrap;
}

.city-sel-btn::-webkit-details-marker { display: none; }

.city-sel[open] .city-sel-btn { border-color: var(--hue); color: var(--hue); }

.city-sel-pane {
    position: absolute;
    /* the button now sits left of the search band (011c-3 №1) — the
       pane opens rightward under it; mobile re-anchors right below */
    left: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--corner);
    box-shadow: 0 12px 28px rgba(28, 43, 40, 0.12);
    width: 230px;
    padding: 10px 0 6px;
    z-index: 50;
}

.city-seek {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
    font: inherit;
    font-size: 0.9rem;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: calc(var(--corner) * 2);
    background: #f4f6f6;
}

.city-seek:focus { outline: none; border-color: var(--hue); background: #ffffff; }

/* ships [hidden] until the filter script binds — the author display
   rule above would otherwise defeat the UA [hidden] default */
.city-seek[hidden] { display: none; }

.city-sel-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
}

.city-sel-item a { display: block; padding: 7px 16px; }
.city-sel-item a:hover { background: var(--hue-soft); }

.menu-fold { display: none; position: relative; }

/* ---------- category strip ---------- */

.aisle-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.aisle-row {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
    display: flex;
    /* every rubric stays on screen — the strip must never push the page
       into horizontal scroll (011c-2 user report) */
    flex-wrap: wrap;
    gap: 4px;
    overflow-x: visible;
}

.aisle-cell { position: relative; }

.aisle-link, .aisle-label {
    display: block;
    padding: 11px 13px;
    font-size: 0.95rem;
    color: var(--ink);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: default;
}

.aisle-link { cursor: pointer; }

.aisle-cell:hover > .aisle-link,
.aisle-cell:focus-within > .aisle-link,
.aisle-cell:hover > .aisle-label,
.aisle-cell:focus-within > .aisle-label {
    border-bottom-color: var(--hue);
    color: var(--hue-dark);
}

.aisle-drop {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--corner) var(--corner);
    box-shadow: 0 14px 30px rgba(28, 43, 40, 0.14);
    min-width: 230px;
    z-index: 45;
}

.aisle-cell:hover .aisle-drop,
.aisle-cell:focus-within .aisle-drop { display: block; }

.aisle-sub { list-style: none; margin: 0; padding: 8px 0; }
.aisle-sub-item a { display: block; padding: 8px 18px; font-size: 0.93rem; }
.aisle-sub-item a:hover { background: var(--hue-soft); color: var(--hue-dark); }

/* ---------- banner slots ---------- */

.hero-slot { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.hero-slot .bill-band--header {
    margin: 18px 0 0;
    border-radius: var(--corner);
    overflow: hidden;
    background: var(--hue-soft);
}

.bill-band { display: grid; gap: 10px; }

.bill-box a {
    display: block;
    padding: 16px 20px;
    font-weight: 600;
    color: var(--hue-dark);
}

.bill-box--image a { padding: 0; }
.bill-box img { display: block; width: 100%; height: auto; }

.bill-band--sidebar, .bill-band--footer, .bill-band--listing_bottom {
    max-width: 1280px;
    margin: 22px auto 0;
    padding: 0 20px;
}

/* ---------- main column ---------- */

.plaza-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 20px 40px;
}

.flash-strip {
    background: var(--hue-soft);
    color: var(--hue-dark);
    border-radius: var(--corner);
    padding: 12px 16px;
    font-weight: 600;
}

.zone-title { font-size: 1.55rem; margin: 6px 0 14px; letter-spacing: -0.01em; }
.strip-title { font-size: 1.15rem; margin: 20px 0 12px; }
.zone-lead { color: var(--mist); max-width: 760px; }

.finder-hint, .finder-count { color: var(--mist); margin: 4px 0 14px; }

.blank-note {
    color: var(--mist);
    background: #f7f9f9;
    border-radius: var(--corner);
    padding: 18px;
    text-align: center;
}

/* ---------- goods grid + card ---------- */

.goods-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 14px;
}

.loose-grid .goods-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 22px;
}

.goods-card { min-width: 0; }

.goods-pic {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--corner);
    overflow: hidden;
    background: #f2f5f4;
}

.goods-pic img, .goods-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.goods-card:hover .goods-pic { box-shadow: 0 6px 18px rgba(28, 43, 40, 0.16); }

.goods-name {
    font-size: 0.92rem;
    font-weight: 500;
    margin: 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goods-place {
    font-size: 0.82rem;
    color: var(--mist);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goods-price {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--hue-dark);
    margin: 4px 0 0;
}

/* ---------- shelves (home/city link sections) ---------- */

.town-roll, .shelf-list, .foot-roll {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.town-stop a, .shelf-item a {
    display: inline-block;
    padding: 7px 14px;
    background: #f4f6f6;
    border-radius: calc(var(--corner) * 2);
    font-size: 0.9rem;
}

.town-stop a:hover, .shelf-item a:hover { background: var(--hue-soft); color: var(--hue-dark); }

.shelf-list { margin-bottom: 16px; }

/* ---------- breadcrumbs ---------- */

.trail { margin: 0 0 6px; }
.trail-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.85rem; color: var(--mist); }
.trail-hop + .trail-hop::before { content: '/'; margin: 0 6px 0 2px; color: var(--line); }
.trail-hop a:hover { color: var(--hue-dark); }

/* ---------- filter pills ---------- */

.sift-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--corner);
}

.sift-item { display: inline-flex; align-items: center; gap: 6px; }

.sift-label { font-size: 0.85rem; color: var(--mist); }

.sift-input {
    font: inherit;
    font-size: 0.9rem;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: calc(var(--corner) * 2);
    background: #ffffff;
    max-width: 9.5rem;
}

.sift-input:focus { outline: none; border-color: var(--hue); }

.sift-check { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }

.sift-go {
    font: inherit;
    font-weight: 700;
    color: #ffffff;
    background: var(--hue);
    border: 0;
    border-radius: calc(var(--corner) * 2);
    padding: 8px 20px;
    cursor: pointer;
}

.sift-go:hover { background: var(--hue-dark); }

/* ---------- pagination ---------- */

.flip-nav { margin: 22px 0 0; }
.flip-row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 6px; }

.flip-step a, .flip-step span {
    display: inline-block;
    min-width: 38px;
    text-align: center;
    padding: 8px 10px;
    border-radius: var(--corner);
    border: 1px solid var(--line);
}

.flip-step a:hover { border-color: var(--hue); color: var(--hue-dark); }
.flip-here span { background: var(--hue); border-color: var(--hue); color: #ffffff; }
.flip-mute span { color: var(--line); }

/* ---------- listing page ---------- */

.stall-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 26px;
    align-items: start;
}

.gallery-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--corner);
    background: #f7f9f9;
}

.gallery-frame {
    margin: 0;
    flex: 0 0 min(420px, 85%);
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    border-radius: var(--corner);
    overflow: hidden;
    background: #f2f5f4;
}

/* a lone photo grows and centers in the media zone instead of hugging
   the left edge and leaving a void before the deal box (011c-2) */
.gallery-frame:only-child {
    flex-basis: min(520px, 100%);
    margin-inline: auto;
}

.gallery-shot, .gallery-frame .goods-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deal-box {
    position: sticky;
    top: 76px;
    border: 1px solid var(--line);
    border-radius: var(--corner);
    padding: 20px;
}

.deal-name { font-size: 1.25rem; margin: 0 0 4px; }
.deal-meta { color: var(--mist); font-size: 0.9rem; margin: 0 0 10px; }
.deal-price { font-size: 1.6rem; font-weight: 800; color: var(--hue-dark); margin: 0 0 14px; }

.plaza .reveal-btn {
    display: block;
    text-align: center;
    background: var(--hue);
    color: #ffffff;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: calc(var(--corner) * 2);
    box-shadow: 0 2px 10px rgba(28, 43, 40, 0.18);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.plaza .reveal-btn:hover {
    background: var(--hue-dark);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(28, 43, 40, 0.24);
}

.trait-list { margin: 18px 0 0; }
.trait-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.trait-key { color: var(--mist); }
.trait-val { margin: 0; text-align: right; }

.stall-about { max-width: 760px; margin: 26px 0 0; }

.reveal-about { color: var(--mist); }

.deal-dock { display: none; }

/* ---------- related ---------- */

.weave { margin: 26px 0 0; }
.weave-title { font-size: 1.05rem; margin: 0 0 10px; }
.weave-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.weave-item a {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: calc(var(--corner) * 2);
    font-size: 0.87rem;
}
.weave-item a:hover { border-color: var(--hue); color: var(--hue-dark); }

/* ---------- forms ---------- */

.stand-pick, .stand-form { max-width: 560px; margin: 0 0 20px; }
.stand-block { margin: 0 0 14px; }
.stand-label { display: block; font-size: 0.9rem; color: var(--mist); margin: 0 0 4px; }

.stand-input {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--corner);
    background: #ffffff;
}

.stand-input:focus { outline: none; border-color: var(--hue); }

.stand-check { display: block; margin: 6px 0; font-size: 0.95rem; }

.stand-btn {
    font: inherit;
    font-weight: 700;
    color: #ffffff;
    background: var(--hue);
    border: 0;
    border-radius: var(--corner);
    padding: 11px 24px;
    cursor: pointer;
    margin-top: 8px;
}

.stand-btn:hover { background: var(--hue-dark); }

.stand-errors {
    background: #fdecec;
    color: #a02020;
    border-radius: var(--corner);
    padding: 12px 16px 12px 32px;
    max-width: 560px;
}

.hp-nook { position: absolute; left: -9999px; top: -9999px; }

/* ---------- errors ---------- */

.mishap-code { font-size: 3.2rem; margin: 30px 0 8px; color: var(--hue); }
.mishap-note { color: var(--mist); max-width: 480px; }
.mishap-back a { color: var(--hue-dark); font-weight: 600; }

/* ---------- footer ---------- */

.plaza-foot {
    border-top: 1px solid var(--line);
    margin-top: 34px;
    background: #fafcfb;
}

.foot-cols {
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 20px 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.foot-col-title { font-weight: 700; margin: 0 0 8px; }
.foot-roll { display: block; }
.foot-roll li { margin: 0 0 6px; }
.plaza .foot-link { font-size: 0.9rem; color: var(--mist); }
.plaza .foot-link:hover { color: var(--hue-dark); }

.foot-fine {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px 24px;
    color: var(--mist);
    font-size: 0.85rem;
}

/* ---------- responsive ---------- */

/* desktop-only (011c-2 plan-R1-5): mobile keeps the left-aligned wrap */
@media (min-width: 901px) {
    .sift-bar { justify-content: center; }
}

@media (max-width: 1150px) {
    .goods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .loose-grid .goods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .goods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .loose-grid .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stall-cols { grid-template-columns: minmax(0, 1fr); }
    .deal-box { position: static; }
    .aisle-row { flex-wrap: nowrap; overflow-x: auto; }
    /* tap-opened children sheet (011c-2): the drop re-anchors to the
       nav itself — the containing block sits OUTSIDE the scrolling
       .aisle-row, so the horizontal scroller cannot clip it. Opening
       still rides the base :hover/:focus-within rules (labels carry
       tabindex, touch taps focus them). */
    .aisle-nav { position: relative; }
    .aisle-cell { position: static; }
    .aisle-drop {
        left: 10px;
        right: 10px;
        top: 100%;
        min-width: 0;
        border-radius: 0 0 var(--corner) var(--corner);
    }
    /* only the CTA folds away (it lives in the burger) — the «Місто»
       button stays beside the burger on every viewport (011c-3 №6-A);
       the search band drops to its own full row HERE, not at ≤560, so
       nothing separates the two controls on tablets (diff-R1-3) */
    .sell-cta { display: none; }
    .menu-fold { display: block; }
    .city-sel { margin-left: auto; }
    .shop-head-row { flex-wrap: wrap; }
    .seek-band { order: 3; flex-basis: 100%; }
    .city-sel-pane {
        left: auto;
        right: 0;
        width: min(300px, calc(100vw - 28px));
    }
}

@media (max-width: 560px) {
    .shop-head-row { gap: 10px; padding: 10px 14px; }
    /* the scope select yields the band to the q input (011c-2, tightened
       011c-3 №4) */
    .seek-scope { flex: 0 1 auto; max-width: 27%; font-size: 0.9rem; text-overflow: ellipsis; }
    .gallery-frame { flex: 0 0 100%; }
    .goods-grid, .loose-grid .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .plaza-main { padding: 16px 14px 90px; }
    .foot-cols { grid-template-columns: minmax(0, 1fr); }
    .deal-dock {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 14px;
        background: #ffffff;
        border-top: 1px solid var(--line);
        z-index: 60;
    }
}

/* mobile burger pane */

.menu-fold-btn {
    list-style: none;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--corner);
    color: var(--mist);
}

.menu-fold-btn::-webkit-details-marker { display: none; }

.menu-fold-pane {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--corner);
    box-shadow: 0 14px 30px rgba(28, 43, 40, 0.16);
    padding: 14px;
    /* clamped so the right-anchored pane never spills off-screen */
    width: min(330px, calc(100vw - 28px));
    max-height: 70vh;
    overflow-y: auto;
    z-index: 70;
}

.menu-fold-pane .sell-cta { display: block; text-align: center; margin: 0 0 10px; }

.menu-fold-pane .city-seek { width: 100%; margin: 0 0 8px; }

.fold-head {
    font-weight: 700;
    margin: 12px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.fold-list { list-style: none; margin: 0; padding: 0; }
.fold-item a, .fold-item span { display: block; padding: 6px 4px; font-size: 0.93rem; }
.fold-item a:hover { color: var(--hue-dark); }
.fold-sub { list-style: none; margin: 0; padding: 0 0 0 14px; }
.fold-sub-item a { display: block; padding: 5px 4px; font-size: 0.88rem; color: var(--mist); }
.fold-sub-item a:hover { color: var(--hue-dark); }