/* ============================================================
   Daman — "View all" destination pages.

   Two pages share this sheet: the product collections (/collections/{key}) and the
   shop directory (/vendors). Both are the landing side of a homepage row's "View all",
   so both reuse the homepage's own components — .td-prow / .artlist for products,
   .mp-vendor-card for shops. Everything here is the page CHROME around them plus the
   two overrides those components need off the homepage:

     1. the vendor rail is a horizontal snap-scroller; here it must wrap into a grid;
     2. td-home.css scopes its mobile 2-up product grid to .td-home-page, so the same
        rule is restated for .dc-collection-page.

   Palette comes from td-home.css (--td-*), which both pages load first.
   RTL-safe throughout: logical properties only, no physical left/right.
   ============================================================ */

.dc-page {
    padding-block-start: 6px;
}

/* ── Service tile with no destination ─────────────────────────
   Rendered as a <span> rather than an <a href="javascript:;"> (see ServiceIcons/Default.cshtml).
   .td-service is display:flex on an <a>; a <span> needs that restated, and the hover lift has
   to go — it is the same "this is clickable" promise the anchor was making falsely. */
.td-service--static {
    display: flex;
}

.td-service--static:hover {
    background: transparent;
    transform: none;
    color: inherit;
}

/* ── Ad-row card with no destination ──────────────────────────
   Rendered as a <div> rather than an <a href="javascript:;"> (see AdRow/Default.cshtml).
   The base .td-ad still lifts on hover, which on a card that cannot be clicked is the same
   false promise in another form — so the lift is cancelled here. */
.td-ad--static:hover {
    transform: none;
    box-shadow: none;
}

/* ── Page header ───────────────────────────────────────────── */
.dc-head {
    margin-block-end: 16px;
}

.dc-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--td-ink, #15131f);
    margin: 0;
}

.dc-sub {
    margin: 6px 0 0;
    color: var(--td-muted, #5b586b);
    font-size: .93rem;
}

/* ── Collection tab strip ──────────────────────────────────── */
.dc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 18px;
}

.dc-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--td-pill, 999px);
    border: 1px solid var(--td-border, #e9e7f2);
    background: var(--td-surface, #fff);
    color: var(--td-text, #1c1a29);
    font-size: .87rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--td-dur, .24s) var(--td-ease, ease);
}

.dc-tab:hover {
    border-color: var(--td-primary, #4f46e5);
    color: var(--td-primary, #4f46e5);
    text-decoration: none;
}

.dc-tab.active {
    background: var(--td-primary, #4f46e5);
    border-color: var(--td-primary, #4f46e5);
    color: #fff;
    box-shadow: var(--td-shadow-brand, 0 12px 26px -10px rgba(79, 70, 229, .5));
}

.dc-tab.active:hover {
    color: #fff;
}

/* ── Directory filters ─────────────────────────────────────── */
.dc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-block-end: 20px;
}

/* Two-class selectors throughout this block on purpose. Bootstrap's .form-control sets
   width:100%, ships in theme.css, and theme.css loads AFTER this sheet — at equal
   specificity it wins, the select stretches to the full row, and every control ends up
   wrapped onto its own line. .dc-filters .x outranks it. */
.dc-filters .dc-search {
    position: relative;
    flex: 1 1 260px;
    max-inline-size: 520px;
}

.dc-search .fa {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--td-soft, #9491a3);
    pointer-events: none;
}

.dc-filters .dc-search .form-control {
    inline-size: 100%;
    padding-inline-start: 34px;
    border-radius: var(--td-pill, 999px);
}

.dc-filters .dc-sort {
    flex: 0 0 auto;
    inline-size: auto;
    min-inline-size: 170px;
    border-radius: var(--td-pill, 999px);
}

/* ============================================================
   SHOP DIRECTORY (/vendors)
   ============================================================ */

/* ── Hero: title + real marketplace counters ───────────────── */
.dcv-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    margin-block-end: 18px;
    border-radius: var(--td-radius-xl, 22px);
    background: var(--td-grad-brand, linear-gradient(135deg, #5b51ec, #4f46e5 45%, #6d5cf0));
    color: #fff;
    box-shadow: var(--td-shadow-brand, 0 12px 26px -10px rgba(79, 70, 229, .5));
}

.dcv-hero .dc-title {
    color: #fff;
}

.dcv-hero .dc-sub {
    color: rgba(255, 255, 255, .82);
}

.dcv-stats {
    display: flex;
    gap: 10px;
}

.dcv-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-inline-size: 92px;
    padding: 10px 14px;
    border-radius: var(--td-radius, 12px);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
}

.dcv-stat-num {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.dcv-stat-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

/* ── The grid ──────────────────────────────────────────────── */
.dcv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}

/* ── The homepage rail: one row, two once the shops outgrow it ─
   Same card as the directory, different container.

   Column-flow grid: cards fill DOWN each column then move right, so a horizontal
   scroll advances by a whole column. ONE row is the default here — the second row is
   added by td-home.js (.dcv-rail--two) only when the shops no longer fit across the
   rail at the current width. Two rows on a wide screen with four shops is a half-empty
   band; one row with twenty shops hides most of them. The row count has to follow the
   content, and CSS cannot count children.

   Two-class selectors (.mp-vendor-cards.dcv-rail): the base class is the homepage's
   original single-row flex scroller and its rules must lose to these, whatever order
   the stylesheets end up in. */
.dcv-rail,
.mp-vendor-cards.dcv-rail {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 1fr;
    grid-auto-columns: 268px;
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Room for the card's hover lift, which the scroller would otherwise clip. */
    padding-block: 6px 10px;
    /* "safe" is doing real work: while the marketplace is small the shops sit centred
       instead of huddling against one edge under a half-empty band, and the moment the
       rail overflows it reverts to start — a plain `center` would push the first column
       out of reach off the scroll origin. */
    justify-content: safe center;
}

/* Set by td-home.js once the cards no longer fit on one line. */
.dcv-rail--two,
.mp-vendor-cards.dcv-rail--two {
    grid-template-rows: repeat(2, 1fr);
}

.dcv-rail > *,
.mp-vendor-cards.dcv-rail > .dcv-card {
    inline-size: auto;
    min-inline-size: 0;
    scroll-snap-align: start;
}

/* The professionals rail. Its cards are the module's .pro-card-pro (from professionalist.css),
   which the directory lays out at minmax(300px, 1fr) — i.e. 300px is the card's FLOOR, not its
   working width, and at exactly 300 the trade chip, the experience line and the price all clip.
   340 is what the directory's own grid settles on at desktop widths. */
.dcv-rail--pros {
    grid-auto-columns: 340px;
}

/* ── The card ──────────────────────────────────────────────── */
.dcv-card {
    position: relative;
    border-radius: var(--td-radius-lg, 16px);
    border: 1px solid var(--td-border, #e9e7f2);
    background: var(--td-surface, #fff);
    box-shadow: var(--td-shadow-sm, 0 1px 3px rgba(21, 19, 31, .06));
    overflow: hidden;
    transition: transform var(--td-dur, .24s) var(--td-ease, ease),
                box-shadow var(--td-dur, .24s) var(--td-ease, ease),
                border-color var(--td-dur, .24s) var(--td-ease, ease);
}

.dcv-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--td-primary-rgb, 79, 70, 229), .38);
    box-shadow: var(--td-shadow-hover, 0 22px 44px -16px rgba(79, 70, 229, .26));
}

.dcv-link {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    color: inherit;
    text-decoration: none;
}

.dcv-link:hover,
.dcv-link:focus {
    color: inherit;
    text-decoration: none;
}

/* Cover */
.dcv-cover {
    position: relative;
    block-size: 92px;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(var(--td-primary-rgb, 79, 70, 229), .16),
        rgba(var(--td-accent-rgb, 240, 160, 32), .16));
}

.dcv-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .5s var(--td-ease, ease);
}

.dcv-card:hover .dcv-cover img {
    transform: scale(1.06);
}

/* A shop with no cover gets a soft brand wash, never a grey hole. */
.dcv-cover--empty::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(var(--td-ink-rgb, 21, 19, 31), .07) 1px, transparent 0);
    background-size: 14px 14px;
}

/* Cover badge — rating, or the neutral "new shop" */
.dcv-badge {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--td-pill, 999px);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.dcv-badge--rating {
    background: rgba(255, 255, 255, .94);
    color: var(--td-ink, #15131f);
    box-shadow: 0 2px 8px rgba(21, 19, 31, .16);
}

.dcv-badge--rating .fa {
    color: var(--td-accent, #f0a020);
}

.dcv-badge-sub {
    font-weight: 500;
    color: var(--td-muted, #5b586b);
}

.dcv-badge--new {
    background: rgba(255, 255, 255, .92);
    color: var(--td-primary-dark, #3730b8);
    box-shadow: 0 2px 8px rgba(21, 19, 31, .14);
}

/* Logo avatar, overlapping the cover */
.dcv-avatar {
    position: relative;
    z-index: 2;
    inline-size: 66px;
    block-size: 66px;
    margin: -33px 16px 0;
    border-radius: var(--td-radius-round, 50%);
    border: 3px solid var(--td-surface, #fff);
    background: var(--td-surface, #fff);
    box-shadow: 0 4px 12px -4px rgba(21, 19, 31, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow var(--td-dur, .24s) var(--td-ease, ease);
}

.dcv-card:hover .dcv-avatar {
    box-shadow: 0 0 0 3px rgba(var(--td-primary-rgb, 79, 70, 229), .28),
                0 8px 18px -6px rgba(var(--td-primary-rgb, 79, 70, 229), .4);
}

.dcv-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.dcv-avatar .fa {
    font-size: 1.5rem;
    color: var(--td-soft, #9491a3);
}

/* Body */
.dcv-body {
    flex: 1 1 auto;
    padding: 10px 16px 12px;
}

.dcv-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--td-ink, #15131f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dcv-desc {
    margin: 5px 0 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--td-muted, #5b586b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dcv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-start: 9px;
    padding: 4px 10px;
    border-radius: var(--td-pill, 999px);
    background: var(--td-surface-2, #f1eefb);
    color: var(--td-primary-dark, #3730b8);
    font-size: .76rem;
    font-weight: 600;
}

/* Footer CTA */
.dcv-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 11px 16px;
    border-block-start: 1px solid var(--td-border, #e9e7f2);
    color: var(--td-primary, #4f46e5);
    font-size: .83rem;
    font-weight: 700;
}

.dcv-cta .fa {
    transition: transform var(--td-dur, .24s) var(--td-ease, ease);
}

/* The arrow must point the way the language reads. */
[dir="rtl"] .dcv-cta .fa {
    transform: scaleX(-1);
}

.dcv-card:hover .dcv-cta .fa {
    transform: translateX(3px);
}

[dir="rtl"] .dcv-card:hover .dcv-cta .fa {
    transform: scaleX(-1) translateX(3px);
}

/* Empty state */
.dcv-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--td-muted, #5b586b);
}

.dcv-empty .fa {
    font-size: 2.4rem;
    color: var(--td-soft, #9491a3);
    margin-block-end: 10px;
}

.dcv-empty p {
    margin: 0;
}

/* ── Product collection body ───────────────────────────────── */
.dc-collection-page .dc-feed {
    padding: 18px 18px 10px;
}

@media (max-width: 768px) {
    .dc-page {
        padding-block-start: 4px;
    }

    .dc-title {
        font-size: 1.25rem;
    }

    .dcv-hero {
        padding: 16px;
        border-radius: var(--td-radius-lg, 16px);
        align-items: stretch;
    }

    .dcv-stats {
        inline-size: 100%;
    }

    .dcv-stat {
        flex: 1 1 0;
        min-inline-size: 0;
    }

    /* Two shops per row on a phone. The cover shrinks and the pitch is dropped —
       at this width the name, score and catalogue size are the decision. */
    .dcv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dcv-cover {
        block-size: 68px;
    }

    .dcv-avatar {
        inline-size: 54px;
        block-size: 54px;
        margin: -27px 12px 0;
    }

    .dcv-body {
        padding: 8px 12px 10px;
    }

    .dcv-name {
        font-size: .9rem;
    }

    .dcv-desc {
        display: none;
    }

    .dcv-cta {
        padding: 9px 12px;
        font-size: .78rem;
    }

    /* The rail keeps scrolling sideways in two rows; only the column narrows so a
       phone shows one full card plus a slice of the next — the affordance that tells
       a thumb there is more to the right. */
    .dcv-rail,
    .mp-vendor-cards.dcv-rail {
        grid-auto-columns: 62vw;
        gap: 10px;
        padding-inline: 12px;
    }

    .dcv-rail--pros {
        grid-auto-columns: 78vw;
    }

    /* Restated from td-home.css, which scopes the homepage copy to .td-home-page.
       Two clean columns on a phone, same as every product row on the homepage. */
    .dc-collection-page .dc-feed {
        border-radius: 0;
        border-inline: none;
        padding: 14px 0 6px;
    }

    .dc-collection-page .artlist.artlist-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 10px;
        padding: 4px 12px 6px;
        margin: 0 !important;
        align-items: stretch;
    }

    /* The .artlist container carries clearfix ::before/::after pseudo-elements. Under
       display:grid those become grid ITEMS — ::before steals the first cell and ::after
       the last, producing a phantom empty cell in the first and last row. */
    .dc-collection-page .artlist.artlist-grid::before,
    .dc-collection-page .artlist.artlist-grid::after {
        content: none !important;
        display: none !important;
    }

    .dc-collection-page .artlist.artlist-grid > .art {
        inline-size: auto !important;
        max-inline-size: none !important;
        min-inline-size: 0 !important;
        margin: 0 !important;
        flex: none !important;
    }
}