/* =========================================================
PROJECT: Walanda platform
FILE: marketplace.css
PATH: /src/modules/marketplace/css/marketplace.css
MODULE: marketplace
SCOPE: styling (global / component / page)
PURPOSE: reference-aligned module styling
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: Inter,"Segoe UI",sans-serif;
    background: #F4F7F8;
    color: #2D3A3A;
    -webkit-font-smoothing: antialiased
}

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

a {
    text-decoration: none;
    color: inherit
}

button, input, select {
    font-family: inherit
}

input, select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E6ECEC;
    border-radius: 6px;
    background: #fff;
    font-size: 14px
}

.container {
    width: min(1200px,calc(100% - 40px));
    margin: 0 auto
}

.hero, .page-hero {
    background: linear-gradient(135deg,#2f8f83 0%,#1FA78A 100%);
    color: #fff;
    text-align: center;
    padding: 60px 20px 54px
}

    .hero h1, .page-hero h1 {
        font-size: clamp(30px,4vw,42px);
        margin-bottom: 12px
    }

    .hero p, .page-hero p {
        font-size: 16px;
        opacity: .95;
        max-width: 740px;
        margin: 0 auto
    }

/* ============================================================
   Floating cover header — SCOPED modifier for the Product Detail
   + Shop pages only. Turns the flat green band above into a
   full-bleed background-image header (Bookstore-hero treatment):
   a cover image with the title/identity layered over a darkened
   overlay. The base `.page-hero` (used by ~22 other pages) is
   untouched. Reuses the existing `.marketplace-visual`/img rules
   below for the image layer.
   ============================================================ */
.page-hero.page-hero--cover {
    position: relative;
    min-height: 720px;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--primary, #1FA78A);   /* base behind the image while it loads */
}

    /* Darken/teal-tint so WHITE text stays legible over ANY merchant photo. */
    .page-hero--cover::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(18,38,35,0.32) 0%, rgba(18,38,35,0.62) 100%);
    }

    /* Content floats above the image (z:1) + overlay (z:2). */
    .page-hero--cover .page-hero-wrap {
        position: relative;
        z-index: 3;
        color: #fff;
        text-align: center;
        padding: 40px 0;
    }

    .page-hero--cover .page-hero-wrap h1 {
        font-size: clamp(34px, 5vw, 56px);
        font-weight: 800;
        margin-bottom: 14px;
        color: #fff;
    }

    .page-hero--cover .page-hero-wrap p {
        font-size: 18px;
        opacity: 0.96;
        max-width: 760px;
        margin: 0 auto;
        color: #fff;
    }

    /* "Verified seller" pill rendered inside the Shop identity meta line. */
    .page-hero--cover .shop-hero-verified {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.35);
        font-size: 14px;
        font-weight: 600;
        margin-right: 10px;
    }

.hero-banner {
    max-width: 1600px;
    margin: 20px auto 0;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px rgba(0,0,0,.08)
}

    .hero-banner img {
        width: 100%;
        height: 380px;
        object-fit: cover
    }

.hero-overlay {
    position: absolute;
    left: 32px;
    bottom: 28px;
    color: #fff;
    max-width: 560px
}

    .hero-overlay h2 {
        font-size: 32px;
        margin-bottom: 10px
    }

    .hero-overlay p {
        font-size: 15px;
        line-height: 1.6
    }

.section {
    padding: 34px 0
}

.section-title {
    font-size: 28px;
    margin-bottom: 10px
}

.section-sub {
    color: #6B7C7C;
    font-size: 14px;
    line-height: 1.6
}

.search-box {
    max-width: 760px;
    margin: 28px auto 0;
    padding: 0 20px
}

    .search-box input {
        border-radius: 999px;
        padding: 14px 18px;
        box-shadow: 0 2px 6px rgba(0,0,0,.05)
    }

.filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px auto 0;
    padding: 0 20px
}

.filter-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: #eef3f2;
    cursor: pointer;
    font-size: 13px;
    color: #2D3A3A;
    font-weight: 700
}

    .filter-btn.active {
        background: #2f8f83;
        color: #fff
    }

.two-col-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 24px;
    align-items: start
}

.content-stack {
    display: grid;
    gap: 22px;
    /* Own stacking context so the sticky sidebar (later in the DOM) can
       never paint over the product grid where they meet on scroll. */
    position: relative;
    z-index: 1
}

.sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* Natural height (top-aligned). fillSidebar() rebuilds this column with
       stacked ad cards down to the centre's height — first ad, then "Useful
       Pages", then more ads (static when they fit; rotating only on overflow).
       The gap matches fillSidebar's fit calc so the card count is exact. */
    align-self: start
}

.card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E6ECEC;
    box-shadow: 0 2px 6px rgba(0,0,0,.05)
}

.card-body {
    padding: 20px
}


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

.product-card {
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    transition: .25s ease;
    position: relative;
    border: 1px solid #E6ECEC;
    overflow: hidden
}

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,.08)
    }

    .product-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 12px
    }

.product-title {
    font-size: 14px;
    margin: 10px 0 6px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: auto
}

.product-category {
    font-size: 12px;
    color: #6B7C7C;
    margin-bottom: 6px
}

.product-price {
    display: block;
    margin-top: 4px;
    color: #1FA78A;
    font-weight: 800
}

/* Active-promotion variant: original price struck through, final
   price in primary brand colour beside it. Triggered by
   .product-price--discounted on the wrapper. */
.product-price--discounted {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.product-price-original {
    color: var(--muted);
    font-weight: 600;
    text-decoration: line-through;
    font-size: 0.9em;
}
.product-price-final {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.05em;
}

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2f8f83;
    color: #fff;
    font-size: 10px;
    padding: 5px 7px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase
}

/* Percent-off chip — sits opposite the Sponsored badge so the two never
   overlap on a sponsored + discounted listing. */
.badge--discount {
    left: auto;
    right: 10px;
    background: var(--status-danger-fg);
}

/* Out-of-stock chip — wins over the discount chip; can't buy a sale. */
.badge--oos {
    left: auto;
    right: 10px;
    background: var(--muted);
    color: #fff;
}

.product-stock-note {
    color: var(--status-warning-fg);
    font-size: 0.78rem;
    font-weight: 600;
    margin: 4px 0 0;
}

.product-card.is-out-of-stock { opacity: 0.78; }
.product-card.is-out-of-stock img { filter: grayscale(0.4); }
.product-card.is-out-of-stock .cart-btn,
.product-card.is-out-of-stock .buy-btn,
.product-card .cart-btn:disabled,
.product-card .buy-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
SECTION: floating cart button + toast
DESCRIPTION: Fixed-position cart entry-point auto-mounted on every
             bookstore page by marketplaceController.mountCartButton().
             Pages that want to host the cart button inline can declare
             #market-cart-button anywhere in their markup and the
             controller will populate that slot instead.
========================================================= */

.market-cart-floating {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 50;
}

.market-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--card);
    border: 0;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-size: 1.05rem;
    transition: transform 0.15s ease;
}
.market-cart-btn:hover { transform: translateY(-2px); }

.market-cart-btn-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--status-danger-fg);
    color: var(--card);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.market-toast {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: var(--text-dark);
    color: var(--card);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 60;
}
.market-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.product-card.sponsored {
    border: 2px solid #2f8f83
}


.product-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px
}

    .product-actions button,
    .product-actions a {
        flex: none;
        padding: 6px 10px;
        font-size: 11px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        white-space: nowrap
    }

.cart-btn, .buy-btn {
    background: #1FA78A;
    color: #fff
}

.details-btn, .secondary-btn {
    background: #eef3f2;
    color: #2D3A3A;
    border: 1px solid #E6ECEC
}

.ads-break {
    grid-column: 1 / -1
}

.marketplace-feed-ad {
    grid-column: 1 / -1;
    /* Fixed banner height so a rotating in-feed ad never resizes and shifts the
       products below it. */
    height: var(--ad-banner-h);
    overflow: hidden
}

.marketplace-feed-ad .walanda-ad-slot {
    height: 100%
}

.ad-slot {
    position: relative;
    background: linear-gradient(180deg,#fff 0%,#fbfdfd 100%);
    border: 1px solid #E6ECEC;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    overflow: hidden
}

.ad-slot-shell {
    padding: 18px
}

.sponsored-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7C7C;
    margin-bottom: 12px
}

    .sponsored-label i {
        color: #1FA78A;
        font-size: 10px
    }

.sponsored-card {
    display: block;
    border: 1px solid #E6ECEC;
    border-radius: 14px;
    overflow: hidden;
    background: #fff
}

    .sponsored-card img {
        width: 100%;
        height: 220px;
        object-fit: cover
    }

.sponsored-card-body {
    padding: 16px
}

.sponsored-card h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 10px
}

.sponsored-card p {
    color: #586868;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px
}

.sponsored-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.sponsored-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1FA78A;
    color: #fff;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700
}

.slot-fallback {
    border: 1px dashed #d6e4e2;
    border-radius: 12px;
    background: #fff;
    padding: 22px 20px;
    text-align: center
}

.sidebar-ad {
    /* Flows with the page (NOT sticky) so the Useful Pages card below never
       slides under it on scroll. Stacks multiple ads with consistent spacing. */
    display: flex;
    flex-direction: column;
    gap: var(--space-md)
}

.sidebar-card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    border: 1px solid #E6ECEC
}

    .sidebar-card h4 {
        margin-bottom: 12px;
        color: #2f8f83;
        font-size: 16px
    }

    .sidebar-card ul {
        list-style: none;
        display: grid;
        gap: 10px
    }

    .sidebar-card li {
        font-size: 14px;
        color: #4d5d5d;
        line-height: 1.5
    }

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 24px;
    align-items: start
}

.detail-main {
    display: grid;
    gap: 20px
}

.detail-hero {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E6ECEC;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    overflow: hidden
}

.detail-cover {
    height: 320px
}

    .detail-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.detail-content {
    padding: 26px
}

.detail-price {
    font-size: 28px;
    font-weight: 900;
    color: #1FA78A;
    margin: 10px 0 16px
}

.meta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.meta-chip {
    font-size: 12px;
    background: #f2f7f7;
    color: #496161;
    padding: 8px 10px;
    border-radius: 999px
}

.info-list {
    display: grid;
    gap: 12px
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f1
}

    .info-row:last-child {
        border-bottom: none
    }

/* Used on the product detail page's Seller row to turn the seller
   name into a link to the shop page. Matches the page's existing
   teal accent so it visually feels native. */
.info-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}

    .info-link:hover {
        border-bottom-color: var(--primary);
    }

/* Bookstore search bar — one pill widget with a compact "search
   level" dropdown on the LEFT (small section) and a wide text
   input on the RIGHT (the primary control). Toggling the dropdown
   switches whether the input filters Products or Shops; the input
   placeholder swaps to match.

   Uses grid `auto 1fr` instead of flex on purpose: a flex 2-child
   row with a "fill the rest" input falls into the empty-content
   width-collapse trap (basis:auto resolves to the input's natural
   width which is ~0 for an empty input). Grid `auto 1fr` is
   self-documenting — column 1 = natural width of the select,
   column 2 = whatever's left. */
.search-box.search-box--grouped {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    /* Clip the inner segments to the rounded pill — safe now the toggle has no
       popup. Keeps the left toggle flush with the rounded edge (no white gap). */
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

    /* The native <select> is kept ONLY as the state element the controller
       reads/writes — it's visually replaced by the custom dropdown below,
       because a native popup's highlighted option can't be recoloured by CSS. */
    .search-box.search-box--grouped .search-type-select {
        display: none;
    }

    /* Inline Products/Shops toggle (column 1) — replaces the old floating
       dropdown. Two pill buttons; the active one is brand green. No popup, so
       nothing can be clipped/covered. */
    /* No background box — the toggle sits directly on the white search field so
       it reads as one cohesive control. Only the active pill is coloured; a thin
       divider sets it apart from the text input (the "scope | search" pattern). */
    .search-box.search-box--grouped .search-type-toggle {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        height: 52px;
        padding: 0 8px 0 14px;
        border-right: 1px solid var(--border);
    }
    .search-box.search-box--grouped .search-type-opt {
        border: none;
        background: transparent;
        font: inherit;
        font-weight: 600;
        color: var(--muted);
        padding: 7px 15px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }
    .search-box.search-box--grouped .search-type-opt:hover {
        color: var(--text-dark);
    }
    .search-box.search-box--grouped .search-type-opt.is-active {
        background: var(--primary);
        color: #fff;
    }

    /* Custom dropdown on the LEFT (column 1). The wrapper is the positioning
       context for the popup menu. */
    .search-box.search-box--grouped .search-type {
        position: relative;
        display: flex;
    }

    /* Trigger button — matches the old left segment (divider, chevron, hover),
       and rounds its own left corners since the pill no longer clips via
       overflow:hidden. */
    .search-box.search-box--grouped .search-type-trigger {
        display: inline-flex;
        align-items: center;
        height: 52px;
        padding: 0 36px 0 18px;
        border: none;
        border-right: 1px solid var(--border);
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
        background: #f5fafa;
        font: inherit;
        font-weight: 600;
        color: var(--text-dark);
        cursor: pointer;
        outline: none;
        white-space: nowrap;
        /* Custom chevron (teal) — same asset as the old select. */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231FA78A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 10px 8px;
        transition: background-color var(--transition-fast);
    }

    .search-box.search-box--grouped .search-type-trigger:hover,
    .search-box.search-box--grouped .search-type.is-open .search-type-trigger {
        background-color: #ecf6f5;
    }

    /* Options panel — fully ours, so the highlight is brand GREEN. */
    .search-box.search-box--grouped .search-type-menu {
        /* Viewport-anchored popover. position:fixed (no transform/filter ancestor
           exists) means NO ancestor overflow or stacking context can clip or
           trap it — it always floats above the page. top/left/min-width are set
           by JS from the trigger's rect each time it opens. */
        position: fixed;
        margin: 0;
        padding: 6px;
        list-style: none;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: 100;
    }

    .search-box.search-box--grouped .search-type-menu[hidden] {
        display: none;
    }

    .search-box.search-box--grouped .search-type-menu li {
        padding: 9px 16px;
        border-radius: var(--radius-md);
        font-weight: 600;
        color: var(--text-dark);
        cursor: pointer;
        white-space: nowrap;
    }

    .search-box.search-box--grouped .search-type-menu li:hover,
    .search-box.search-box--grouped .search-type-menu li[aria-selected="true"] {
        background-color: var(--primary);
        color: #fff;
    }

    /* Wide input on the RIGHT (column 2). Overrides the base
       .search-box input rule that forces width:100% with its own
       border + border-radius — the outer pill already supplies
       both, the input itself is just a transparent typing surface. */
    .search-box.search-box--grouped input,
    .search-box.search-box--grouped input:focus {
        width: 100%;
        height: 52px;
        padding: 0 18px;
        border: none;
        border-radius: 0;
        background: transparent;
        font-size: 1rem;
        outline: none;
        box-shadow: none;
    }

.dashboard-strip {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px
}

.dashboard-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.dashboard-card {
    background: #fff;
    border: 1px solid #E6ECEC;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    border-radius: 16px;
    padding: 18px
}

    .dashboard-card h4 {
        font-size: 15px;
        margin-bottom: 8px
    }

    .dashboard-card p {
        font-size: 13px;
        color: #6B7C7C;
        line-height: 1.6
    }

.auth-note {
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef8f6;
    color: #25675e;
    font-size: 13px;
    line-height: 1.6
}

.walanda-footer {
    background: linear-gradient(180deg,#3AA49B,#2F8F83);
    color: #fff;
    padding: 30px 0 20px;
    margin-top: 34px
}

.footer-divider {
    height: 2px;
    background: rgba(255,255,255,.35);
    width: 100%;
    margin-bottom: 25px
}

.footer-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 0 30px
}

.footer-logo {
    margin-bottom: 20px
}

.footer-logo-img {
    height: 60px
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 25px
}

.footer-col h4 {
    font-size: 15px;
    margin-bottom: 12px;
    color: #fff
}

.footer-col p, .footer-col a {
    display: block;
    font-size: 13px;
    color: #d7eeee;
    margin-bottom: 6px
}

    .footer-col a:hover {
        color: #fff
    }

.border-left {
    border-left: 1px solid rgba(255,255,255,.15);
    padding-left: 18px
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

    .social-icons a {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #0c4f52;
        border-radius: 50%;
        font-size: 13px
    }

.footer-bottom {
    text-align: right;
    margin-top: 25px;
    font-size: 13px;
    color: #cdeeee
}


@media (max-width:1600px) {
    .product-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media (max-width:1200px) {
    .product-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .dashboard-strip {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width:1100px) {
    .two-col-layout, .detail-layout {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .sidebar-ad {
        position: static
    }
}

@media (max-width:900px) {
    .product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .hero-banner img {
        height: 260px
    }

    .hero-overlay {
        left: 18px;
        bottom: 18px
    }

        .hero-overlay h2 {
            font-size: 24px
        }
}

@media (max-width:640px) {
    .product-grid, .dashboard-strip {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:480px) {
    .container {
        width: min(1200px,calc(100% - 28px))
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .border-left {
        border-left: none;
        padding-left: 0
    }

    .footer-bottom {
        text-align: left
    }
}

/* =========================================================
SECTION: MARKETPLACE HERO
FULL BACKGROUND HERO
========================================================= */

.marketplace-hero {
    position: relative;
    width: 100%;
    min-height: 720px;
    /* overflow stays VISIBLE so the search-box's custom dropdown can float out
       below the hero and overlay the section beneath it. The background image is
       clipped on its own container (.marketplace-visual) instead. */
    overflow: visible;
    background: #fff;
}

/* Full hero background image — clipped here (not on the hero) so the dropdown
   can escape the hero bounds. */
.marketplace-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

    .marketplace-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

/* Overlay for readability */
.marketplace-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.05) 100% );
    z-index: 2;
}

/* Content layer */
.marketplace-hero-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 720px;
    padding: 50px 0;
}

/* Left content */
.marketplace-content {
    max-width: 650px;
}

/* Title */
.marketplace-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 25px;
    color: var(--primary);
}

    .marketplace-title .highlight {
        color: #f2b119;
    }

/* Description */
.marketplace-description {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 35px;
    max-width: 550px;
}

/* Features row */
.marketplace-features {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: nowrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .feature-item i {
        font-size: 22px;
        color: var(--primary);
    }

    .feature-item span {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-dark);
        white-space: nowrap;
    }

/* Search */
.search-box {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 900px;
    margin: -35px auto 30px;
    padding: 0 20px;
}

    .search-box input {
        width: 100%;
        height: 58px;
        padding: 0 22px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
        font-size: 1rem;
        outline: none;
        transition: 0.3s ease;
    }

        .search-box input:focus {
            border-color: var(--primary);
        }

/* Categories */
.marketplace-categories {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 30px 20px;
    background: #fff;
    border-top: 1px solid var(--border);
}

    .marketplace-categories a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--primary);
        font-weight: 600;
        transition: 0.3s ease;
    }

    .marketplace-categories i {
        font-size: 24px;
    }

    .marketplace-categories a:hover {
        transform: translateY(-4px);
    }

    /* Active state — applied by the controller's chip-click handler
       in Shops mode so the user sees which category is filtering
       the shop list. Subtle teal accent + underline. Products mode
       chips navigate away so they never carry this class. */
    .marketplace-categories a.is-active {
        color: var(--primary);
        border-bottom: 2px solid var(--primary);
        padding-bottom: 2px;
    }

/* Responsive */
@media (max-width: 1200px) {
    .marketplace-title {
        font-size: 3.4rem;
    }

    .marketplace-features {
        flex-wrap: wrap;
    }
}

@media (max-width: 991px) {
    .marketplace-hero {
        min-height: 620px;
    }

    .marketplace-hero-wrap {
        min-height: 620px;
        padding: 40px 0;
    }

    .marketplace-title {
        font-size: 3rem;
    }

    .marketplace-features {
        flex-wrap: wrap;
        gap: 18px;
    }

    .marketplace-categories {
        flex-wrap: wrap;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .marketplace-title {
        font-size: 2.4rem;
    }

    .marketplace-description {
        font-size: 1rem;
    }

    .marketplace-features {
        flex-direction: column;
        align-items: flex-start;
    }

    .marketplace-categories {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .marketplace-title {
        font-size: 2rem;
    }

    .marketplace-description {
        max-width: 100%;
    }
}

/* =========================================================
END OF FILE
FILE: marketplace.css
PATH: /src/modules/marketplace/css/marketplace.css
MODULE: marketplace
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */