/* No external font CDN: the build/QA sandbox has no live web access, so
   webfonts are approximated with solid local fallback stacks instead of an
   @import that would silently fail to load (and could equally fail for a
   visitor with a flaky connection). Serif display + grotesque-sans body
   mirrors the approved Fraunces + Inter pairing. */
:root {
    --bg-page: #faf8f4;
    --bg-card: #ffffff;
    --text-ink: #211d33;
    --text-secondary: #6e6880;
    --text-muted-on-dark: #cfc9f2;
    --text-faint-on-dark: #b9b3f0;
    --brand-indigo: #4338ca;
    --brand-indigo-deep: #2a2467;
    --brand-indigo-mid: #3d3684;
    --brand-saffron: #f59e0b;
    --saffron-ink: #231903;
    --border-subtle: #e7e3d8;
    --border-strong: #c9c4b8;
    --surface-tint: #f3efe5;
    --surface-calm: #f6f3ea;
    --surface-muted: #f2eee4;
    --pill-indigo-bg: #edebfa;
    --pill-indigo-text: #3b33a8;
    --pill-amber-bg: #fdf0dc;
    --pill-amber-text: #8a5b00;
    --pill-green-bg: #eaf3ed;
    --pill-green-text: #166339;
    --pill-red-bg: #fbeae8;
    --pill-red-text: #b42318;
    --shadow-card: 0px 6px 18px -4px rgba(33, 28, 51, 0.09);
    --radius-control: 12px;
    --radius-card: 14px;
    --radius-panel: 16px;
    --radius-pill: 999px;
    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-page);
    color: var(--text-ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, .display {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 0, "WONK" 1;
    font-weight: 600;
    margin: 0;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 64px;
}

@media (max-width: 900px) {
    .container { padding: 0 18px; }
}

/* ---------- Nav ---------- */
.kr-nav {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 64px;
    gap: 16px;
    flex-wrap: wrap;
}

.kr-nav.owner-mode { background: var(--brand-indigo-deep); }

.kr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    color: var(--text-ink);
}

.kr-nav.owner-mode .kr-brand { color: #fff; }

.kr-brand .crown { font-size: 18px; }

.owner-badge {
    background: var(--brand-indigo-mid);
    color: var(--text-muted-on-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
}

.kr-nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.kr-nav.owner-mode .kr-nav-links a { color: var(--text-muted-on-dark); font-weight: 500; }
.kr-nav.owner-mode .kr-nav-links a.active { color: #fff; font-weight: 600; }

.kr-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.kr-nav-actions .switch-link {
    color: var(--brand-indigo);
    font-weight: 500;
    font-size: 14px;
    background: none;
    border: none;
    padding: 0;
}

.kr-nav.owner-mode .switch-link { color: var(--text-muted-on-dark); }

.avatar {
    background: var(--brand-indigo-deep);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-control);
    padding: 13px 22px;
    font-weight: 600;
    font-size: 15px;
    border: none;
    text-align: center;
}

.btn-primary { background: var(--brand-saffron); color: var(--saffron-ink); }
.btn-secondary { background: var(--brand-indigo); color: #fff; }
.btn-ghost { background: transparent; border: 1.4px solid var(--border-subtle); color: var(--text-ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero {
    background: var(--brand-indigo-deep);
    padding: 56px 64px 64px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hero .eyebrow {
    color: var(--text-faint-on-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.hero h1 {
    color: #fff;
    font-size: 46px;
    line-height: 1.15;
    max-width: 780px;
}

.hero .sub {
    color: var(--text-muted-on-dark);
    font-size: 17px;
    line-height: 26px;
    max-width: 640px;
}

.search-pill {
    background: #fff;
    display: flex;
    align-items: stretch;
    padding: 8px;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    max-width: 700px;
    flex-wrap: wrap;
    gap: 4px;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 20px;
    min-width: 180px;
    flex: 1;
    border: none;
    background: transparent;
    text-align: left;
}

.search-field .label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
}

.search-field .value { font-size: 15px; color: var(--text-ink); font-weight: 500; }
.search-field .placeholder { font-size: 15px; color: #9a94ac; font-weight: 500; }
.search-divider { width: 1px; background: var(--border-subtle); margin: 8px 0; }

.hero .trust { color: var(--text-faint-on-dark); font-size: 13px; }

/* ---------- Sections ---------- */
.section { padding: 40px 64px; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.section-head h2 { font-size: 28px; color: var(--text-ink); }
.section-head .see-all { color: var(--brand-indigo); font-weight: 500; font-size: 15px; }
.section-sub { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }

.tiles-row {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.category-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; background: none; border: none; padding: 0; flex-shrink: 0; width: 220px; }
.category-art { border-radius: 14px; height: 140px; width: 100%; overflow: hidden; position: relative; }
.category-tile .cat-name { font-weight: 600; font-size: 16px; color: var(--text-ink); }
.category-tile .cat-count { font-size: 13px; color: var(--text-secondary); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 22px;
}

.item-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    border: none;
    padding: 0;
}

.item-card .photo { height: 180px; position: relative; }
.item-card .category-art { height: 180px; border-radius: 0; }
.gallery-main-wrap .category-art { height: 380px; border-radius: 16px; }
.summary-thumb.category-art { height: 68px; width: 96px; border-radius: 10px; }
.gear-row .thumb.category-art, .gear-table .thumb.category-art { height: 36px; width: 48px; border-radius: 8px; }
.item-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.item-card .name { font-weight: 600; font-size: 15px; color: var(--text-ink); }
.item-card .meta { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.item-card .price-row { display: flex; align-items: baseline; gap: 3px; }
.item-card .price { font-weight: 700; font-size: 17px; color: var(--text-ink); }
.item-card .per-day { font-size: 13px; color: var(--text-secondary); }

.heart-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.heart-btn.saved { color: var(--pill-red-text); }
.heart-btn:not(.saved) { color: var(--text-ink); }

.owner-strip {
    background: var(--surface-tint);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 64px 40px;
}
.owner-strip h3 { font-size: 26px; }
.owner-strip p { color: var(--text-secondary); font-size: 15px; max-width: 560px; line-height: 22px; margin-top: 8px; }

.kr-footer {
    background: var(--text-ink);
    color: #a9a4bd;
    padding: 26px 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
}
.kr-footer .kr-brand { color: #fff; font-size: 18px; }

@media (max-width: 900px) {
    .hero, .section, .kr-nav, .kr-footer { padding-left: 18px; padding-right: 18px; }
    .owner-strip { margin-left: 18px; margin-right: 18px; }
    .hero h1 { font-size: 32px; }
}

/* ---------- Category art (SVG illustration placeholders) ---------- */
.cat-art-svg { width: 100%; height: 100%; display: block; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 28px 64px 0; }

/* ---------- Browse layout ---------- */
.browse-header { padding: 36px 64px 0; display: flex; flex-direction: column; gap: 10px; }
.browse-header .title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.browse-header h1 { font-size: 34px; }
.browse-header .count-line { color: var(--text-secondary); font-size: 14px; }

.sort-select {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 16px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-ink);
}

.browse-content { display: flex; gap: 36px; padding: 32px 64px; align-items: flex-start; flex-wrap: wrap; }
.filters-col { display: flex; flex-direction: column; gap: 16px; width: 280px; flex-shrink: 0; }
.filter-box { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.filter-box .filter-title { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; color: var(--text-secondary); }
.filter-row-between { display: flex; align-items: center; justify-content: space-between; }
.filter-checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.filter-checkbox-row input { width: 16px; height: 16px; accent-color: var(--brand-indigo); }
.filter-checkbox-row .label { font-size: 13.5px; color: var(--text-ink); }
.filter-checkbox-row .count { font-size: 13px; color: var(--text-secondary); margin-left: auto; }
.range-slider { width: 100%; accent-color: var(--brand-indigo); }
.filter-hint { font-size: 12px; color: var(--text-secondary); }
.clear-filters { color: var(--brand-indigo); font-weight: 500; font-size: 13px; background: none; border: none; padding: 0; text-align: left; }

.results-col { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 22px; }
.availability-note { color: var(--text-secondary); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.availability-note button { color: var(--brand-indigo); font-weight: 500; background: none; border: none; padding: 0; font-size: 14px; }
.empty-note { color: var(--text-secondary); padding: 40px; text-align: center; }
.item-card.unavailable { opacity: 0.5; }

/* ---------- Item detail ---------- */
.item-content { display: flex; gap: 40px; padding: 28px 64px; align-items: flex-start; flex-wrap: wrap; }
.item-left { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 28px; }
.gallery-main { height: 380px; border-radius: 16px; position: relative; overflow: hidden; }
.gallery-badge { position: absolute; left: 20px; bottom: 20px; background: #fff; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.gallery-thumbs { display: flex; gap: 12px; overflow-x: auto; }
.gallery-thumbs .thumb { height: 82px; width: 122px; border-radius: 10px; flex-shrink: 0; }

.item-title h1 { font-size: 34px; }
.item-meta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--text-secondary); }
.condition-pill { background: var(--pill-green-bg); color: var(--pill-green-text); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; }

.owner-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.owner-row .who { display: flex; gap: 14px; align-items: center; }
.owner-row .avatar { width: 48px; height: 48px; font-size: 16px; }
.owner-row .name { font-weight: 600; font-size: 15px; }
.owner-row .sub { font-size: 13px; color: var(--text-secondary); }

.detail-block h2 { font-size: 22px; margin-bottom: 12px; }
.detail-block .about-copy { font-size: 15px; line-height: 24px; color: var(--text-ink); }
.included-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px 40px; }
.included-item { display: flex; gap: 9px; align-items: center; font-size: 14.5px; }
.check-icon { color: var(--brand-indigo); flex-shrink: 0; }

.avail-panel { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.avail-panel .month-nav { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-weight: 600; font-size: 11px; color: var(--text-secondary); padding: 4px 0; }
.cal-day { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 9px; font-size: 13px; }
.cal-day.out-of-range { color: var(--border-strong); }
.cal-day.booked { background: var(--surface-muted); color: #a39d8f; text-decoration: line-through; }
.cal-day.selected { background: var(--brand-indigo); color: #fff; font-weight: 600; }
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 6px; font-size: 12.5px; color: var(--text-secondary); align-items: center; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; margin-right: 7px; vertical-align: middle; }

.reviews-list { display: flex; gap: 20px; flex-wrap: wrap; }
.review-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.review-card .stars { color: var(--brand-saffron); font-size: 14px; }
.review-card .quote { font-size: 14px; line-height: 21px; }
.review-card .attrib { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }

.rate-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; width: 360px; flex-shrink: 0; position: sticky; top: 20px; }
.rate-card .price-line { display: flex; align-items: center; gap: 5px; }
.rate-card .price-line .amount { font-weight: 700; font-size: 28px; }
.rate-card .price-line .unit { color: var(--text-secondary); font-size: 15px; }
.rate-dates { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.rate-dates .row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 600; }
.rate-dates .row .k { color: var(--text-secondary); font-size: 10.5px; letter-spacing: 1.2px; }
.rate-dates .row .v { font-size: 14px; }
.rate-dates .divider { height: 1px; background: var(--border-subtle); }
.breakdown-row { display: flex; justify-content: space-between; font-size: 14px; }
.breakdown-row .k { color: var(--text-secondary); }
.breakdown-row.total { color: var(--text-ink); font-weight: 600; font-size: 15px; }
.breakdown-row.total .v { font-weight: 700; font-size: 17px; }
.deposit-box { background: var(--surface-calm); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.deposit-box .title { font-weight: 600; font-size: 14px; }
.deposit-box .copy { font-size: 13px; color: var(--text-secondary); line-height: 19px; }
.fine-print { font-size: 12.5px; color: var(--text-secondary); line-height: 18px; }

/* ---------- Booking flow ---------- */
.booking-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 56px 24px; text-align: center; }
.booking-progress { display: flex; align-items: center; gap: 14px; }
.step-dot { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; border: 1.5px solid var(--border-strong); color: var(--text-secondary); }
.step-item { display: flex; align-items: center; gap: 9px; }
.step-item .step-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.step-item.done .step-dot { background: var(--brand-indigo); color: #fff; border: none; }
.step-item.done .step-label, .step-item.active .step-label { color: var(--text-ink); font-weight: 600; }
.step-item.active .step-dot { border: 2px solid var(--brand-indigo); color: var(--brand-indigo); background: #fff; }
.step-line { width: 56px; height: 2px; background: var(--border-subtle); }
.step-line.done { background: var(--brand-indigo); }

.booking-wrap h1 { font-size: 34px; text-align: left; }
.booking-wrap .sub { color: var(--text-secondary); font-size: 15px; text-align: left; }

.summary-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-card); padding: 28px; width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.summary-item-row { display: flex; gap: 16px; align-items: center; }
.summary-thumb { width: 96px; height: 68px; border-radius: 10px; flex-shrink: 0; }
.summary-divider { height: 1px; background: var(--border-subtle); }
.date-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.date-summary-row .k { color: var(--text-secondary); font-size: 10.5px; letter-spacing: 1.2px; font-weight: 600; }
.date-summary-row .v { font-size: 15px; font-weight: 600; }
.edit-link { color: var(--brand-indigo); font-weight: 500; font-size: 14px; background: none; border: none; padding: 0; }

.date-tile { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; background: #fff; text-align: left; }
.date-tile .k { color: var(--text-secondary); font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; }
.date-tile input { border: none; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-ink); background: transparent; padding: 0; }
.date-tiles-row { display: flex; gap: 16px; width: 100%; max-width: 680px; flex-wrap: wrap; }

.error-banner { background: var(--pill-red-bg); color: var(--pill-red-text); border-radius: 10px; padding: 12px 16px; font-size: 13px; text-align: left; width: 100%; max-width: 680px; }

.confirm-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(67,56,202,0.12); display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--brand-indigo); }

/* ---------- Owner screens ---------- */
.owner-header { padding: 40px 64px 0; display: flex; flex-direction: column; gap: 20px; }
.owner-header h1 { font-size: 32px; }
.stat-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.stat-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; width: 220px; display: flex; flex-direction: column; gap: 5px; }
.stat-card .value { font-family: var(--font-display); font-weight: 600; font-size: 28px; }
.stat-card .label { font-size: 13px; color: var(--text-secondary); }
.pill { display: inline-flex; padding: 5px 11px; border-radius: 999px; font-weight: 600; font-size: 12px; width: fit-content; }
.pill-amber { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.pill-indigo { background: var(--pill-indigo-bg); color: var(--pill-indigo-text); }
.pill-green { background: var(--pill-green-bg); color: var(--pill-green-text); }
.pill-red { background: var(--pill-red-bg); color: var(--pill-red-text); }

.owner-main { display: flex; gap: 32px; padding: 36px 64px; flex-wrap: wrap; }
.requests-col { flex: 2; min-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.gear-col { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 16px; }
.requests-col h2, .gear-col h2 { font-size: 22px; }
.col-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.request-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.request-who { display: flex; gap: 12px; align-items: center; }
.request-who .avatar { width: 40px; height: 40px; font-size: 14.4px; }
.request-who .name { font-weight: 600; font-size: 14.5px; }
.request-who .item-name { font-size: 13.5px; color: var(--text-secondary); }
.request-note { font-size: 13.5px; line-height: 20px; }
.request-actions { display: flex; gap: 10px; }
.request-actions .accept { background: var(--brand-indigo); color: #fff; border: none; border-radius: 10px; padding: 11px 20px; font-weight: 600; font-size: 14px; }
.request-actions .decline { background: none; border: 1.4px solid var(--border-subtle); border-radius: 10px; padding: 11px 20px; font-weight: 600; font-size: 14px; color: var(--text-ink); }

.decided-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.decided-card .left .title { font-weight: 600; font-size: 13.5px; }
.decided-card .left .sub { font-size: 13px; color: var(--text-secondary); }

.gear-table { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.gear-table-head { display: flex; justify-content: space-between; padding: 12px 18px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; color: var(--text-secondary); }
.gear-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border-subtle); gap: 12px; }
.gear-row .who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.gear-row .thumb { width: 48px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.gear-row .name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gear-row .rate { font-size: 12.5px; color: var(--text-secondary); }

.owner-calendar-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.owner-calendar-card h3 { font-size: 14.5px; font-weight: 600; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mini-cal-day { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 7px; font-size: 11.5px; }
.mini-cal-day.highlighted { background: var(--pill-indigo-bg); color: var(--pill-indigo-text); font-weight: 600; }
.mini-cal-day.out-of-range { color: var(--border-strong); }
.calendar-legend { font-size: 12px; color: var(--text-secondary); line-height: 17px; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(33,29,51,0.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-box { background: #fff; border-radius: 16px; padding: 28px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.modal-box h3 { font-size: 20px; }
.modal-box .copy { font-size: 14px; color: var(--text-secondary); line-height: 21px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions .never-mind { background: none; border: none; color: var(--text-ink); font-weight: 600; padding: 11px 16px; }
.modal-actions .destructive { background: var(--pill-red-text); color: #fff; border: none; border-radius: 10px; padding: 11px 20px; font-weight: 600; }

/* Flex items default to a min-width based on their content's intrinsic
   size, not the parent's constraint — a fixed-width row (gallery thumbs,
   date tiles, calendar grids) can silently force the whole page to scroll
   horizontally on narrow viewports even though every rule above looks
   "responsive". Zeroing min-width on these flex children lets them (and
   their own overflow-x:auto, where present) actually shrink to the
   viewport instead of pushing it wider. */
.item-content > *, .owner-main > *, .browse-content > *, .booking-wrap > *,
.item-left > *, .hero, .search-pill, .date-tiles-row > *, .summary-card, .rate-card,
.results-col, .gear-col, .requests-col, .filters-col, .item-left, .gallery-thumbs {
    min-width: 0;
}

@media (max-width: 900px) {
    /* align-items: flex-start (correct for the desktop row layout) becomes
       the CROSS-axis alignment once flex-direction flips to column here —
       that sizes each child to its own content width instead of the
       viewport, which is what was overflowing. Stretch fixes it. */
    .item-content, .owner-main, .browse-content { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding-left: 18px; padding-right: 18px; }
    .rate-card { width: 100%; position: static; }
    .filters-col { width: 100%; }
    .breadcrumb, .browse-header { padding-left: 18px; padding-right: 18px; }
    .booking-progress { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
    .step-line { width: 32px; }
    .date-tile { min-width: 0; flex: 1 1 140px; }
    .kr-nav, .owner-header, .section, .hero { padding-left: 18px; padding-right: 18px; }
    .avail-panel, .cal-grid { max-width: 100%; }
    .cal-day, .mini-cal-day { font-size: 11px; }
}