/* =========================================================
   CAMPUS MARKETPLACE
   PHASE 1 — MOBILE FIRST
   ========================================================= */

:root {
    --blue: #1554d1;
    --blue-dark: #0e3fa8;
    --blue-light: #edf3ff;

    --text: #111827;
    --muted: #667085;
    --light-muted: #98a2b3;

    --border: #e2e6ed;
    --border-light: #edf0f4;

    --green: #16803c;
    --green-bg: #e9f7e9;

    --red: #d92d20;
    --orange: #f79009;

    --white: #ffffff;
    --background: #ffffff;
    --surface: #f8fafc;

    --radius: 16px;
    --radius-sm: 10px;

    --max-width: 1120px;

    --shadow-sm:
        0 2px 8px rgba(16, 24, 40, 0.05);

    --shadow-md:
        0 8px 24px rgba(16, 24, 40, 0.08);

    --shadow-blue:
        0 7px 20px rgba(21, 84, 209, 0.22);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   APP
   ========================================================= */

.app {
    width: min(100%, var(--max-width));

    min-height: 100vh;

    margin: 0 auto;

    padding:
        0 24px 40px;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;

    z-index: 20;
}

.brand {
    display: flex;
    flex-direction: column;

    line-height: 0.9;

    user-select: none;
}

.brand-campus {
    color: var(--blue);

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.7px;
}

.brand-marketplace {
    color: var(--text);

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.8px;
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 9px;
}


/* =========================================================
   HEADER BUTTONS
   ========================================================= */

.header-icon,
.profile-button {
    position: relative;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 50%;

    color: var(--text);

    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.header-icon:hover,
.profile-button:hover {
    background: #f8faff;
    border-color: #c9d3e3;

    transform: translateY(-1px);
}

.header-icon:active,
.profile-button:active {
    transform: scale(0.96);
}

.header-icon svg,
.profile-button svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    top: 5px;
    right: 5px;

    background: #ef4444;

    border: 2px solid white;

    border-radius: 50%;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    width: 100%;

    min-height: 235px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: center;

    gap: 20px;

    padding:
        22px 0 28px;

    overflow: hidden;
}

.hero-content {
    min-width: 0;

    animation:
        heroTextIn 450ms ease both;
}

.hero-content h1 {
    color: var(--blue);

    font-size: clamp(34px, 5vw, 52px);

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -2.2px;
}

.hero-content p {
    margin-top: 15px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.45;

    font-weight: 400;
}

.hero-illustration {
    width: 300px;

    justify-self: end;

    display: flex;
    align-items: center;
    justify-content: center;

    animation:
        heroImageIn 500ms 80ms ease both;
}

.hero-illustration svg {
    width: 100%;
    max-width: 300px;

    height: auto;

    overflow: visible;
}


/* Illustration */

.graduation-cap {
    transform-origin: center;
    animation:
        capFloat 3.5s ease-in-out infinite;
}

.books {
    transform-origin: bottom center;
}

.plant {
    transform-origin: bottom center;
}

.tassel {
    transform-origin: 205px 79px;

    animation:
        tasselSwing 3s ease-in-out infinite;
}

.cap-top {
    fill: var(--blue);
}

.cap-body {
    fill: #1d63df;
}

.cap-hole {
    fill: #0e3fa8;
}

.graduation-cap path,
.books path,
.plant path {
    stroke: #0e3fa8;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.books path {
    fill: #ffffff;
}

.plant path {
    fill: none;
}

.plant path:nth-child(n + 2) {
    stroke: #16803c;
}

.plant path:nth-last-child(2),
.plant path:nth-last-child(1) {
    fill: #e9f7e9;
    stroke: #16803c;
}

.gold-tassel {
    fill: var(--orange);
    stroke: #c86d00 !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-section {
    width: 100%;

    margin-bottom: 32px;
}

.search-box {
    width: 100%;

    min-height: 58px;

    display: flex;
    align-items: center;

    padding:
        0 17px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 17px;

    box-shadow: var(--shadow-sm);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.search-box:focus-within {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(21, 84, 209, 0.08);
}

.search-box svg {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    margin-right: 11px;

    fill: none;

    stroke: var(--muted);

    stroke-width: 1.8;

    stroke-linecap: round;
}

.search-box input {
    width: 100%;

    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 16px;
}

.search-box input::placeholder {
    color: #8a94a6;
}

.search-box input::-webkit-search-cancel-button {
    cursor: pointer;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
    width: 100%;
}

.section + .section {
    margin-top: 34px;
}

.section-header {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}

.section-header h2 {
    color: var(--text);

    font-size: 23px;

    font-weight: 750;

    line-height: 1.2;

    letter-spacing: -0.5px;
}

.view-all {
    flex: 0 0 auto;

    background: transparent;

    color: var(--blue);

    font-size: 14px;

    font-weight: 650;

    transition:
        color 150ms ease,
        transform 150ms ease;
}

.view-all:hover {
    color: var(--blue-dark);

    transform: translateX(2px);
}

.view-all:active {
    transform: scale(0.97);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.categories-section {
    margin-bottom: 2px;
}

.category-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        18px 12px;
}

.category {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    gap: 7px;

    background: transparent;

    color: var(--text);

    text-align: center;

    transition:
        transform 160ms ease;
}

.category:hover {
    transform: translateY(-3px);
}

.category:active {
    transform: scale(0.96);
}

.category-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 17px;

    font-size: 30px;

    box-shadow:
        0 2px 5px rgba(16, 24, 40, 0.03);

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.category:hover .category-icon {
    border-color: #b9c8e8;

    background: #f8faff;

    box-shadow:
        0 6px 15px rgba(21, 84, 209, 0.08);
}

.category.active .category-icon {
    border-color: var(--blue);

    background: var(--blue-light);

    box-shadow:
        0 0 0 2px rgba(21, 84, 209, 0.08);
}

.category.active {
    color: var(--blue);

    font-weight: 700;
}

.category span:last-child {
    max-width: 90px;

    font-size: 12px;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.dots-icon {
    gap: 4px;
}

.dots-icon i {
    width: 6px;
    height: 6px;

    background: var(--blue);

    border-radius: 50%;
}


/* =========================================================
   FEATURED PRODUCTS
   ========================================================= */

.featured-section {
    position: relative;
}

.product-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    align-items: start;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 17px;

    box-shadow:
        0 2px 5px rgba(16, 24, 40, 0.025);

    opacity: 1;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        opacity 180ms ease;
}

.product-card:hover {
    transform: translateY(-3px);

    border-color: #cbd5e1;

    box-shadow:
        0 9px 25px rgba(16, 24, 40, 0.09);
}

.product-card:active {
    transform: scale(0.985);
}


/* Carousel animation */

.product-card.carousel-enter {
    animation:
        carouselCardIn 260ms ease both;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-thumb {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #f2f4f7;
}

.product-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 220ms ease;
}

.product-card:hover .product-thumb img {
    transform: scale(1.025);
}


/* =========================================================
   FAVORITE BUTTON
   ========================================================= */

.fav-toggle {
    position: absolute;

    top: 9px;
    right: 9px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.94);

    color: #475467;

    font-size: 19px;

    box-shadow:
        0 2px 7px rgba(16, 24, 40, 0.1);

    transition:
        transform 150ms ease,
        background 150ms ease,
        color 150ms ease;
}

.fav-toggle:hover {
    transform: scale(1.06);

    background: #ffffff;

    color: var(--red);
}

.fav-toggle:active {
    transform: scale(0.91);
}

.fav-toggle.active {
    color: var(--red);
}


/* =========================================================
   PRODUCT BODY
   ========================================================= */

.product-body {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 12px;
}

.product-body .name {
    color: var(--text);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.15px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    overflow: hidden;
}

.product-body .price {
    color: var(--blue);

    font-size: 18px;

    font-weight: 800;

    line-height: 1.15;
}

.product-body .meta {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;
}

.product-body .rating {
    color: #667085;
}

.product-body .badge {
    align-self: flex-start;

    padding:
        4px 8px;

    background: var(--green-bg);

    color: var(--green);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-state {
    padding: 35px 20px;

    text-align: center;

    color: var(--muted);

    background: var(--surface);

    border: 1px dashed var(--border);

    border-radius: var(--radius);
}

.empty-state h3 {
    margin-bottom: 6px;

    color: var(--text);

    font-size: 17px;
}

.empty-state p {
    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   CAROUSEL DOTS
   ========================================================= */

.carousel-dots {
    min-height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 15px;
}

.carousel-dots button {
    width: 7px;
    height: 7px;

    padding: 0;

    border-radius: 50%;

    background: #d4dae3;

    transition:
        width 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.carousel-dots button:hover {
    transform: scale(1.15);
}

.carousel-dots button.active {
    width: 20px;

    border-radius: 999px;

    background: var(--blue);
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-section {
    margin-bottom: 20px;
}

.how-card {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    padding:
        25px 22px;

    background: #f7f9fc;

    border: 1px solid var(--border-light);

    border-radius: 20px;
}

.how-step {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}

.step-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 15px;

    background: var(--blue-light);

    color: var(--blue);
}

.step-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-step {
    background: #e8f7ed;

    color: var(--green);
}

.meet-step {
    background: #fff3df;

    color: var(--orange);
}

.how-step h3 {
    color: var(--text);

    font-size: 14px;

    font-weight: 750;

    margin-bottom: 4px;
}

.how-step p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.4;
}

.step-arrow {
    color: #a7b0be;

    font-size: 25px;

    font-weight: 400;

    user-select: none;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-navigation {
    position: fixed;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: min(100%, 560px);

    min-height: 72px;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    align-items: center;

    padding:
        6px 8px
        calc(6px + env(safe-area-inset-bottom));

    background:
        rgba(255, 255, 255, 0.97);

    border-top: 1px solid var(--border-light);

    box-shadow:
        0 -4px 18px rgba(16, 24, 40, 0.05);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 100;
}

.nav-item {
    height: 60px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    background: transparent;

    color: #7b8494;

    font-size: 10px;

    font-weight: 600;

    transition:
        color 150ms ease,
        transform 150ms ease;
}

.nav-item:hover {
    color: var(--blue);
}

.nav-item:active {
    transform: scale(0.92);
}

.nav-item.active {
    color: var(--blue);
}

.nav-item svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-button {
    width: 52px;
    height: 52px;

    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: -17px;

    background: var(--blue);

    color: #ffffff;

    border-radius: 50%;

    font-size: 31px;

    font-weight: 400;

    line-height: 1;

    box-shadow:
        0 7px 20px rgba(21, 84, 209, 0.28);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.add-button:hover {
    background: var(--blue-dark);

    transform:
        translateY(-2px)
        scale(1.03);

    box-shadow:
        0 9px 25px rgba(21, 84, 209, 0.34);
}

.add-button:active {
    transform: scale(0.93);
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-backdrop {
    position: fixed;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(15, 23, 42, 0.48);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    /* Above the sticky header (z-index 1000). */
    z-index: 1100;

    animation:
        backdropIn 160ms ease both;
}

.modal {
    position: relative;

    width: min(100%, 440px);

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 27px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.2);

    animation:
        modalIn 220ms ease both;
}

.modal h2 {
    margin-bottom: 7px;

    color: var(--text);

    font-size: 23px;

    font-weight: 800;
}

.modal > p {
    margin-bottom: 22px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;
}

.modal-close {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f4f6f8;

    color: var(--muted);

    border-radius: 50%;

    font-size: 24px;

    line-height: 1;

    transition:
        background 150ms ease,
        color 150ms ease;
}

.modal-close:hover {
    background: #e9edf2;

    color: var(--text);
}

.modal label {
    display: block;

    margin-bottom: 15px;

    color: var(--text);

    font-size: 13px;

    font-weight: 650;
}

.modal input,
.modal select {
    width: 100%;

    height: 46px;

    margin-top: 7px;

    padding:
        0 12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: var(--text);

    font-size: 14px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.modal input:focus,
.modal select:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(21, 84, 209, 0.08);
}

.publish-button {
    width: 100%;

    height: 48px;

    margin-top: 4px;

    background: var(--blue);

    color: #ffffff;

    border-radius: 11px;

    font-size: 14px;

    font-weight: 700;

    transition:
        background 150ms ease,
        transform 150ms ease;
}

.publish-button:hover {
    background: var(--blue-dark);
}

.publish-button:active {
    transform: scale(0.98);
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;

    left: 50%;
    bottom: 92px;

    z-index: 1300; /* above dialogs (1100) and header panels (1200) */

    min-width: 220px;
    max-width: calc(100% - 40px);

    padding:
        12px 16px;

    background: #111827;

    color: #ffffff;

    border-radius: 11px;

    text-align: center;

    font-size: 13px;

    line-height: 1.4;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 12px);

    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;
}

.toast.show {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes heroTextIn {
    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes heroImageIn {
    from {
        opacity: 0;

        transform:
            translateX(15px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes capFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes tasselSwing {
    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

@keyframes carouselCardIn {
    from {
        opacity: 0;

        transform:
            translateX(8px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes backdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .app {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            230px;
    }

    .hero-illustration {
        width: 230px;
    }

    .hero-illustration svg {
        max-width: 230px;
    }

    .category-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap:
            16px 8px;
    }

    .category-icon {
        width: 64px;
        height: 64px;
    }

    .product-grid {
        gap: 12px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body {
        padding-bottom: 82px;
    }

    .app {
        width: 100%;

        padding:
            0 16px 30px;
    }


    /* Header */

    .topbar {
        min-height: 64px;
    }

    .brand-campus,
    .brand-marketplace {
        font-size: 17px;
    }

    .header-actions {
        gap: 7px;
    }

    .header-icon,
    .profile-button {
        width: 38px;
        height: 38px;
    }

    .header-icon svg,
    .profile-button svg {
        width: 18px;
        height: 18px;
    }


    /* Hero */

    .hero {
        min-height: 190px;

        grid-template-columns:
            minmax(0, 1fr)
            132px;

        gap: 7px;

        padding:
            12px 0 22px;
    }

    .hero-content h1 {
        font-size: 29px;

        letter-spacing: -1.2px;
    }

    .hero-content p {
        margin-top: 10px;

        font-size: 14px;

        line-height: 1.4;
    }

    .hero-illustration {
        width: 132px;
    }

    .hero-illustration svg {
        width: 132px;
        max-width: 132px;
    }


    /* Search */

    .search-section {
        margin-bottom: 27px;
    }

    .search-box {
        min-height: 54px;

        padding:
            0 14px;

        border-radius: 16px;
    }

    .search-box svg {
        width: 20px;
        height: 20px;

        margin-right: 9px;
    }

    .search-box input {
        font-size: 15px;
    }


    /* Sections */

    .section + .section {
        margin-top: 29px;
    }

    .section-header {
        margin-bottom: 13px;
    }

    .section-header h2 {
        font-size: 20px;

        letter-spacing: -0.35px;
    }

    .view-all {
        font-size: 13px;
    }


    /* Categories */

    .category-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap:
            17px 5px;
    }

    .category-icon {
        width: 55px;
        height: 55px;

        border-radius: 14px;

        font-size: 23px;
    }

    .category span:last-child {
        max-width: 64px;

        font-size: 10px;
    }


    /* Products */

    .product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .product-card {
        border-radius: 15px;
    }

    .product-thumb {
        aspect-ratio: 4 / 3;
    }

    .fav-toggle {
        width: 30px;
        height: 30px;

        top: 7px;
        right: 7px;

        font-size: 17px;
    }

    .product-body {
        padding: 9px;

        gap: 5px;
    }

    .product-body .name {
        font-size: 12.5px;

        line-height: 1.27;
    }

    .product-body .price {
        font-size: 15px;
    }

    .product-body .meta {
        font-size: 9.5px;
    }

    .product-body .badge {
        padding:
            4px 7px;

        font-size: 9px;
    }


    /* How it works */

    .how-card {
        padding:
            20px 8px;

        border-radius: 17px;
    }

    .step-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 8px;
    }

    .step-icon svg {
        width: 22px;
        height: 22px;
    }

    .how-step h3 {
        font-size: 11px;
    }

    .how-step p {
        max-width: 82px;

        font-size: 8.5px;
    }

    .step-arrow {
        font-size: 20px;
    }


    /* Bottom navigation */

    .bottom-navigation {
        width: 100%;

        min-height: 70px;

        padding:
            4px 6px
            calc(4px + env(safe-area-inset-bottom));
    }

    .nav-item {
        height: 59px;

        font-size: 9px;
    }

    .nav-item svg {
        width: 21px;
        height: 21px;
    }

    .add-button {
        width: 52px;
        height: 52px;

        margin-top: -17px;

        font-size: 30px;
    }


    /* Modal */

    .modal-backdrop {
        align-items: flex-end;

        padding: 0;
    }

    .modal {
        width: 100%;

        max-height: 90vh;

        padding:
            24px 20px
            calc(24px + env(safe-area-inset-bottom));

        border-radius:
            21px 21px 0 0;
    }

    .modal h2 {
        font-size: 21px;
    }


    /* Toast */

    .toast {
        bottom: 84px;

        width:
            calc(100% - 32px);

        min-width: 0;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .app {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            110px;
    }

    .hero-content h1 {
        font-size: 25px;
    }

    .hero-content p {
        font-size: 13px;
    }

    .hero-illustration,
    .hero-illustration svg {
        width: 110px;
        max-width: 110px;
    }

    .category-grid {
        gap:
            15px 3px;
    }

    .category-icon {
        width: 50px;
        height: 50px;

        font-size: 21px;
    }

    .category span:last-child {
        max-width: 55px;

        font-size: 9px;
    }

    .product-grid {
        gap: 8px;
    }

    .product-body {
        padding: 8px;
    }

    .product-body .name {
        font-size: 11.5px;
    }

    .product-body .price {
        font-size: 14px;
    }

    .product-body .meta {
        font-size: 8.5px;
    }

    .product-body .badge {
        font-size: 8px;
    }

    .how-card {
        padding-left: 4px;
        padding-right: 4px;
    }

    .step-arrow {
        font-size: 17px;
    }

    .how-step p {
        font-size: 8px;
    }
}


/* =========================================================
   EXTRA SMALL / NARROW DEVICES
   ========================================================= */

@media (max-width: 330px) {

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            90px;
    }

    .hero-content h1 {
        font-size: 22px;
    }

    .hero-content p {
        font-size: 12px;
    }

    .hero-illustration,
    .hero-illustration svg {
        width: 90px;
        max-width: 90px;
    }

    .category-icon {
        width: 45px;
        height: 45px;

        font-size: 19px;
    }

    .category span:last-child {
        font-size: 8px;
    }

    .product-body .name {
        font-size: 10.5px;
    }

    .product-body .price {
        font-size: 13px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:
        3px solid rgba(21, 84, 209, 0.22);

    outline-offset: 2px;
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
    /* ============================================================
   PHASE 1.1 — STICKY HEADER
   Added without changing the existing design
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    transition:
        height 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* Header appearance after scrolling */
.topbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Make CAMPUS MARKETPLACE clickable */
.brand {
    cursor: pointer;
    user-select: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.brand:hover {
    opacity: 0.85;
}

.brand:active {
    transform: scale(0.97);
}

/* Keyboard accessibility */
.brand:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 5px;
    border-radius: 6px;
}

/* Mobile */
@media (max-width: 768px) {

    .topbar.scrolled {
        box-shadow: 0 3px 14px rgba(15, 23, 42, 0.07);
    }

}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {

    .topbar,
    .brand {
        transition: none;
    }

}
}
/* =========================================================
   PHASE 1 FINAL ADDITIONS
   Sticky header + interactive header panels + desktop arrows
   ========================================================= */

/* Sticky header */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    transition:
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.topbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.brand {
    cursor: pointer;
    user-select: none;
}

.brand:active {
    transform: scale(0.98);
}

.brand:focus-visible {
    outline: 3px solid rgba(21, 84, 209, 0.22);
    outline-offset: 5px;
    border-radius: 6px;
}

/* Header dropdown/panel */
.phase1-panel {
    position: fixed;
    top: 78px;
    right: max(24px, calc((100vw - var(--max-width)) / 2 + 24px));
    z-index: 1200;
    width: min(360px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: phase1PanelIn 160ms ease both;
}

.phase1-panel[hidden] {
    display: none !important;
}

.phase1-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light);
}

.phase1-panel-header h3 {
    font-size: 16px;
    font-weight: 750;
}

.phase1-panel-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 20px;
}

.phase1-panel-body {
    padding: 14px;
}

.phase1-empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.phase1-notification {
    display: flex;
    gap: 11px;
    padding: 12px;
    border-radius: 12px;
    background: var(--surface);
}

.phase1-notification + .phase1-notification {
    margin-top: 8px;
}

.phase1-notification-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--blue-light);
    color: var(--blue);
    font-size: 16px;
}

.phase1-notification strong {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}

.phase1-notification span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

/* Profile panel */
.phase1-profile {
    padding: 18px;
}

.phase1-profile-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phase1-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 800;
}

.phase1-profile-name {
    font-size: 15px;
    font-weight: 750;
}

.phase1-profile-status {
    margin-top: 3px;
    color: var(--green);
    font-size: 11px;
    font-weight: 650;
}

.phase1-profile-status.guest {
    color: var(--muted);
}

.phase1-profile-actions {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.phase1-profile-action {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.phase1-profile-action:hover {
    background: var(--surface);
}

/* Desktop carousel arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    font-size: 22px;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.carousel-arrow:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: var(--shadow-md);
}

.carousel-arrow-left {
    left: -19px;
}

.carousel-arrow-right {
    right: -19px;
}

.carousel-arrow[hidden] {
    display: none !important;
}

/* Chevron icon, centered in the round button */
.carousel-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Keep content clear of fixed bottom navigation */
body.phase1-panel-open {
    overflow: hidden;
}

@keyframes phase1PanelIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .topbar {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .phase1-panel {
        top: 68px;
        right: 16px;
        width: calc(100vw - 32px);
    }

    .carousel-arrow {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .topbar {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

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

    .phase1-panel {
        animation: none;
    }
}

/* =========================================================
   SHARED MOBILE APP SHELL — PHASE 2 FOUNDATION
   Keeps Home consistent with the Marketplace screen.
   ========================================================= */
:root {
    --max-width: 430px;
    --shared-nav-height: 76px;
}

body {
    background: #eef1f6;
}

.app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 16px calc(var(--shared-nav-height) + env(safe-area-inset-bottom) + 12px);
    background: #ffffff;
    position: relative;
}

/* Same bottom-nav geometry as marketplace/marketplace.css */
.bottom-navigation {
    width: 100%;
    max-width: 430px;
    height: var(--shared-nav-height);
    min-height: var(--shared-nav-height);
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr 1fr 1.05fr 1fr 1fr;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #e8ebf0;
    box-shadow: 0 -4px 18px rgba(16,24,40,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bottom-navigation .nav-item {
    height: 62px;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #667085;
}

.bottom-navigation .nav-item svg {
    width: 27px;
    height: 27px;
}

.bottom-navigation .nav-item.active {
    color: var(--blue);
    font-weight: 650;
}

.bottom-navigation .add-button {
    width: 58px;
    height: 58px;
    justify-self: center;
    margin-top: -25px;
    font-size: 38px;
    line-height: 1;
    border-radius: 50%;
}

@media (min-width: 431px) {
    body {
        padding: 12px 0;
    }

    .app {
        min-height: calc(100vh - 24px);
        border-radius: 22px;
        overflow: hidden;
        overflow: clip; /* not hidden: keeps the sticky header working */
        box-shadow: 0 12px 40px rgba(16,24,40,.10);
    }
}

@media (max-width: 430px) {
    body {
        background: #ffffff;
    }

    .app {
        border-radius: 0;
        box-shadow: none;
    }
}

/* =========================================================
   SHARED RESPONSIVE NAVIGATION — DESKTOP FIRST
   One consistent navigation system across Home/Marketplace/
   Favorites/Profile. Sidebar on desktop, bottom bar on mobile.
   ========================================================= */
@media (min-width: 769px) {
    body { padding: 0 !important; background: #f4f6fa; }
    .app {
        max-width: none !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 40px 40px 260px !important;
        border-radius: 0 !important;
        background: #fff;
    }
    .topbar { margin-left: 0 !important; }
    .bottom-navigation {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 220px !important;
        max-width: 220px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 92px 14px 28px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(5, minmax(52px, 1fr)) !important;
        gap: 8px !important;
        align-content: center !important;
        border-top: 0 !important;
        border-right: 1px solid #e7eaf0 !important;
        box-shadow: 4px 0 20px rgba(16,24,40,.04) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #fff !important;
    }
    .bottom-navigation .nav-item {
        width: 100% !important;
        height: 58px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 13px !important;
        padding: 0 18px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #667085 !important;
    }
    .bottom-navigation .nav-item:hover { background: #f5f7fb !important; color: var(--blue) !important; }
    .bottom-navigation .nav-item.active { background: #edf4ff !important; color: var(--blue) !important; }
    .bottom-navigation .nav-item svg { width: 22px !important; height: 22px !important; flex: 0 0 auto; stroke-width: 1.9 !important; }
    .bottom-navigation .add-button {
        width: calc(100% - 10px) !important;
        height: 50px !important;
        margin: 8px 5px !important;
        border-radius: 13px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 20px rgba(20,87,217,.18) !important;
    }
    .bottom-navigation .add-button::before { content: "＋"; }
    .bottom-navigation .add-button { font-size: 0 !important; }
}

@media (max-width: 768px) {
    .bottom-navigation .nav-item svg { width: 23px; height: 23px; stroke-width: 1.9; }
    .bottom-navigation .nav-item { font-size: 10px; }
}


/* =========================================================
   CAMPUS MARKETPLACE — SHARED NAVIGATION & ICON SYSTEM
   One icon language across every screen. Desktop sidebar,
   tablet/mobile bottom bar.
   ========================================================= */
.bottom-nav, .bottom-navigation {
  --nav-blue:#1457d9; --nav-ink:#344054; --nav-muted:#667085;
  box-sizing:border-box;
}
.bottom-nav .nav-item, .bottom-navigation .nav-item {
  position:relative; border:1px solid transparent; color:var(--nav-muted);
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.bottom-nav .nav-item svg, .bottom-navigation .nav-item svg {
  fill:none !important; stroke:currentColor !important;
  stroke-width:1.8 !important; stroke-linecap:round; stroke-linejoin:round;
}
.bottom-nav .nav-item:hover, .bottom-navigation .nav-item:hover {
  color:var(--nav-blue) !important; background:#f7f9fc !important;
}
.bottom-nav .nav-item.active, .bottom-navigation .nav-item.active {
  color:var(--nav-blue) !important; background:#edf4ff !important;
  border-color:#dbe8ff !important; font-weight:700 !important;
}
.bottom-nav .nav-item.active svg, .bottom-navigation .nav-item.active svg { stroke-width:2 !important; }
.bottom-nav .nav-item:active, .bottom-navigation .nav-item:active { transform:scale(.97); }
.sell-button {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--nav-blue) !important; color:#fff !important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.sell-button:hover { background:#0e43ad !important; transform:translateY(-1px); box-shadow:0 8px 20px rgba(20,87,217,.24) !important; }
.sell-plus { font-weight:400; line-height:1; }
.sell-label { display:none; }

/* Marketplace category chips: familiar, readable, touch-friendly */
.category-list { align-items:stretch !important; gap:12px !important; }
.category-item {
  min-width:92px !important; min-height:86px !important; padding:10px 9px 9px !important;
  border:1px solid #e6eaf0 !important; border-radius:16px !important;
  background:#fff !important; color:#344054 !important;
  box-shadow:0 2px 8px rgba(16,24,40,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.category-item:hover { transform:translateY(-2px); border-color:#c9d9f7 !important; box-shadow:0 7px 18px rgba(20,87,217,.08); }
.category-item.active { background:#f4f8ff !important; border-color:#bcd1f5 !important; color:#1457d9 !important; box-shadow:0 6px 16px rgba(20,87,217,.08); }
.category-icon {
  width:42px !important; height:42px !important; border-radius:13px !important;
  display:grid !important; place-items:center !important; margin-bottom:7px !important;
  background:#f4f6f9 !important; color:#475467 !important;
}
.category-item.active .category-icon { background:#e3efff !important; color:#1457d9 !important; }
.category-icon svg { width:23px !important; height:23px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.7 !important; stroke-linecap:round; stroke-linejoin:round; }
.category-item > span:last-child { font-size:11px !important; font-weight:650 !important; white-space:nowrap; }

@media (max-width:768px) {
  .bottom-nav, .bottom-navigation { height:78px !important; min-height:78px !important; padding:7px 10px calc(7px + env(safe-area-inset-bottom)) !important; }
  .bottom-nav .nav-item, .bottom-navigation .nav-item { height:62px !important; gap:4px !important; border-radius:13px !important; font-size:10.5px !important; }
  .bottom-nav .nav-item svg, .bottom-navigation .nav-item svg { width:24px !important; height:24px !important; }
  .bottom-nav .sell-button, .bottom-navigation .add-button { width:58px !important; height:58px !important; border-radius:18px !important; margin-top:-20px !important; }
  .sell-plus { font-size:35px; }
  .category-list { overflow-x:auto !important; padding-bottom:4px !important; scrollbar-width:none; }
  .category-list::-webkit-scrollbar { display:none; }
}
@media (min-width:769px) {
  .bottom-nav, .bottom-navigation { width:236px !important; max-width:236px !important; padding:94px 16px 28px !important; gap:9px !important; }
  .bottom-nav .nav-item, .bottom-navigation .nav-item { height:56px !important; padding:0 16px !important; gap:13px !important; border-radius:13px !important; font-size:13px !important; }
  .bottom-nav .nav-item svg, .bottom-navigation .nav-item svg { width:21px !important; height:21px !important; flex:0 0 auto; }
  .bottom-nav .sell-button, .bottom-navigation .add-button { width:100% !important; height:48px !important; margin:8px 0 !important; border-radius:13px !important; }
  .bottom-nav .sell-plus { font-size:0; }
  .bottom-nav .sell-plus::before { content:'＋'; font-size:19px; }
  .bottom-nav .sell-label { display:inline !important; font-size:13px; font-weight:700; margin-left:7px; }
}
@media (min-width: 769px) {
  .app { padding-left: 284px !important; }
}


/* =========================================================
   CATEGORY ICONS — one line-icon set in one brand color
   (Lucide icons, same family as the navigation icons)
   ========================================================= */
.category .category-icon {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 2px !important;
    border: 1px solid #dbe6fb !important;
    border-radius: 16px !important;
    background: var(--blue-light) !important;
    color: var(--blue) !important;
    box-shadow: none !important;
}

.category .category-icon svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 1.9 !important;
}

.category:hover .category-icon,
.category.active .category-icon {
    border-color: var(--blue) !important;
    background: var(--blue) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(21, 84, 209, 0.2) !important;
}

@media (max-width: 430px) {
    .category .category-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }

    .category .category-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 340px) {
    .category .category-icon {
        width: 42px !important;
        height: 42px !important;
    }
}


/* Logo: "NORSU CAMPUS" / "MARKETPLACE" — one row per line. */
.brand-campus,
.brand-marketplace {
    white-space: nowrap;
}


/* =========================================================
   ITEM PREVIEW (Home) — seller row with Message button
   ========================================================= */
.product-preview-modal .preview-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #f2f4f7;
}

.product-preview-modal .preview-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-category {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--blue-light);
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
}

.preview-price {
    margin: 4px 0 8px;
    color: var(--blue);
    font-size: 24px;
    font-weight: 800;
}

.product-preview-modal .preview-meta {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--muted);
    font-size: 13px;
}

/* =========================================================
   ITEM DETAILS on Home — same as the Marketplace details:
   a sheet from the bottom on phones; on desktop a centered
   dialog with the photo on the left and details on the right.
   ========================================================= */
.hp-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(16, 24, 40, 0.42);
    opacity: 0;
    transition: opacity .18s ease;
}
.hp-overlay.show { opacity: 1; }

.hp-modal {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 26px 26px 0 0;
    background: #ffffff;
    color: #101828;
}

.hp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #475467;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
    cursor: pointer;
}

.hp-image { width: 100%; height: 285px; display: block; object-fit: cover; background: #f2f4f7; }
.hp-content { padding: 22px 20px 28px; }

.hp-category {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--blue-light);
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
}

.hp-title { margin: 11px 0 0; font-size: 25px; line-height: 1.2; }
.hp-price { margin-top: 9px; color: var(--blue); font-size: 26px; font-weight: 750; }

.hp-meta { display: grid; gap: 8px; margin-top: 17px; color: #667085; font-size: 14px; }
.hp-meta .icon-text { align-items: flex-start; }
.hp-meta .icon-text > svg.ui-icon { margin-top: .12em; }

.hp-seller {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 21px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* Seller avatar + name: opens their public profile. */
.hp-seller-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -6px;
    padding: 6px 10px 6px 6px;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}
.hp-seller-link:hover { background: var(--surface); }
.hp-seller-link:hover strong { text-decoration: underline; }
.hp-seller-link:focus-visible { outline: 3px solid rgba(20, 87, 217, .3); outline-offset: 2px; }

.hp-seller-avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 700;
}

.hp-seller-text { min-width: 0; display: grid; }
.hp-seller-text strong { font-size: 14px; font-weight: 700; }
.hp-seller-text span { margin-top: 2px; color: var(--blue); font-size: 11px; font-weight: 600; }

.hp-description { margin: 18px 0 0; color: #667085; font-size: 14px; line-height: 1.6; }

.hp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

.hp-secondary,
.hp-primary {
    min-height: 50px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}

.hp-secondary { border: 1px solid var(--border); background: #ffffff; color: #101828; }
.hp-secondary:hover { background: var(--surface); }
.hp-primary { border: 0; background: var(--blue); color: #ffffff; }
.hp-primary:hover { background: #0e43ad; }
.hp-primary:disabled { background: #c7d3ea; cursor: default; }

.hp-close:focus-visible,
.hp-secondary:focus-visible,
.hp-primary:focus-visible { outline: 3px solid rgba(20, 87, 217, .3); outline-offset: 2px; }

@media (min-width: 769px) {
    .hp-overlay { align-items: center; padding: 32px; }

    .hp-modal {
        max-width: 920px;
        max-height: calc(100vh - 64px);
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(16, 24, 40, 0.22);
    }

    /* Photo fills the left half; the details set the height. */
    .hp-details { position: relative; min-height: 460px; padding-left: 52%; }
    .hp-image { position: absolute; top: 0; left: 0; bottom: 0; width: 52%; height: 100%; }
    .hp-content { padding: 40px 32px 32px; }
}

:root[data-theme="dark"] .hp-modal { background: #171b24; color: #e4e8ef; }
:root[data-theme="dark"] .hp-close { background: rgba(23, 27, 36, 0.92); color: #c4cbd8; }
:root[data-theme="dark"] .hp-image { background: #222935; }
:root[data-theme="dark"] .hp-category { background: #1a273b; color: #6796f1; }
:root[data-theme="dark"] .hp-price { color: #6796f1; }
:root[data-theme="dark"] .hp-meta,
:root[data-theme="dark"] .hp-description { color: #9ba3b2; }
:root[data-theme="dark"] .hp-seller { border-top-color: #2b3240; }
:root[data-theme="dark"] .hp-seller-link:hover { background: #222935; }
:root[data-theme="dark"] .hp-seller-avatar { background: #1a273b; color: #6796f1; }
:root[data-theme="dark"] .hp-seller-text strong { color: #e4e8ef; }
:root[data-theme="dark"] .hp-seller-text span { color: #6796f1; }
:root[data-theme="dark"] .hp-secondary { border-color: #2b3240; background: #171b24; color: #e4e8ef; }
:root[data-theme="dark"] .hp-secondary:hover { background: #222935; }
:root[data-theme="dark"] .hp-primary:disabled { background: #343d51; color: #9ba3b2; }

/* Item name on one line; a long name ends with "…" */
.product-body .name {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Condition badge sits in the card's bottom-right corner */
.product-body .badge { align-self: flex-end; margin-top: auto; }

/* Condition: coloured text only, no background (light and dark) */
.product-body .badge,
:root[data-theme="dark"] .product-body .badge { padding: 0; border-radius: 0; background: none !important; }

/* Heart icon on the card's favorite button */
.fav-toggle svg.ui-icon {
    width: 18px;
    height: 18px;
    vertical-align: 0;
}

.preview-seller {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.preview-seller-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue);
    font-weight: 800;
}

.preview-seller-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-seller-text strong {
    font-size: 14px;
}

.preview-seller-text span {
    color: var(--muted);
    font-size: 11px;
}

.product-preview-modal .preview-description {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.preview-actions .publish-button {
    margin-top: 0;
}

.preview-secondary {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #ffffff;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.preview-secondary:hover {
    background: var(--surface);
}

/* Same Message button as the Marketplace item details. */
.message-seller-button {
    margin-left: auto;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 1px solid var(--blue);
    border-radius: 999px;
    background: #ffffff;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    transition: background 150ms ease, color 150ms ease;
}

.message-seller-button:hover {
    background: var(--blue);
    color: #ffffff;
}

.message-seller-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ===== DARK THEME (generated by tools/dark-theme.py — do not edit by hand) ===== */
:root[data-theme="dark"] { --blue: #1554d1; --blue--fg: #6996f0; --blue--bd: #1554d1; --blue-dark: #0e3fa8; --blue-dark--fg: #6b96f3; --blue-dark--bd: #2050b6; --blue-light: #1a253b; --blue-light--fg: #edf3ff; --blue-light--bd: #213357; --text: #2d3a54; --text--fg: #d8dce5; --text--bd: #d8dce5; --muted: #4f5767; --muted--fg: #9ba3b2; --muted--bd: #9ba3b2; --light-muted: #404b63; --light-muted--fg: #77849b; --light-muted--bd: #49566e; --border: #2a3242; --border--fg: #e2e6ed; --border--bd: #2b3241; --border-light: #252c39; --border-light--fg: #edf0f4; --border-light--bd: #242a36; --green: #16803c; --green--fg: #79e8a1; --green--bd: #20b656; --green-bg: #1d411d; --green-bg--fg: #e9f7e9; --green-bg--bd: #225a22; --red: #d92d20; --red--fg: #ea766e; --red--bd: #d92d20; --orange: #f79009; --orange--fg: #f2b564; --orange--bd: #f79009; --white: #171b24; --white--fg: #ffffff; --white--bd: #181d25; --background: #171b24; --background--fg: #ffffff; --background--bd: #181d25; --surface: #1d232e; --surface--fg: #f8fafc; --surface--bd: #1c212b; --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.05); --shadow-sm--fg: 0 2px 8px rgba(206, 213, 226, 0.05); --shadow-sm--bd: 0 2px 8px rgba(61, 92, 153, 0.05); --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08); --shadow-md--fg: 0 8px 24px rgba(206, 213, 226, 0.08); --shadow-md--bd: 0 8px 24px rgba(61, 92, 153, 0.08); --shadow-blue: 0 7px 20px rgba(21, 84, 209, 0.35); --shadow-blue--fg: 0 7px 20px rgba(105, 150, 240, 0.22); --shadow-blue--bd: 0 7px 20px rgba(21, 84, 209, 0.22); }
:root[data-theme="dark"] body { background-color: var(--background); background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] button { border-color: currentColor; }
:root[data-theme="dark"] a { color: inherit; }
:root[data-theme="dark"] .brand-campus { color: var(--blue--fg); }
:root[data-theme="dark"] .brand-marketplace { color: var(--text--fg); }
:root[data-theme="dark"] .header-icon, :root[data-theme="dark"] .profile-button { background-color: var(--#171b24); background-image: none; border-color: var(--border--bd); color: var(--text--fg); }
:root[data-theme="dark"] .header-icon:hover, :root[data-theme="dark"] .profile-button:hover { background-color: #1b202b; background-image: none; border-color: #394356; }
:root[data-theme="dark"] .header-icon svg, :root[data-theme="dark"] .profile-button svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .notification-dot { background-color: #ef4444; background-image: none; border-color: #181d25; }
:root[data-theme="dark"] .hero-content h1 { color: var(--blue--fg); }
:root[data-theme="dark"] .hero-content p { color: var(--text--fg); }
:root[data-theme="dark"] .cap-top { fill: var(--blue--fg); }
:root[data-theme="dark"] .cap-body { fill: #6b9aec; }
:root[data-theme="dark"] .cap-hole { fill: #6b96f3; }
:root[data-theme="dark"] .graduation-cap path, :root[data-theme="dark"] .books path, :root[data-theme="dark"] .plant path { stroke: #6b96f3; }
:root[data-theme="dark"] .books path { fill: #ffffff; }
:root[data-theme="dark"] .plant path { fill: none; }
:root[data-theme="dark"] .plant path:nth-child(n + 2) { stroke: #79e8a1; }
:root[data-theme="dark"] .plant path:nth-last-child(2), :root[data-theme="dark"] .plant path:nth-last-child(1) { fill: #e9f7e9; stroke: #79e8a1; }
:root[data-theme="dark"] .gold-tassel { fill: var(--orange--fg); stroke: #f3b469 !important; }
:root[data-theme="dark"] .search-box { background-color: var(--#171b24); background-image: none; border-color: var(--border--bd); box-shadow: var(--shadow-sm--bd); }
:root[data-theme="dark"] .search-box:focus-within { border-color: var(--blue--bd); box-shadow: 0 0 0 3px rgba(21, 84, 209, 0.16); }
:root[data-theme="dark"] .search-box svg { fill: none; stroke: var(--muted--fg); }
:root[data-theme="dark"] .search-box input { border-color: currentColor; outline-color: currentColor; background-color: transparent; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .search-box input::placeholder { color: #838da0; }
:root[data-theme="dark"] .section-header h2 { color: var(--text--fg); }
:root[data-theme="dark"] .view-all { background-color: transparent; background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .view-all:hover { color: var(--blue-dark--fg); }
:root[data-theme="dark"] .category { background-color: transparent; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .category-icon { background-color: #171b24; background-image: none; border-color: var(--border--bd); box-shadow: 0 2px 5px rgba(16, 24, 40, 0.094); }
:root[data-theme="dark"] .category:hover .category-icon { border-color: #3e485d; background-color: #1b202b; background-image: none; box-shadow: 0 6px 15px rgba(21, 84, 209, 0.08); }
:root[data-theme="dark"] .category.active .category-icon { border-color: var(--blue--bd); background-color: var(--blue-light); background-image: none; box-shadow: 0 0 0 2px rgba(21, 84, 209, 0.16); }
:root[data-theme="dark"] .category.active { color: var(--blue--fg); }
:root[data-theme="dark"] .dots-icon i { background-color: var(--blue); background-image: none; }
:root[data-theme="dark"] .product-card { background-color: #171b24; background-image: none; border-color: var(--border--bd); box-shadow: 0 2px 5px rgba(16, 24, 40, 0.085); }
:root[data-theme="dark"] .product-card:hover { border-color: #394356; box-shadow: 0 9px 25px rgba(16, 24, 40, 0.202); }
:root[data-theme="dark"] .product-thumb { background-color: #222935; background-image: none; }
:root[data-theme="dark"] .fav-toggle { background-color: rgba(23, 27, 36, 0.94); background-image: none; color: #adb7c6; box-shadow: 0 2px 7px rgba(16, 24, 40, 0.22); }
:root[data-theme="dark"] .fav-toggle:hover { background-color: #171b24; background-image: none; color: var(--red--fg); }
:root[data-theme="dark"] .fav-toggle.active { color: var(--red--fg); }
:root[data-theme="dark"] .product-body .name { color: var(--text--fg); }
:root[data-theme="dark"] .product-body .price { color: var(--blue--fg); }
:root[data-theme="dark"] .product-body .meta { color: var(--muted--fg); }
:root[data-theme="dark"] .product-body .rating { color: #9ba3b2; }
:root[data-theme="dark"] .product-body .badge { background-color: var(--green-bg); background-image: none; color: var(--green--fg); }
:root[data-theme="dark"] .empty-state { color: var(--muted--fg); background-color: var(--surface); background-image: none; border-color: var(--border--bd); }
:root[data-theme="dark"] .empty-state h3 { color: var(--text--fg); }
:root[data-theme="dark"] .carousel-dots button { background-color: #323b4e; background-image: none; }
:root[data-theme="dark"] .carousel-dots button.active { background-color: var(--blue); background-image: none; }
:root[data-theme="dark"] .how-card { background-color: #1e232f; background-image: none; border-color: var(--border-light--bd); }
:root[data-theme="dark"] .step-icon { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .step-icon svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .connect-step { background-color: #1e422a; background-image: none; color: var(--green--fg); }
:root[data-theme="dark"] .meet-step { background-color: #43351e; background-image: none; color: var(--orange--fg); }
:root[data-theme="dark"] .how-step h3 { color: var(--text--fg); }
:root[data-theme="dark"] .how-step p { color: var(--muted--fg); }
:root[data-theme="dark"] .step-arrow { color: #6e7d94; }
:root[data-theme="dark"] .bottom-navigation { background-color: rgba(23, 27, 36, 0.97); background-image: none; border-top-color: var(--border-light--bd); box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.13); }
:root[data-theme="dark"] .nav-item { background-color: transparent; background-image: none; color: #9199a6; }
:root[data-theme="dark"] .nav-item:hover { color: var(--blue--fg); }
:root[data-theme="dark"] .nav-item.active { color: var(--blue--fg); }
:root[data-theme="dark"] .nav-item svg { fill: none; stroke: currentColor; }
:root[data-theme="dark"] .add-button { background-color: var(--blue); background-image: none; color: #ffffff; box-shadow: 0 7px 20px rgba(21, 84, 209, 0.28); }
:root[data-theme="dark"] .add-button:hover { background-color: var(--blue-dark); background-image: none; box-shadow: 0 9px 25px rgba(21, 84, 209, 0.34); }
:root[data-theme="dark"] .modal-backdrop { background-color: rgba(15, 23, 42, 0.48); background-image: none; }
:root[data-theme="dark"] .modal { background-color: #171b24; background-image: none; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .modal h2 { color: var(--text--fg); }
:root[data-theme="dark"] .modal > p { color: var(--muted--fg); }
:root[data-theme="dark"] .modal-close { background-color: #212834; background-image: none; color: var(--muted--fg); }
:root[data-theme="dark"] .modal-close:hover { background-color: #272e3c; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .modal label { color: var(--text--fg); }
:root[data-theme="dark"] .modal input, :root[data-theme="dark"] .modal select { border-color: var(--border--bd); outline-color: currentColor; background-color: #171b24; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .modal input:focus, :root[data-theme="dark"] .modal select:focus { border-color: var(--blue--bd); box-shadow: 0 0 0 3px rgba(21, 84, 209, 0.16); }
:root[data-theme="dark"] .publish-button { background-color: var(--blue); background-image: none; color: #ffffff; }
:root[data-theme="dark"] .publish-button:hover { background-color: var(--blue-dark); background-image: none; }
:root[data-theme="dark"] .toast { background-color: #2d3a54; background-image: none; color: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.364); }
:root[data-theme="dark"] button:focus-visible, :root[data-theme="dark"] input:focus-visible, :root[data-theme="dark"] select:focus-visible { outline-color: rgba(21, 84, 209, 0.22); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .topbar.scrolled { background-color: rgba(23, 27, 36, 0.97); background-image: none; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.184); }
  :root[data-theme="dark"] .brand:focus-visible { outline-color: rgba(37, 99, 235, 0.3); }
  @media (max-width: 768px) {
    :root[data-theme="dark"] .topbar.scrolled { box-shadow: 0 3px 14px rgba(15, 23, 42, 0.166); }
  }
}
:root[data-theme="dark"] .topbar { background-color: var(--#171b24); background-image: none; }
:root[data-theme="dark"] .topbar.scrolled { background-color: rgba(23, 27, 36, 0.97); background-image: none; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.184); }
:root[data-theme="dark"] .brand:focus-visible { outline-color: rgba(21, 84, 209, 0.22); }
:root[data-theme="dark"] .phase1-panel { background-color: #171b24; background-image: none; border-color: var(--border--bd); box-shadow: var(--shadow-md--bd); }
:root[data-theme="dark"] .phase1-panel-header { border-bottom-color: var(--border-light--bd); }
:root[data-theme="dark"] .phase1-panel-close { background-color: var(--surface); background-image: none; color: var(--muted--fg); }
:root[data-theme="dark"] .phase1-empty { color: var(--muted--fg); }
:root[data-theme="dark"] .phase1-notification { background-color: var(--surface); background-image: none; }
:root[data-theme="dark"] .phase1-notification-icon { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .phase1-notification span { color: var(--muted--fg); }
:root[data-theme="dark"] .phase1-avatar { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .phase1-profile-status { color: var(--green--fg); }
:root[data-theme="dark"] .phase1-profile-status.guest { color: var(--muted--fg); }
:root[data-theme="dark"] .phase1-profile-action { border-color: var(--border--bd); background-color: #171b24; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .phase1-profile-action:hover { background-color: var(--surface); background-image: none; }
:root[data-theme="dark"] .carousel-arrow { border-color: var(--border--bd); background-color: rgba(23, 27, 36, 0.96); background-image: none; color: var(--text--fg); box-shadow: var(--shadow-sm--bd); }
:root[data-theme="dark"] .carousel-arrow:hover { box-shadow: var(--shadow-md--bd); }
:root[data-theme="dark"] body { background-color: #0e1118; background-image: none; }
:root[data-theme="dark"] .app { background-color: #171b24; background-image: none; }
:root[data-theme="dark"] .bottom-navigation { background-color: rgba(23, 27, 36, 0.98); background-image: none; border-top-color: #282e3c; box-shadow: 0 -4px 18px rgba(16, 24, 40, 0.112); }
:root[data-theme="dark"] .bottom-navigation .nav-item { color: #9ba3b2; }
:root[data-theme="dark"] .bottom-navigation .nav-item.active { color: var(--blue--fg); }
@media (min-width: 431px) {
  :root[data-theme="dark"] .app { box-shadow: 0 12px 40px rgba(16, 24, 40, 0.22); }
}
@media (max-width: 430px) {
  :root[data-theme="dark"] body { background-color: #0e1118; background-image: none; }
  :root[data-theme="dark"] .app { box-shadow: none; }
}
@media (min-width: 769px) {
  :root[data-theme="dark"] body { background-color: #0e1118; background-image: none; }
  :root[data-theme="dark"] .app { background-color: #171b24; background-image: none; }
  :root[data-theme="dark"] .bottom-navigation { border-top-color: currentColor !important; border-right-color: #282f3c !important; box-shadow: 4px 0 20px rgba(16, 24, 40, 0.112) !important; background-color: #171b24 !important; background-image: none !important; }
  :root[data-theme="dark"] .bottom-navigation .nav-item { color: #9ba3b2 !important; }
  :root[data-theme="dark"] .bottom-navigation .nav-item:hover { background-color: #202631 !important; background-image: none !important; color: var(--blue--fg) !important; }
  :root[data-theme="dark"] .bottom-navigation .nav-item.active { background-color: #1a273b !important; background-image: none !important; color: var(--blue--fg) !important; }
  :root[data-theme="dark"] .bottom-navigation .add-button { box-shadow: 0 8px 20px rgba(20, 87, 217, 0.18) !important; }
}
:root[data-theme="dark"] .bottom-nav, :root[data-theme="dark"] .bottom-navigation { --nav-blue: #1457d9; --nav-blue--fg: #6796f1; --nav-blue--bd: #1457d9; --nav-ink: #3a465e; --nav-ink--fg: #bac3d1; --nav-ink--bd: #bac3d1; --nav-muted: #4f5767; --nav-muted--fg: #9ba3b2; --nav-muted--bd: #9ba3b2; }
:root[data-theme="dark"] .bottom-nav .nav-item, :root[data-theme="dark"] .bottom-navigation .nav-item { border-color: transparent; color: var(--nav-muted--fg); }
:root[data-theme="dark"] .bottom-nav .nav-item svg, :root[data-theme="dark"] .bottom-navigation .nav-item svg { fill: none !important; stroke: currentColor !important; }
:root[data-theme="dark"] .bottom-nav .nav-item:hover, :root[data-theme="dark"] .bottom-navigation .nav-item:hover { color: var(--nav-blue--fg) !important; background-color: #1e232f !important; background-image: none !important; }
:root[data-theme="dark"] .bottom-nav .nav-item.active, :root[data-theme="dark"] .bottom-navigation .nav-item.active { color: var(--nav-blue--fg) !important; background-color: #1a273b !important; background-image: none !important; border-color: #23375c !important; }
:root[data-theme="dark"] .sell-button { background-color: var(--nav-blue) !important; background-image: none !important; color: #ffffff !important; }
:root[data-theme="dark"] .sell-button:hover { background-color: #0e43ad !important; background-image: none !important; box-shadow: 0 8px 20px rgba(20, 87, 217, 0.24) !important; }
:root[data-theme="dark"] .category-item { border-color: #282f3d !important; background-color: #171b24 !important; background-image: none !important; color: #bac3d1 !important; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.103); }
:root[data-theme="dark"] .category-item:hover { border-color: #263b63 !important; box-shadow: 0 7px 18px rgba(20, 87, 217, 0.08); }
:root[data-theme="dark"] .category-item.active { background-color: #182235 !important; background-image: none !important; border-color: #273f68 !important; color: #6796f1 !important; box-shadow: 0 6px 16px rgba(20, 87, 217, 0.08); }
:root[data-theme="dark"] .category-icon { background-color: #212734 !important; background-image: none !important; color: #adb7c6 !important; }
:root[data-theme="dark"] .category-item.active .category-icon { background-color: #1d2c40 !important; background-image: none !important; color: #6796f1 !important; }
:root[data-theme="dark"] .category-icon svg { fill: none !important; stroke: currentColor !important; }
:root[data-theme="dark"] .category .category-icon { border-color: #23375d !important; background-color: var(--blue-light) !important; background-image: none !important; color: var(--blue--fg) !important; box-shadow: none !important; }
:root[data-theme="dark"] .category:hover .category-icon, :root[data-theme="dark"] .category.active .category-icon { border-color: var(--blue--bd) !important; background-color: var(--blue) !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 6px 14px rgba(21, 84, 209, 0.2) !important; }
:root[data-theme="dark"] .product-preview-modal .preview-photo { background-color: #222935; background-image: none; }
:root[data-theme="dark"] .preview-category { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .preview-price { color: var(--blue--fg); }
:root[data-theme="dark"] .product-preview-modal .preview-meta { color: var(--muted--fg); }
:root[data-theme="dark"] .preview-seller { border-top-color: var(--border--bd); }
:root[data-theme="dark"] .preview-seller-avatar { background-color: var(--blue-light); background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .preview-seller-text span { color: var(--muted--fg); }
:root[data-theme="dark"] .product-preview-modal .preview-description { color: var(--muted--fg); }
:root[data-theme="dark"] .preview-secondary { border-color: var(--border--bd); background-color: #171b24; background-image: none; color: var(--text--fg); }
:root[data-theme="dark"] .preview-secondary:hover { background-color: var(--surface); background-image: none; }
:root[data-theme="dark"] .message-seller-button { border-color: var(--blue--bd); background-color: #171b24; background-image: none; color: var(--blue--fg); }
:root[data-theme="dark"] .message-seller-button:hover { background-color: var(--blue); background-image: none; color: #ffffff; }
:root[data-theme="dark"] .message-seller-button svg { fill: none; stroke: currentColor; }
/* ===== END DARK THEME ===== */

/* Card text sits in the middle of the white area: name on top, price and condition on one row */
.product-card .product-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; column-gap: 8px; }
.product-card .product-body > .name { grid-column: 1 / -1; }
.product-card .product-body > .badge { margin: 0; align-self: center; }