/* ============================================================
   Browse Playlists - Window-Shopping Edition (May 2026 revamp)

   Mobile-first single-column layout. 88% of users are on mobile;
   the desktop view derives from the mobile rules with wider widths,
   not the other way around.

   Structure:
     1. Page shell + header
     2. Sticky search bar
     3. Sticky genre chip row (horizontal scroll)
     4. Sort + Filters button row
     5. Active-filter strip
     6. Playlist row (anatomy ported from auto_submit.css)
     7. "More" toggle expand/collapse
     8. Sticky footer (cart)
     9. Bottom-sheet (sort + filters)
    10. Cart submit modal
    11. Loading / empty states
    12. Pagination
    13. Mobile / tablet / desktop tweaks
   ============================================================ */

/* ---------- 1. Page shell + header ---------- */
.browse-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 120px; /* bottom padding clears sticky footer */
    color: #1a1a1a;
}

.browse-header {
    padding: 16px 0 8px;
    text-align: center;
}

.browse-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.browse-header p {
    font-size: 14px;
    color: #5f6368;
    margin: 0;
}

@media (min-width: 600px) {
    .browse-container {
        padding: 0 24px 140px;
    }
    .browse-header h1 {
        font-size: 28px;
    }
}

/* ---------- 2. Sticky search bar ---------- */
/* Sticky band groups search + chips + sort/filter buttons so they move as
   one unit when the user scrolls. Keeps the discovery surface always-on. */
.browse-sticky-band {
    position: sticky;
    top: 0;
    z-index: 20;
    background: white;
    margin: 0 -16px;
    padding: 8px 16px 8px;
    border-bottom: 1px solid #ececec;
}

@media (min-width: 600px) {
    .browse-sticky-band {
        margin: 0 -24px;
        padding: 12px 24px 12px;
    }
}

.browse-search-wrapper {
    position: relative;
    margin-bottom: 8px;
}

.browse-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    pointer-events: none;
    width: 18px;
    height: 18px;
}

/* Two-class selector beats main.css bare-input globals (border-radius 0,
   padding 0.75rem, default border). See CLAUDE.md "main.css globals". */
.browse-container .browse-search-input {
    width: 100%;
    height: 44px; /* 44px min touch target */
    padding: 0 14px 0 42px;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    border: 1px solid #d0d0d0;
    border-radius: 22px;
    background: #f8f9fa;
    color: #1a1a1a;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.browse-container .browse-search-input:focus {
    outline: none;
    border-color: #1db954;
    background: white;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.12);
}

.browse-container .browse-search-input::placeholder {
    color: #9aa0a6;
}

/* ---------- 3. Genre chip row (horizontal scroll) ---------- */
/* Wrapper exists so the desktop scroll arrows can absolute-position
   themselves over the row's edges. The row itself still owns the
   overflow + scroll behavior. */
.browse-chip-row-wrap {
    position: relative;
}

.browse-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding: 2px 0;
    margin-bottom: 8px;
    scroll-behavior: smooth;
}

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

/* Desktop scroll arrows. JS toggles `.visible` based on actual scroll
   position so the arrows only show when there's something to scroll
   to — at the left edge only the right arrow shows, at the right edge
   only the left arrow shows, and if everything fits without overflow
   neither appears. Hidden entirely on mobile (swipe is the affordance
   there; the arrows would just take up space). */
.chip-row-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: white;
    border: 1px solid #d0d0d0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 5;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: #1a1a1a;
    padding: 0 0 2px; /* nudge chevron up a hair to optical-center */
    appearance: none;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.chip-row-arrow.visible {
    display: flex;
}

.chip-row-arrow:hover {
    background: #f7f8fa;
}

.chip-row-arrow-left {
    left: -8px;
}

.chip-row-arrow-right {
    right: -8px;
}

/* Subtle fade gradient on the edges when scrollable — hints at the
   overflow even before the user notices the arrow. Pseudo-elements
   on the wrapper so they don't move with scroll. Desktop only;
   mobile uses native momentum scroll affordances. */
@media (min-width: 600px) {
    .browse-chip-row-wrap::before,
    .browse-chip-row-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 4;
    }
    .browse-chip-row-wrap::before {
        left: 0;
        background: linear-gradient(to right, white, rgba(255,255,255,0));
    }
    .browse-chip-row-wrap::after {
        right: 0;
        background: linear-gradient(to left, white, rgba(255,255,255,0));
    }
    .browse-chip-row-wrap.can-scroll-left::before,
    .browse-chip-row-wrap.can-scroll-right::after {
        opacity: 1;
    }
}

/* Hide arrows entirely on mobile — swipe is the right affordance, and
   absolute-positioned 32px circles would interfere with chip tap zones. */
@media (max-width: 599px) {
    .chip-row-arrow { display: none !important; }
}

.browse-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    height: 34px;
    background: #f0f1f3;
    border: 1px solid transparent;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 500;
    color: #303134;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.browse-chip:hover {
    background: #e6e7ea;
}

.browse-chip.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

.browse-chip.active:hover {
    background: #000;
}

/* Override main.css's global `button:focus { outline: 2px solid #1a1a1a;
   outline-offset: 2px; }`. The chip row has overflow-x: auto, which the
   spec implicitly upgrades to overflow-y: auto on the same axis — so the
   outline drawn 2px outside the chip's box gets clipped at the top and
   bottom (visible as the focus ring disappearing into the row's edges,
   especially on desktop after a click). Draw the indicator INSIDE the
   chip's borders via inset box-shadow instead; nothing to clip. */
.browse-chip:focus {
    outline: none;
}

.browse-chip:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #1a1a1a;
}

.browse-chip.active:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
}

.browse-chip .chip-count {
    font-size: 11.5px;
    opacity: 0.7;
    margin-left: 2px;
}

.browse-chip.active .chip-count {
    opacity: 0.85;
}

/* "All genres" trigger at the end of the chip row. Outlined (transparent
   fill) with the brand accent so it reads as "different surface" rather
   than another filter chip. Lives at the end of the scroll row on mobile;
   sits inline with the other chips on desktop. */
.browse-chip.chip-browse-all {
    background: transparent;
    color: #1db954;
    border-color: #1db954;
    font-weight: 600;
}

.browse-chip.chip-browse-all:hover {
    background: rgba(29, 185, 84, 0.08);
}

.browse-chip.chip-browse-all .chip-chevron {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.8;
}

/* ---------- 4. Sort + Filters button row ---------- */
.browse-controls-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.browse-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.browse-control-btn:hover {
    border-color: #1a1a1a;
}

.browse-control-btn .control-chevron {
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.7;
}

.browse-control-btn.has-active-filters {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: white;
}

.browse-control-btn .control-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: white;
    color: #1a1a1a;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
}

/* ---------- 5. Active-filter strip ---------- */
/* Only rendered when ≥1 filter is applied. Each active chip is removable;
   "Clear" wipes all filters back to defaults. */
.browse-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 4px;
}

.browse-active-filters:empty {
    display: none;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px 5px 10px;
    background: #1a1a1a;
    color: white;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
}

.active-filter-chip button {
    appearance: none;
    background: none;
    border: 0;
    color: white;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.85;
}

.active-filter-chip button:hover {
    opacity: 1;
}

.active-filter-clear {
    appearance: none;
    background: none;
    border: 0;
    color: #1db954;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 6px;
}

/* Subtle "N genres" pill — not removable here (toggle in the chip row
   above instead). Lower visual weight than the actual filter chips so
   it reads as informational rather than a control. */
.active-filter-summary {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    font-size: 12px;
    color: #5f6368;
    background: transparent;
    border: 1px dashed #d0d0d0;
    border-radius: 14px;
}

/* ---------- 6. Playlist row (anatomy ported from auto_submit.css) ---------- */
/* Single-column stacked rows. Mobile-first sizing; touch-friendly checkbox. */
.browse-results-meta {
    font-size: 12.5px;
    color: #5f6368;
    padding: 12px 0 8px;
}

/* In-flight fetch: inline spinner glyph before "Loading playlists…" text.
   Survives textContent updates because it's a pseudo-element. Sized to
   match the 12.5px meta text so it doesn't break the line height. */
.browse-results-meta.is-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.browse-results-meta.is-loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #dcdcdc;
    border-top-color: #1db954;
    border-radius: 50%;
    animation: browseSpin 0.9s linear infinite;
    flex-shrink: 0;
}

.browse-playlist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.15s ease;
}

/* Dim is applied by browse.js on a 120ms delay so cached responses
   (<300ms target) don't flicker. pointer-events:none keeps users from
   clicking a stale card mid-swap. */
.browse-playlist-list.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.browse-playlist-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.browse-playlist-card:hover {
    border-color: #1db954;
    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.08);
}

.browse-playlist-card.selected {
    border-color: #1DB954;
    background: #f0fdf4;
}

.browse-card-inner {
    padding: 12px;
    padding-right: 40px; /* room for the absolute checkbox */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.browse-checkbox {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.browse-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #1db954;
}

.browse-playlist-image {
    width: 64px;
    flex-shrink: 0;
}

.browse-playlist-image img {
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.browse-playlist-image-fallback {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0a6;
    font-size: 24px;
}

.browse-playlist-info {
    flex: 1;
    min-width: 0;
}

.browse-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding-right: 4px;
}

.browse-playlist-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
    overflow-wrap: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.browse-curator-line {
    font-size: 13px;
    color: #555;
    margin: 3px 0 0 0;
    line-height: 1.4;
}

.browse-curator-line .dot-sep {
    color: #c8c8c8;
    margin: 0 4px;
}

/* Inline genre signal on the visible card. Top 2 only — anything more
   crowds the row. The full list is in "More" (capped to 5) and the
   playlist detail page. Dot-separated text, not pills, to keep the
   visual hierarchy underneath the name/curator/stats. */
.browse-genres-row {
    margin-top: 3px;
    font-size: 12.5px;
    color: #5f6368;
    line-height: 1.4;
}

.browse-genre-tag {
    display: inline;
    font-weight: 500;
}

.browse-genre-tag + .browse-genre-tag::before {
    content: '·';
    color: #c8c8c8;
    margin: 0 5px;
    font-weight: 400;
}

.browse-stats-line {
    margin-top: 6px;
    font-size: 12.5px;
    color: #5f6368;
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
}

.browse-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.browse-stat i {
    font-size: 11px;
    opacity: 0.7;
}

/* Engagement %, tracks count — qualifying info gated to tablet+. Mobile
   keeps the row focused on the two decisional signals (streams + saves). */
.browse-stat-desktop {
    display: none;
}

@media (min-width: 600px) {
    .browse-stat-desktop {
        display: inline-flex;
    }
}

.browse-card-footer {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

/* Quality tier badge — replaces the auto-submit match badge. The 5-star
   pattern matches the rest of the app (manage page, playlist detail). */
.quality-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #f0f0f0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #5a5a5a;
}

.quality-tier-badge.tier-elite { background: #fff4d6; color: #6b4f00; }
.quality-tier-badge.tier-premium { background: #ede7ff; color: #4c3a8a; }
.quality-tier-badge.tier-standard { background: #d4edda; color: #155724; }
.quality-tier-badge.tier-starter { background: #fff3cd; color: #856404; }
.quality-tier-badge.tier-entry { background: #f1f1f1; color: #5a5a5a; }

.quality-tier-stars {
    letter-spacing: 0.5px;
}

/* Stars are visual decoration redundant with the color-coded label.
   Hide them on mobile to reclaim ~50px of footer width; the label
   alone is enough for at-a-glance tier assessment. Tablet+ keeps them
   for visual rhythm. */
@media (max-width: 599px) {
    .quality-tier-stars {
        display: none;
    }
}

/* Footer alignment: tier badge anchors the left, cost in the middle,
   More button pushed to the right via margin-left:auto on the toggle. */
.browse-card-footer .recommendation-cost {
    /* No-op rule — kept for future tweaks; cost sits between tier and More */
}

.recommendation-cost {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Inline badges on the curator line — small, same baseline as the
   curator name, ~0.85rem so they don't overpower the text. Each gets
   a small left margin so they spread without crowding. Colors match
   the canonical mappings in main.css for cross-page consistency. */
.browse-curator-line .verified-curator-badge,
.browse-curator-line .course-verified-badge,
.browse-curator-line .actively-growing-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.9rem;
    cursor: default;
    vertical-align: -1px;
}

.browse-curator-line .verified-curator-badge { color: #1da1f2; }
.browse-curator-line .course-verified-badge { color: #6b46c1; }
.browse-curator-line .actively-growing-badge { color: #10b981; }

/* Legacy fallback when a badge is rendered outside the curator line
   (e.g., a future caller). Keeps growth-green so the icon never goes
   un-styled. */
.actively-growing-badge {
    color: #10b981;
    font-size: 0.85rem;
    cursor: default;
}

.browse-spotify-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1db954;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.15s ease;
    width: fit-content;
    margin-top: 8px;
}

.browse-spotify-link:hover {
    background: #1aa34a;
}

/* Tablet+: slightly larger thumbnail and roomier padding. */
@media (min-width: 600px) {
    .browse-card-inner {
        padding: 14px;
        padding-right: 44px;
        gap: 14px;
    }
    .browse-checkbox {
        top: 14px;
        right: 14px;
    }
    .browse-playlist-image,
    .browse-playlist-image img,
    .browse-playlist-image-fallback {
        width: 80px;
        height: 80px;
    }
    .browse-playlist-name {
        font-size: 16px;
    }
}

/* ---------- 7. "More" toggle + expanded body ---------- */
.more-toggle {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #1db954;
    cursor: pointer;
    user-select: none;
}

.more-toggle:hover {
    color: #1aa34a;
}

.more-toggle .more-chevron {
    font-size: 9px;
    margin-left: 2px;
}

.match-details-body {
    /* Mobile uses full card width — indenting past the thumbnail (88px)
       leaves only ~220px on a 375px viewport, which forces genre pills
       to single-column and action links to stack vertically. Tablet+
       restores the indent so the expansion visually aligns with the
       info column above. */
    padding: 10px 12px 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 12.5px;
    color: #5f6368;
    line-height: 1.5;
}

@media (min-width: 600px) {
    .match-details-body {
        padding-left: 108px;
    }
}

/* Action links sit in a flex row so primary (Spotify) and secondary
   (See full details) stay side-by-side. Wraps gracefully if the
   labels grow. */
.match-details-body .more-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.match-details-body .more-actions .browse-spotify-link,
.match-details-body .more-actions .more-detail-link {
    margin-top: 0; /* parent gap handles spacing now */
}

/* Detail-page link: same shape as the Spotify pill but neutral palette,
   so the green Spotify link reads as the primary action. */
.match-details-body .more-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1a1a1a;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.match-details-body .more-detail-link:hover {
    background: #000;
}

.match-details-body[hidden] {
    display: none !important;
}

.match-details-body .more-meta,
.match-details-body .more-curator-meta {
    margin-bottom: 6px;
    color: #5f6368;
}

/* Provenance line: small, muted footnote indicating whether the streams
   number above is verified S4A data or curator-reported. Scoped under
   .match-details-body so main.css globals on bare element selectors
   don't override the size/spacing. */
.match-details-body .more-provenance {
    margin-top: 6px;
    font-size: 11.5px;
    color: #9aa0a6;
}

/* Dot separators used both on the curator line and inside the More
   block. Scoped here so the More-block usage doesn't depend on the
   .browse-curator-line scoping that landed earlier. */
.match-details-body .dot-sep {
    color: #c8c8c8;
    margin: 0 4px;
}

.match-details-body .more-genres {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.match-details-body .more-genre-pill {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 10px;
    font-size: 11.5px;
    color: #303134;
}

/* "+N more" indicator at the end of the capped genre list. Visually
   subordinate to the real genre pills — same shape, lighter weight. */
.match-details-body .more-genre-pill-extra {
    background: transparent;
    color: #9aa0a6;
    font-style: italic;
}

/* ---------- 8. Sticky footer (cart) ---------- */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 30;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.25s ease;
}

.sticky-footer.visible {
    transform: translateY(0);
}

.sticky-footer-content {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sticky-footer-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sticky-footer-count {
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
}

.sticky-footer-cost {
    font-size: 12.5px;
    color: #5f6368;
}

.sticky-footer-cta {
    flex-shrink: 0;
    appearance: none;
    height: 44px;
    padding: 0 18px;
    background: #1db954;
    color: white;
    border: 0;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.sticky-footer-cta:hover {
    background: #1aa34a;
}

.sticky-footer-cta:active {
    transform: scale(0.98);
}

.sticky-footer-cta:disabled {
    background: #c8e6c9;
    cursor: not-allowed;
}

/* ---------- 9. Bottom-sheet (sort + filters) ---------- */
.browse-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.browse-sheet-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.browse-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 41;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(110%);
    /* Opacity + visibility are belt-and-suspenders for the desktop case:
       the @media (min-width: 768px) block below REPLACES the off-screen
       translate with an in-view centered one, so transform alone can't
       hide the modal. Without opacity/visibility, the desktop close button
       just slides the modal 30px — it never disappears. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.browse-sheet.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s;
}

.browse-sheet-handle {
    width: 40px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.browse-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
    flex-shrink: 0;
}

.browse-sheet-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.browse-sheet-close {
    appearance: none;
    background: none;
    border: 0;
    font-size: 22px;
    color: #5f6368;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.browse-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 16px;
    -webkit-overflow-scrolling: touch;
}

.browse-sheet-group {
    margin-bottom: 20px;
}

.browse-sheet-group:last-child {
    margin-bottom: 0;
}

.browse-sheet-group-title {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5f6368;
    margin: 0 0 8px;
}

.sheet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 14.5px;
}

.sheet-option:last-child {
    border-bottom: 0;
}

.sheet-option input[type="radio"],
.sheet-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #1db954;
    cursor: pointer;
}

.sheet-option-label {
    flex: 1;
}

.sheet-option-hint {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #9aa0a6;
}

.browse-sheet-genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.browse-sheet-genre-grid .browse-chip {
    flex: 0 0 auto;
}

.browse-sheet-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #ececec;
    background: white;
    flex-shrink: 0;
}

.browse-sheet-footer button {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    border: 1px solid transparent;
}

.sheet-btn-reset {
    background: white;
    color: #1a1a1a;
    border-color: #d0d0d0;
}

.sheet-btn-apply {
    background: #1a1a1a;
    color: white;
}

/* ---------- 9b. Genres sheet (search + sections) ---------- */
/* Search bar sits between the header and the scrollable body. Fixed
   height so it doesn't shrink under scrolling content. */
.browse-genres-search-wrap {
    position: relative;
    padding: 8px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.browse-genres-search-icon {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9aa0a6;
    pointer-events: none;
}

/* Two-class selector to beat main.css bare-input globals — same pattern
   as the top search input. 16px font keeps iOS from zooming on focus. */
.browse-sheet .browse-genres-search-input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 42px;
    font-size: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    background: #f8f9fa;
    color: #1a1a1a;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.browse-sheet .browse-genres-search-input:focus {
    outline: none;
    border-color: #1db954;
    background: white;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.12);
}

.browse-sheet .browse-genres-search-input::placeholder {
    color: #9aa0a6;
}

/* Section headers — same uppercase-eyebrow as elsewhere in the app. */
.genres-section {
    margin-bottom: 20px;
}

.genres-section:last-child {
    margin-bottom: 0;
}

.genres-section-title {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5f6368;
    margin: 0 0 8px;
}

/* Chip grid inside the sheet — wraps naturally, breathing room between
   chips so the list of ~750 is scannable. */
.genres-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Result-count meta when searching ("3 matches") */
.genres-result-count {
    font-size: 12.5px;
    color: #5f6368;
    margin-bottom: 8px;
}

/* No-match empty state */
.genres-empty {
    padding: 40px 16px;
    text-align: center;
    color: #5f6368;
}

.genres-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.genres-empty p {
    margin: 4px 0;
    font-size: 14px;
}

.genres-empty-hint {
    color: #9aa0a6;
    font-size: 12.5px !important;
}

@media (min-width: 768px) {
    /* On tablet+ the sheet centers as a modal rather than docking to the
       bottom edge — still mobile-friendly on smaller windows. */
    .browse-sheet {
        left: 50%;
        right: auto;
        bottom: 50%;
        transform: translate(-50%, calc(50% + 30px));
        max-width: 480px;
        width: calc(100% - 40px);
        border-radius: 16px;
        max-height: 80vh;
    }
    .browse-sheet.visible {
        transform: translate(-50%, 50%);
    }
}

/* ---------- 10. Cart submit modal ---------- */
.cart-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding: 0;
}

.cart-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.cart-modal-content {
    background: white;
    width: 100%;
    max-height: 92vh;
    /* iOS Safari ignores 100vh when the URL bar is on screen, so the
       modal can overflow off the visible viewport. svh is the
       small-viewport height (URL bar showing) and is the safe upper
       bound. Fallback to vh for older browsers. */
    max-height: 92svh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
}

.cart-modal.visible .cart-modal-content {
    transform: translateY(0);
}

.cart-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart-modal-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.cart-modal-subtitle {
    font-size: 12.5px;
    color: #5f6368;
    margin: 2px 0 0;
}

.cart-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 18px 12px;
    min-height: 0; /* allow flex child to shrink below its content size */
}

.cart-modal-footer {
    display: flex;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid #ececec;
    background: white;
    flex-shrink: 0;
}

.cart-modal-footer button {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    border: 1px solid transparent;
}

.cart-btn-back {
    background: white;
    color: #1a1a1a;
    border-color: #d0d0d0;
    flex: 0 0 auto;
    padding: 0 20px;
}

.cart-btn-confirm {
    background: #1db954;
    color: white;
}

.cart-btn-confirm:hover {
    background: #1aa34a;
}

.cart-btn-confirm:disabled {
    background: #c8e6c9;
    cursor: not-allowed;
}

.cart-track-input-wrapper {
    position: relative;
    margin: 12px 0;
}

.cart-modal-content .cart-track-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    font-size: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 24px;
    background: #f8f9fa;
}

.cart-modal-content .cart-track-input:focus {
    outline: none;
    border-color: #1db954;
    background: white;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.12);
}

.cart-track-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.cart-track-results {
    margin-top: 8px;
    border: 1px solid #ececec;
    border-radius: 10px;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
}

/* SpotifyTrackInput renders results with class `.track-result` (not the
   `.cart-track-result` prefix the modal was originally built around).
   Without these scoped rules, the raw <img> renders at intrinsic size
   (~640px album art) and blows the modal off-screen. Mirrors the
   `.track-result` shape from auto_submit.css so the search affordance
   matches the auto-submit surface visually. */
.cart-modal-content .track-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    min-height: 56px;
    transition: background 0.1s ease;
}

.cart-modal-content .track-result:last-child {
    border-bottom: 0;
}

.cart-modal-content .track-result:hover,
.cart-modal-content .track-result.focused {
    background: #f3f4f6;
}

.cart-modal-content .track-result-image {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.cart-modal-content .track-result-info {
    flex: 1;
    min-width: 0;
}

.cart-modal-content .track-result-name {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-modal-content .track-result-artist {
    font-size: 12.5px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-modal-content .track-result-duration {
    font-size: 12.5px;
    color: #9ca3af;
    flex-shrink: 0;
}

.cart-modal-content .track-search-status {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.cart-selected-track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f7f8fa;
    border-radius: 10px;
    margin: 0 0 12px;
}

.cart-selected-track img {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.cart-selected-track-info {
    flex: 1;
    min-width: 0;
}

.cart-selected-track-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.cart-selected-track-artist {
    font-size: 12.5px;
    color: #5f6368;
    margin: 2px 0 0;
}

.cart-change-track {
    appearance: none;
    background: none;
    border: 0;
    color: #1db954;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

/* Cost breakdown (Stripe-style, mirrors auto_submit.css's .modal-summary).
   Header row anchors a big playlist count for at-a-glance scale, then
   line items per cost component, divider, then payment section. */
.cart-summary-list {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px;
    margin: 0 0 12px;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: #303134;
}

.cart-summary-row strong {
    color: #1a1a1a;
}

.cart-summary-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-summary-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.cart-summary-header .cart-playlist-count {
    font-size: 28px;
    font-weight: 700;
    color: #1DB954;
    line-height: 1;
}

.cart-summary-header .cart-playlist-label {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.cart-summary-row .cart-summary-value {
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.cart-summary-row.cart-balance-line {
    color: #1DB954;
}

.cart-summary-row.cart-balance-line .cart-summary-value {
    color: #1DB954;
}

.cart-summary-row.cart-bonus-line {
    color: #16a34a;
}

.cart-summary-row.cart-bonus-line .cart-summary-value {
    color: #16a34a;
    font-weight: 600;
}

.cart-summary-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0 6px;
}

.cart-summary-section-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    padding: 2px 0;
}

.cart-summary-total {
    font-size: 15px;
    font-weight: 600;
    padding-top: 6px;
}

.cart-summary-total.covered-by-balance {
    color: #1DB954;
}

.cart-balance-note {
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 400;
}

/* "Playlist X removed because already submitted" warning — shows above
   the breakdown when validate-selection trimmed the cart. */
.cart-validation-warning {
    background: #fff4e6;
    border: 1px solid #ffd699;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #6b3a00;
}

.cart-validation-warning strong {
    display: block;
    margin-bottom: 4px;
    color: #856404;
}

.cart-validation-warning ul {
    margin: 0;
    padding-left: 18px;
}

.cart-validation-warning li {
    padding: 1px 0;
    color: #6b6b6b;
}

/* Editorial add-on shipped via the shared `components/editorial_addon.html`
   include — its own styles handle the gradient + tier cards. Just give
   it tidy spacing inside the modal body. */
.cart-modal-content #editorial-addon-section {
    margin: 0 0 12px;
}

/* Message-to-curators block. Single bordered container that wraps both the
   summary toggle (with comment icon + chevron) and the expanded textarea
   region. Mirrors `.modal-message-details` from auto_submit.css so users
   see the same affordance on both surfaces. */
.cart-message-details {
    margin: 0 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.cart-message-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 13.5px;
    color: #555;
    transition: background 0.15s ease;
    list-style: none;
    border-radius: 10px;
}

.cart-message-toggle::-webkit-details-marker {
    display: none;
}

.cart-message-toggle:hover {
    background: #f8f8f8;
}

.cart-message-toggle > i:first-child {
    color: #888;
    font-size: 14px;
}

.cart-message-toggle > span {
    flex: 1;
}

.cart-message-toggle .toggle-chevron {
    font-size: 11px;
    color: #999;
    transition: transform 0.2s ease;
}

.cart-message-details[open] .cart-message-toggle .toggle-chevron {
    transform: rotate(180deg);
}

.cart-message-details[open] .cart-message-toggle {
    border-bottom: 1px solid #e5e5e5;
    border-radius: 10px 10px 0 0;
}

.cart-message-section {
    padding: 12px 14px 14px;
}

/* Two-class selector to beat the main.css bare-textarea globals
   (1px border, 0 border-radius, 0.75rem padding). The textarea is
   visually flush with the surrounding container — the bordered box is
   the parent <details>, not the textarea itself. */
.cart-modal-content .cart-message-input {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    background: #fff;
    color: #1a1a1a;
    box-sizing: border-box;
}

.cart-modal-content .cart-message-input:focus {
    outline: none;
    border-color: #1db954;
    background: white;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.12);
}

.cart-message-hint {
    text-align: right;
    font-size: 11.5px;
    color: #9aa0a6;
    margin: 6px 0 0;
}

.cart-error {
    background: #fff5f5;
    color: #c92a2a;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin: 8px 0;
    border: 1px solid #ffd6d6;
}

@media (min-width: 768px) {
    .cart-modal {
        align-items: center;
        padding: 24px;
    }
    .cart-modal-content {
        max-width: 560px;
        border-radius: 16px;
        max-height: 86vh;
        max-height: 86svh;
    }
}

/* ---------- 10b. Sign-in gate modal ---------- */
/* Triggered when an anonymous visitor taps Submit on the cart. Cart
   lives in localStorage so it survives the OAuth round trip; this
   modal is just the auth wall. Layout mirrors auto_submit's inline
   sign-in modal so the experience matches between surfaces. */
.signin-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.signin-gate-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.signin-gate-card {
    background: white;
    border-radius: 16px;
    padding: 22px 22px 18px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.25s ease;
}

.signin-gate-overlay.visible .signin-gate-card {
    transform: translateY(0);
}

.signin-gate-card h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.signin-gate-card .signin-gate-sub {
    color: #5f6368;
    font-size: 13.5px;
    margin: 0 0 16px;
    line-height: 1.4;
}

.signin-gate-card .signin-gate-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 23px;
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.signin-gate-card .signin-gate-google:hover {
    background: #f7f8fa;
    border-color: #1a1a1a;
}

.signin-gate-card .signin-gate-google svg {
    width: 18px;
    height: 18px;
}

.signin-gate-card .signin-gate-or {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9aa0a6;
    font-size: 12px;
    margin: 12px 0;
}

.signin-gate-card .signin-gate-or::before,
.signin-gate-card .signin-gate-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.signin-gate-card .signin-gate-email-row {
    display: flex;
    gap: 8px;
}

.signin-gate-card .signin-gate-email-btn {
    flex: 1;
    height: 42px;
    border-radius: 21px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1a1a1a;
}

.signin-gate-card .signin-gate-email-btn.primary {
    background: #1a1a1a;
    color: white;
}

.signin-gate-card .signin-gate-email-btn.secondary {
    background: white;
    color: #1a1a1a;
}

.signin-gate-card .signin-gate-perk {
    font-size: 12px;
    color: #6b7280;
    margin: 14px 0 6px;
}

.signin-gate-card .signin-gate-cancel {
    appearance: none;
    background: none;
    border: 0;
    color: #6b7280;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
    padding: 6px;
}

.signin-gate-card .signin-gate-terms {
    font-size: 11px;
    color: #9aa0a6;
    margin: 12px 0 0;
    line-height: 1.4;
}

.signin-gate-card .signin-gate-terms a {
    color: #6b7280;
}

/* ---------- 11. Loading / empty states ---------- */
.browse-loading,
.browse-empty {
    padding: 60px 16px;
    text-align: center;
    color: #5f6368;
}

.browse-loading .browse-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #ececec;
    border-top-color: #1db954;
    border-radius: 50%;
    animation: browseSpin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes browseSpin {
    to { transform: rotate(360deg); }
}

.browse-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.browse-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px;
}

.browse-empty-text {
    font-size: 14px;
    margin: 0 0 12px;
}

.browse-empty-reset {
    appearance: none;
    background: #1a1a1a;
    color: white;
    border: 0;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.browse-card-skeleton {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    height: 96px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.browse-card-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent);
    animation: skeletonShimmer 1.4s infinite;
}

@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------- 12. Pagination ---------- */
.browse-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 8px;
}

.browse-pagination button {
    appearance: none;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    height: 36px;
    min-width: 36px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.browse-pagination button:hover:not(:disabled) {
    border-color: #1a1a1a;
}

.browse-pagination button:disabled {
    color: #c0c0c0;
    cursor: not-allowed;
}

.browse-pagination button.active {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

.browse-pagination-info {
    font-size: 12.5px;
    color: #5f6368;
    text-align: center;
    padding-top: 4px;
}

/* ---------- 13. Tablet / desktop tweaks ---------- */
@media (min-width: 1024px) {
    /* Wider browse on desktop; rows stay single-column but get more room. */
    .browse-container {
        max-width: 880px;
    }
}