/* ─────────────────────────────────────────────────────────────────────────────
   index.next.css — the marketplace homepage in the new look (?ui=next).
   Loaded after style.next.css, so every token from tokens.next.css is available.

   Concept (UI_REVAMP_PLAN.md §5.4): the marketplace is the hero. Left-aligned,
   real products instead of floating stock images, borders instead of glass,
   nothing that moves unless the shopper moved it.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* index.css gives the page its own palette names; point them at the tokens. */
    --dark: var(--color-fg-default);
    --light: var(--color-bg-muted);
    /* Ink, not the panels' green: nothing on the homepage moves money, so its inline
       var(--primary) accents (search-result labels, image dots) must not read as money. */
    --primary: var(--color-fg-default);
    --secondary: var(--color-fg-muted);
    /* --nav-height, --page-max and --page-gutter come from style.next.css (Public header). */
}

body {
    margin: 0;
    padding-top: var(--nav-height);
    font-family: var(--font-sans);
    background: var(--color-bg-page);
    color: var(--color-fg-default);
    overflow-x: hidden;
}

/* The top bar, search and .btn-modern live in style.next.css's Public header section,
   shared with pricing.php and the storefront. Only the homepage's larger button is here. */
.btn-modern-lg {
    min-height: var(--control-lg);
    padding: 0 var(--space-6);
    font-size: var(--text-body);
}

/* ── Hero: the marketplace itself ──────────────────────────────────────────── */
.home-hero {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-12) var(--page-gutter) var(--space-8);
}

.home-hero-title {
    margin: 0 0 var(--space-4);
    max-width: 15ch;
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.home-hero-lede {
    margin: 0 0 var(--space-6);
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: var(--leading-body);
    color: var(--color-fg-muted);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.home-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-lg);
    padding: 0 var(--space-2);
    color: var(--color-fg-default);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .home-link:hover { color: var(--color-fg-default); text-decoration-color: currentColor; }
}

.home-hero-shelf {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero-caption {
    margin: var(--space-3) 0 0;
    font-size: var(--text-small);
    color: var(--color-fg-muted);
}

.shelf-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .shelf-item:hover { border-color: var(--color-border-input); text-decoration: none; }
}

.shelf-item-img {
    display: block;
    aspect-ratio: 1;
    overflow: hidden; /* without it a tall photo grows the box and breaks the square */
    background: var(--color-bg-muted);
}

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

.shelf-item-price {
    padding: var(--space-2) var(--space-3) 0;
    font-size: var(--text-ui);
    font-weight: 600;
    color: var(--color-fg-default);
    font-variant-numeric: tabular-nums;
}

.shelf-item-name {
    padding: 0 var(--space-3) var(--space-3);
    font-size: var(--text-small);
    color: var(--color-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .home-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--space-12);
        padding-block: var(--space-16);
    }
}

@media (max-width: 899px) {
    /* A phone shows one row of three; the rest are in the marketplace below. */
    .home-hero-shelf li:nth-child(n+4) { display: none; }
}

/* ── Content bands ─────────────────────────────────────────────────────────── */
.home-band {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-16) var(--page-gutter) 0;
}

.home-band-title,
.shops-title,
.category-pills-section h3,
.marketplace h3,
.carousel-header h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-fg-default);
    text-align: left;
}

.home-band-lede,
.shops-lede {
    margin: 0 0 var(--space-8);
    max-width: 40rem;
    color: var(--color-fg-muted);
}

.home-band-more-wrap { margin-top: var(--space-6); }

.home-band-more {
    color: var(--color-fg-default);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 4px;
}

/* Two kinds of shop */
.spacelet-ways-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.spacelet-way {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.spacelet-way .way-icon {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: var(--space-1);
    background: none;
    color: var(--color-fg-default);
}

.spacelet-way .way-icon svg { width: 1.5rem; height: 1.5rem; }

.spacelet-way h3 {
    margin: 0;
    font-size: var(--text-h3);
    font-weight: 600;
}

.spacelet-way p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-fg-muted);
}

.spacelet-way .way-tag {
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-fg-muted);
}

/* What Spacelet does: a ruled list, not four identical boxes */
.spacelet-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--space-6);
}

.feature-card {
    padding: var(--space-4) 0 var(--space-6);
    border-top: 1px solid var(--color-border-strong);
}

.feature-icon {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-fg-default);
}

.feature-icon svg { width: 1.375rem; height: 1.375rem; }

.feature-card h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-h3);
    font-weight: 600;
}

.feature-card p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-fg-muted);
}

.feature-tag {
    display: inline-block;
    margin-top: var(--space-3);
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-fg-muted);
    font-size: var(--text-small);
    font-weight: 500;
}

@media (max-width: 900px) { .spacelet-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .spacelet-feature-grid { grid-template-columns: 1fr; } }
@media (min-width: 760px) { .spacelet-ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Discover shops ────────────────────────────────────────────────────────── */
/* Same box as .home-band, so the heading and grid start on the same line as every other section. */
.shops-section {
    position: relative;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-16) var(--page-gutter) var(--space-4);
}

#shops::before { content: none; }

.shops-head { margin: 0 0 var(--space-2); }

.shops-eyebrow { display: none; }

.shop-dir-grid {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.shop-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .shop-card:hover { border-color: var(--color-border-input); text-decoration: none; }
}

.shop-card .banner {
    position: relative;
    height: 7rem;
    background: var(--color-bg-muted);
    background-size: cover;
    background-position: center;
}

.shop-card .banner::after { content: none; }

.shop-card .logo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: -1.75rem 0 0 var(--space-4);
    object-fit: cover;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-fg-default);
}

.shop-card .body { padding: var(--space-2) var(--space-4) var(--space-4); }

.shop-card .nm {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--text-h3);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.shop-card .tg {
    min-height: 2.8em;
    font-size: var(--text-ui);
    line-height: 1.4;
    color: var(--color-fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-card .rent {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding: 0.125rem var(--space-2);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-sm);
    background: var(--color-success-bg);
    color: var(--color-success-fg);
    font-size: var(--text-small);
    font-weight: 500;
}

.shop-card .stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-fg-muted);
}

.shop-card .stats span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.shop-card .stat-video { color: var(--color-fg-default); }

.shop-feat-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg-inverse);
    color: var(--color-fg-inverse);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Emoji stood in for icons; the new look draws line icons instead.
   Scoped under .shop-card so it outranks `.shop-card .stats span { display: inline-flex }`. */
.ico-emoji,
.shop-card span.ico-emoji { display: none; }
.ico-line { display: inline-block; width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

/* ── Categories ────────────────────────────────────────────────────────────── */
.category-pills-section {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-16) var(--page-gutter) 0;
}

.category-pills-section h3 { margin-bottom: var(--space-6); }

/* The chips themselves are style.next.css's Marketplace pieces, shared with the storefront. */

/* ── Marketplace grid and product cards ────────────────────────────────────── */
.marketplace {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-16) 0;
}

.marketplace h3 { margin-bottom: var(--space-6); }

/* The grid and the card itself are style.next.css's Marketplace pieces, shared with the
   storefront. The homepage's whole card is clickable, so it alone gets the pointer. */
.product-card { cursor: pointer; }

.store-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 5;
    max-width: calc(100% - 1rem);
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.94);
    color: var(--color-fg-default);
    font-size: 0.6875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Block, not flex: text-overflow only puts the "…" on a block's own text, never on a flex item's. */
.product-meta {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-small);
    color: var(--color-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-meta svg {
    width: 0.75rem;
    height: 0.75rem;
    margin-right: var(--space-1);
    vertical-align: -0.125rem;
    color: var(--color-fg-subtle);
}

/* "KSh" and its figure never part; the discount badge may still drop to the next line. */
.product-price s,
.product-price span { white-space: nowrap; }

/* The title is the link to the item. */
.product-title-link { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
    .product-title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Share (an icon) + Add to Cart on one row. There is no View button: the title and the whole
   card already open the item.
   BRIDGE: style.css forces `.card-actions > * { flex: 1 1 50% !important }` on phones for the
   admin shop cards; the product-card scope outranks it. */
.card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

.product-card .card-actions button { flex: 0 0 auto !important; }

.product-card .card-actions .btn-modern {
    flex: 1 1 auto !important;
    min-width: 0;
    min-height: var(--control-md);
    padding: 0 var(--space-3);
    font-size: var(--text-small);
}

.visit-btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-md);
    height: var(--control-md);
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
}

.visit-btn-share svg { width: 1rem; height: 1rem; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
    .visit-btn-share:hover { border-color: var(--color-border-input); }
}

/* Price: the new figure, then a small line with the struck old figure and a neutral "−40%"
   (a discount is not a problem state, so it is not red). Two lines, because both figures on
   one line do not fit a 10.5rem card and the old price was clipped. */
.price-deal { display: block; margin-top: 0.125rem; line-height: 1.4; }
.price-was { font-size: 0.8125rem; font-weight: 400; color: var(--color-fg-subtle); }
.price-off {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 0.3125rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-fg-default);
    vertical-align: 0.125rem;
}

/* ── Carousels ─────────────────────────────────────────────────────────────── */
.carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: 0 var(--page-gutter);
}

.carousel-header h3 { margin: 0; }

.view-all {
    color: var(--color-fg-default);
    font-size: var(--text-ui);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 4px;
    white-space: nowrap;
}

.carousel-wrapper { position: relative; }

.horizontal-scroll {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-1) var(--page-gutter) var(--space-6);
    /* Without this, mandatory snapping pulls the first card to the scroll edge and past its heading. */
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.horizontal-scroll::-webkit-scrollbar { display: none; }

.horizontal-scroll .product-card {
    min-width: 11.5rem;
    max-width: 11.5rem;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-lg);
    height: var(--control-lg);
    transform: translateY(-50%);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-floating);
    color: var(--color-fg-default);
    cursor: pointer;
    /* ALWAYS VISIBLE (owner's decision 2026-09-18). These used to default to
       opacity:0 / pointer-events:none and were revealed only by
       .carousel-wrapper:hover, so on a desktop you had to already know they were
       there to find them, and on a phone they were switched off entirely by the
       768px block below. A control you have to discover by hovering is a control
       most people never find - the owner did not know the rails could scroll. */
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.scroll-btn.left { left: var(--space-2); }
.scroll-btn.right { right: var(--space-2); }

/* The reveal-on-hover rule is gone - they are visible by default now. The hover
   BACKGROUND stays: it is ordinary feedback that the thing is pressable, not the
   only way to discover it exists. */
@media (hover: hover) and (pointer: fine) {
    .scroll-btn:hover { background: var(--color-bg-muted); }
}

/* Kept for keyboard users: tabbing into a rail must not rely on the default above
   still being visible if anyone ever reinstates fading. */
.carousel-wrapper:focus-within .scroll-btn { opacity: 1; pointer-events: auto; }

/* ── Advertising zones ─────────────────────────────────────────────────────── */
.spot-banner { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); }
.spot-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }

.spot-flag {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    right: auto;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-inverse);
    color: var(--color-fg-inverse);
    font-size: 0.6875rem;
    font-weight: 500;
}

.spot-hero-section {
    position: relative;
    max-width: var(--page-max);
    margin: var(--space-4) auto 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.spot-hero-track { display: flex; transition: transform var(--duration-base) var(--ease-out); }
.spot-hero-slide { min-width: 100%; }
.spot-hero-banner { border-radius: 0; }
.spot-hero-banner img { max-height: 320px; }

.spot-hero-dots {
    position: absolute;
    bottom: var(--space-3);
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

.spot-hero-dots .spot-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 0.55);
    cursor: pointer;
}

.spot-hero-dots .spot-dot.active { background: var(--stone-0); }

.spot-strip-wrap { margin: var(--space-6) var(--page-gutter); }
.spot-strip-banner img { max-height: 180px; }
.spot-wrap { position: relative; }

/* Sponsored strip — visible, never dominant. One disclosure label heads the unit. */
.sp-strip-wrap {
    margin: 0 var(--page-gutter) var(--space-8);
    padding: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.sp-strip-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }

.sp-strip-title {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-fg-muted);
}

.sp-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 148px;   /* fixed: two sold slots must not become two huge tiles */
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    justify-content: start;
    padding-bottom: var(--space-1);
}

.sp-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .sp-tile:hover { border-color: var(--color-border-input); text-decoration: none; }
}

.sp-ph { display: block; aspect-ratio: 1 / 1; background: var(--color-bg-surface); overflow: hidden; }
.sp-ph img { width: 100%; height: 100%; object-fit: contain; }
.sp-noimg { display: block; width: 100%; height: 100%; background: var(--color-bg-muted); }
.sp-price { display: block; padding: var(--space-2) var(--space-2) 0; font-size: var(--text-ui); font-weight: 600; color: var(--color-fg-default); font-variant-numeric: tabular-nums; }
.sp-price s { font-size: 0.75rem; font-weight: 400; color: var(--color-fg-subtle); }
.sp-name { display: block; padding: 0.125rem var(--space-2) var(--space-2); font-size: var(--text-small); line-height: 1.3; color: var(--color-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Search / category results header ──────────────────────────────────────── */
.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--text-small);
    color: var(--color-fg-muted);
}

.crumbs li { min-width: 0; overflow-wrap: anywhere; }
.crumbs li + li::before { content: "›"; margin-right: var(--space-1); color: var(--color-fg-subtle); }
.crumbs a { color: var(--color-fg-muted); text-decoration: none; }
.crumbs [aria-current] { color: var(--color-fg-default); }

@media (hover: hover) and (pointer: fine) {
    .crumbs a:hover { color: var(--color-fg-default); text-decoration: underline; }
}

.results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.results-title {
    margin: 0;
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.results-count { font-size: var(--text-ui); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

.results-suggest { margin: calc(-1 * var(--space-2)) 0 var(--space-6); font-size: var(--text-body); color: var(--color-fg-muted); }
.results-suggest a { font-weight: 600; color: var(--color-fg-default); text-decoration: underline; text-underline-offset: 3px; }

.results-clear {
    margin-left: auto;
    font-size: var(--text-ui);
    font-weight: 500;
    color: var(--color-fg-default);
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 4px;
    white-space: nowrap;
}

/* The pager (.pager*) is styled in style.css — shared with the vendor storefront. */

/* ═════════════════════════════════════════════════════════════════════════════
   Phones and tablets
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* The header's phone layout, --nav-height and --page-gutter are in style.next.css. */

    .home-hero { padding: var(--space-8) var(--page-gutter) var(--space-6); gap: var(--space-6); }
    .home-hero-lede { font-size: var(--text-body); }
    .home-band,
    .category-pills-section { padding-top: var(--space-12); }
    .shops-section { padding-top: var(--space-12); }
    .marketplace { padding: var(--space-12) 0; }

    .horizontal-scroll .product-card { min-width: 10.5rem; max-width: 10.5rem; }
    /* `.scroll-btn { display: none }` used to sit here, so phones had no arrows at
       all. They stay now (owner's decision 2026-09-18) - a touch device can swipe,
       but the arrows are also the only visible signal that there IS more to the
       right. Sized down so they sit over a 10.5rem card without burying it. */
    .scroll-btn { width: var(--control-md); height: var(--control-md); }
    .scroll-btn svg { width: 18px; height: 18px; }

    .spot-hero-section { margin: var(--space-3) var(--page-gutter) 0; }
    .spot-hero-banner img { max-height: 180px; }
    .spot-strip-banner img { max-height: 110px; }
    .sp-strip { grid-auto-columns: 118px; }

}

@media (prefers-reduced-motion: reduce) {
    .horizontal-scroll { scroll-behavior: auto; }
}

/* ── Products first (HOMEPAGE_PRODUCTS_FIRST_PLAN.md) ──────────────────────── */
/* One line for shop owners above the goods; the full pitch is for-shops.php. */
.home-owner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--page-gutter);
    background: var(--color-bg-subtle, #f4f4f2);
    border-bottom: 1px solid var(--color-border-default, #e7e5e4);
    font-size: 0.875rem;
    color: var(--color-fg-muted);
    text-align: center;
}
.home-owner-strip a {
    color: var(--color-fg-default);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.home-market-title {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-8) var(--page-gutter) 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.home-market-title + .category-pills-section { padding-top: var(--space-4); }
/* The goods follow the chips straight away (beats the section's inline 3rem, which search results keep). */
.home-market-title ~ .marketplace { padding-top: var(--space-6) !important; }
.home-market-title ~ .marketplace > :first-child { margin-top: 0; }
.home-market-title + .category-pills-section h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-body, 1rem);
    font-weight: 500;
    color: var(--color-fg-muted);
}

/* The closing band: who Spacelet is for, after the goods and the shops. */
/* Same rhythm as .home-band: space-16 between sections (space-12 on phones), split around the rule. */
.home-sell-band {
    max-width: var(--page-max);
    margin: var(--space-8) auto 0;
    padding: var(--space-8) var(--page-gutter) var(--space-16);
    border-top: 1px solid var(--color-border-default, #e7e5e4);
}
/* for-shops.php: the band below the intro brings its own top space; the intro's bottom padding doubled it. */
.home-hero { padding-bottom: 0; }
/* Homepage: Discover Shops already ends with space-4 of its own. */
.shops-section + .home-sell-band { margin-top: var(--space-4); }
@media (max-width: 768px) {
    .home-hero { padding-bottom: 0; }
    .home-sell-band { margin-top: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-12); }
    .shops-section + .home-sell-band { margin-top: var(--space-2); }
}
.home-sell-band h2 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
}
.home-sell-band p {
    margin: 0 0 var(--space-6);
    max-width: 40rem;
    color: var(--color-fg-muted);
}
.home-sell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* One left edge on wide screens. --page-gutter is a percentage: inside .marketplace it is 5% of the
   75rem column, but on these full-width sections it is 5% of the WINDOW, so past 75rem the headings and
   chips drifted right of the product rails (35 px on a 1920 px screen). Pin them to the column's figure. */
@media (min-width: 75rem) {
    .home-market-title,
    .category-pills-section,
    .shops-section,
    .home-sell-band,
    .home-hero,
    .home-band {
        padding-left: calc(var(--page-max) * 0.05);
        padding-right: calc(var(--page-max) * 0.05);
    }
}