/* =========================================================================
   Marketplace homepage
   Blocks introduced when index.html moved from a DTC brand page to a
   marketplace. Card components (product-card, category-card, curated-card,
   testimonial-card) are reused from components.css and homepage.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — search first
   ------------------------------------------------------------------------- */
.hero-search {
    position: relative;
    overflow: hidden;
    background-color: var(--color-cream);
    padding: var(--space-16) 0 var(--space-20);
}

.hero-search__mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    opacity: 0.28;
}

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

.hero-search::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
                rgba(245, 240, 230, 0.97) 40%,
                rgba(245, 240, 230, 0.78) 100%);
}

.hero-search__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
}

.hero-search__title {
    font-family: var(--font-headline);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-charcoal);
    margin-bottom: var(--space-4);
}

.hero-search__subtitle {
    font-size: var(--text-lg);
    color: var(--color-charcoal);
    margin-bottom: var(--space-8);
}

/* One pill: the button sits inside the field rather than beside it, so the
   two shapes stop competing. */
.hero-search__form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 5px 5px var(--space-6);
    margin-bottom: var(--space-5);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 14px rgba(120, 90, 40, 0.08);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-search__form:focus-within {
    border-color: var(--color-gold);
    box-shadow: 0 4px 20px rgba(201, 169, 98, 0.22);
}

.hero-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-charcoal);
}

.hero-search__input:focus {
    outline: none;
}

.hero-search__input::placeholder {
    color: var(--color-medium-gray);
}

.hero-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-charcoal);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.hero-search__submit:hover {
    background-color: var(--color-gold);
}

.hero-search__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
}

.hero-search__chips-label {
    color: var(--color-charcoal);
    opacity: 0.7;
}

.hero-search__chip {
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-charcoal);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.hero-search__chip:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* -------------------------------------------------------------------------
   Shop byline on product cards
   Every card names the shop that sells it — the marketplace signal that
   propagates across the most sections.
   ------------------------------------------------------------------------- */
.product-card__shop {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gold);
    text-decoration: none;
    margin-bottom: var(--space-1);
}

.product-card__shop:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Product grids — 5 across, 2 rows
   Overrides the 4-column .products-grid in homepage.css and the 6-column
   .new-arrivals-grid, so both listing sections read as one 5x2 block.
   ------------------------------------------------------------------------- */
.products-grid,
.new-arrivals-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
}

/* Cards carry title and price only — no rating, tag, or byline. */
.product-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.product-card__price-current {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-charcoal);
}

.product-card__price-original {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-medium-gray);
    text-decoration: line-through;
}

/* -------------------------------------------------------------------------
   Shop cards
   Sized so that three fill the row — the catalog is thin and a grid that
   needs twelve tiles would expose it.
   ------------------------------------------------------------------------- */
.shop-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.shop-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-lg);
}

.shop-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.shop-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: 0 0 auto;
    background-color: var(--color-cream);
}

.shop-card__name {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    color: var(--color-charcoal);
}

.shop-card__meta {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-gold);
}

.shop-card__blurb {
    font-size: var(--text-sm);
    line-height: 1.6;
    flex: 1;
}

.shop-card__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.shop-card__thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.shop-card__cta {
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-charcoal);
    text-decoration: none;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.shop-card__cta:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
}

/* -------------------------------------------------------------------------
   How it works
   Occupies the slot the Craftsmanship section used to hold, and states the
   opposite: designers make the art, partners make the goods.
   ------------------------------------------------------------------------- */
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    list-style: none;
    counter-reset: none;
}

.how-step {
    text-align: center;
}

.how-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background-color: var(--color-gold);
    color: var(--color-white);
    font-family: var(--font-headline);
    font-size: var(--text-xl);
}

.how-step__title {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    color: var(--color-charcoal);
    margin-bottom: var(--space-2);
}

.how-step__desc {
    font-size: var(--text-base);
    line-height: 1.65;
}

/* -------------------------------------------------------------------------
   Seller recruitment band
   ------------------------------------------------------------------------- */
.seller-cta {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    padding: var(--space-16) 0;
}

.seller-cta__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
    align-items: center;
}

.seller-cta .section__title,
.seller-cta__lead,
.seller-cta__points li {
    color: var(--color-white);
}

.seller-cta .section__title {
    text-align: left;
    margin-bottom: var(--space-4);
}

.seller-cta__lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.seller-cta__points {
    list-style: none;
    margin-bottom: var(--space-8);
}

.seller-cta__points li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
}

.seller-cta__points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-weight: var(--font-bold);
}

.seller-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.seller-cta__image img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   Buyer protection
   Replaces the trust bar that used to advertise "Made in Our Own Factory".
   ------------------------------------------------------------------------- */
.buyer-protection__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.buyer-protection__item h3 {
    font-family: var(--font-headline);
    font-size: var(--text-lg);
    color: var(--color-charcoal);
    margin-bottom: var(--space-2);
}

.buyer-protection__item p {
    font-size: var(--text-sm);
    line-height: 1.6;
}

.buyer-protection__item a {
    color: var(--color-gold);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    .shop-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .buyer-protection__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .seller-cta__inner {
        grid-template-columns: 1fr;
    }

    .seller-cta__image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .products-grid,
    .new-arrivals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .hero-search {
        padding: var(--space-10) 0 var(--space-12);
    }

    .hero-search__mosaic {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-search__form {
        padding-left: var(--space-4);
    }

    .hero-search__submit {
        padding: var(--space-3);
    }

    .hero-search__submit span {
        display: none;
    }


    .shop-cards {
        grid-template-columns: 1fr;
    }

    .how-steps {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
}

@media (max-width: 540px) {
    .buyer-protection__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* -------------------------------------------------------------------------
   Seasonal rails
   Each season gets a drawn banner rather than seasonal product photography,
   which the image library does not have. The heading sits on the banner so
   the artwork carries text rather than standing empty above it.
   ------------------------------------------------------------------------- */
.season-rail__banner {
    position: relative;
    margin-bottom: var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    line-height: 0;
}

.season-rail__banner img {
    width: 100%;
    height: clamp(200px, 22vw, 280px);
    object-fit: cover;
    display: block;
}

.season-rail__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) clamp(var(--space-6), 6vw, var(--space-16));
    line-height: 1.2;
    color: var(--color-white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.season-rail__title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--color-white);
}

.season-rail__lead {
    font-size: var(--text-lg);
    max-width: 42ch;
    line-height: 1.45;
}

.season-rail__cta {
    align-self: flex-start;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-charcoal);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    text-shadow: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.season-rail__cta:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
}

/* Deals ------------------------------------------------------------------- */
.todays-deals .section__badge {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.product-card__badge--discount {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    font-weight: var(--font-bold);
}

@media (max-width: 1200px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {

    .season-rail__banner {
        margin-bottom: var(--space-6);
    }
}

/* Picked for You is a single row; it shares the five-column track. */
.products-grid--rail {
    grid-template-columns: repeat(5, 1fr);
}

/* Deals countdown --------------------------------------------------------- */
.deals-badge__clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}