/* =========================================================
   VENDIAC MARKETPLACE 1.6.0 — COMPLETE POLISH
   Compact Vendiac hero, exact wordmark, black text everywhere,
   lighter marketplace surfaces and instant-feeling interactions.
========================================================= */

:root {
    --vm-yellow: #ffd400;
    --vm-yellow-strong: #f5c900;
    --vm-yellow-soft: #fff2a6;
    --vm-ink: #111114;
    --vm-muted: #111114;
    --vm-page: #f4f4f6;
    --vm-panel: #ffffff;
    --vm-line: #dedee4;
    --vm-line-strong: #c9c9d0;
    --vm-max: 1140px;
    --vm-purple: var(--vm-yellow);
    --vm-purple-dark: var(--vm-ink);
    --vm-purple-soft: var(--vm-yellow-soft);
    --vm-text: var(--vm-ink);
    --vm-text-soft: var(--vm-ink);
    --vm-white: #ffffff;
    --vm-black: var(--vm-ink);
    --vm-black-2: var(--vm-ink);
}

html {
    background: var(--vm-page) !important;
    color-scheme: light !important;
    scroll-behavior: smooth !important;
}

body.vm-body {
    min-width: 300px !important;
    background: var(--vm-page) !important;
    color: var(--vm-ink) !important;
}

/* The Marketplace uses black copy everywhere, including cart, product,
   store, checkout, menus, labels, helper text and form placeholders. */
body.vm-body :where(
    h1, h2, h3, h4, h5, h6,
    p, span, small, strong, b, em,
    dt, dd, label, legend,
    li, th, td, caption, summary, address, time, cite,
    blockquote, figcaption, code, pre,
    a, button, input, select, option, textarea
) {
    color: var(--vm-ink) !important;
}

body.vm-body :where(input, textarea)::placeholder {
    color: var(--vm-ink) !important;
    opacity: 1 !important;
}

body.vm-body svg {
    color: var(--vm-ink) !important;
    stroke: currentColor !important;
}

body.vm-body :focus-visible {
    outline: 2px solid var(--vm-ink) !important;
    outline-offset: 2px !important;
}

body.vm-body a,
body.vm-body button {
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        transform 120ms ease !important;
}

body.vm-body a:active,
body.vm-body button:active {
    transform: translateY(1px);
}

/* The progressive-navigation layer never puts a blocking loader over the UI. */
body.vm-body.vm-navigation-pending #vmMain {
    opacity: .995;
}

#marketCategories,
.vm-product-grid,
.vm-cart-layout,
.vm-checkout-layout {
    scroll-margin-top: 86px;
}

/* ---------- Top navigation ---------- */
.vm-header {
    min-height: 0 !important;
    background: #ffffff !important;
    border-top: 3px solid var(--vm-yellow) !important;
    border-bottom: 1px solid #e3e3e7 !important;
    box-shadow: none !important;
}

.vm-header-main {
    width: min(var(--vm-max), calc(100% - 32px)) !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vm-header .vm-menu-button {
    order: 1 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--vm-ink) !important;
    box-shadow: none !important;
}

.vm-header .vm-menu-button:hover,
.vm-header .vm-menu-button:focus-visible,
.vm-header .vm-header-action:hover,
.vm-header .vm-header-action:focus-visible,
.vm-header .vm-cart-link:hover,
.vm-header .vm-cart-link:focus-visible {
    background: #f2f2f3 !important;
}

.vm-header .vm-menu-button svg {
    width: 31px !important;
    height: 31px !important;
    stroke-width: 2.15 !important;
}

.vm-header .vm-brand {
    order: 2 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
}

.vm-brand-wordmark {
    display: block !important;
    width: 178px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

.vm-header .vm-header-actions {
    order: 3 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.vm-header .vm-header-action,
.vm-header .vm-cart-link {
    position: relative !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--vm-ink) !important;
    box-shadow: none !important;
}

.vm-header .vm-search-toggle svg,
.vm-header .vm-account-link svg,
.vm-header .vm-cart-link svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.85 !important;
}

.vm-header .vm-cart-count,
.vm-mobile-bottom-nav b {
    background: var(--vm-yellow) !important;
    color: var(--vm-ink) !important;
    border-color: #ffffff !important;
}

.vm-header-search-panel[hidden] {
    display: none !important;
}

.vm-header-search-panel {
    width: 100% !important;
    padding: 10px 16px 13px !important;
    background: #ffffff !important;
    border-top: 1px solid #ededf0 !important;
}

.vm-header-search-panel .vm-search.vm-search-primary {
    width: min(680px, 100%) !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 1px solid #cfcfd5 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.vm-header-search-panel .vm-search.vm-search-primary input {
    order: 1 !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    font-size: 14px !important;
}

.vm-header-search-panel .vm-search.vm-search-primary button {
    order: 2 !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 44px !important;
    border-left: 1px solid #dedee3 !important;
    background: #ffffff !important;
    color: var(--vm-ink) !important;
}

/* ---------- Drawer and language ---------- */
.vm-overlay {
    background: rgba(17, 17, 20, .38) !important;
}

.vm-sidebar,
.market-language-sheet {
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    box-shadow: none !important;
}

.vm-sidebar {
    border-right: 1px solid var(--vm-line) !important;
}

.vm-sidebar-head,
.market-language-sheet-head {
    border-color: var(--vm-line) !important;
}

.vm-sidebar-logo {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.vm-sidebar-wordmark {
    display: block !important;
    width: 142px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

.vm-sidebar-logo strong {
    font-size: 12px !important;
    font-weight: 800 !important;
}

.vm-sidebar-close,
.market-language-close,
.market-language-option,
.vm-sidebar-language-row .market-language-switch {
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    border-color: var(--vm-line) !important;
}

.vm-nav-label,
.vm-sidebar-nav a,
.vm-account-row,
.vm-account-copy small,
.vm-sidebar-language-row small,
.market-language-sheet-head p {
    color: var(--vm-ink) !important;
}

.vm-sidebar-nav a.active,
.vm-sidebar-nav a:hover,
.vm-sidebar-primary,
.market-language-option[aria-checked="true"] {
    background: var(--vm-yellow-soft) !important;
    color: var(--vm-ink) !important;
}

.vm-avatar {
    background: var(--vm-yellow) !important;
    color: var(--vm-ink) !important;
}

/* ---------- Page frame ---------- */
.vm-main {
    width: min(var(--vm-max), calc(100% - 32px)) !important;
    margin: 0 auto !important;
    padding: 22px 0 88px !important;
}

.vm-footer {
    width: min(var(--vm-max), calc(100% - 32px)) !important;
    color: var(--vm-ink) !important;
    border-top-color: var(--vm-line) !important;
}

.vm-footer a,
.vm-footer span {
    color: var(--vm-ink) !important;
}

/* ---------- Compact publish hero ---------- */
.vm-market-banner {
    min-height: 248px !important;
    padding: 28px 32px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 275px) !important;
    align-items: center !important;
    gap: 24px !important;
    overflow: hidden !important;
    border: 1px solid #d9d9df !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.vm-market-banner::before,
.vm-market-banner::after {
    content: none !important;
    display: none !important;
}

.vm-market-banner-copy {
    max-width: 690px !important;
}

.vm-market-kicker {
    min-height: 26px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    background: var(--vm-yellow-soft) !important;
    color: var(--vm-ink) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.vm-market-kicker svg {
    width: 13px !important;
    height: 13px !important;
}

.vm-market-banner h1 {
    max-width: 670px !important;
    margin: 13px 0 9px !important;
    color: var(--vm-ink) !important;
    font-size: clamp(34px, 4vw, 49px) !important;
    line-height: .99 !important;
    letter-spacing: -.052em !important;
}

.vm-market-banner p {
    max-width: 620px !important;
    margin: 0 !important;
    color: var(--vm-ink) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.vm-market-cta {
    width: fit-content !important;
    min-width: 216px !important;
    min-height: 46px !important;
    margin-top: 19px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border: 1px solid #d6b400 !important;
    border-radius: 13px !important;
    background: var(--vm-yellow) !important;
    color: var(--vm-ink) !important;
    font-size: 13px !important;
    font-weight: 880 !important;
    box-shadow: none !important;
}

.vm-market-cta:hover,
.vm-button-primary:hover,
.vm-sidebar-primary:hover {
    background: var(--vm-yellow-strong) !important;
}

.vm-market-banner-art {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
}

.vm-market-banner-art img {
    width: min(100%, 270px) !important;
    height: auto !important;
    max-height: 220px !important;
    display: block !important;
    object-fit: contain !important;
}

/* ---------- ThaiMart-scale category strip ---------- */
.vm-category-section {
    margin-top: 18px !important;
}

.vm-mobile-section-heading h2 {
    margin: 0 0 10px !important;
    color: var(--vm-ink) !important;
    font-size: 19px !important;
    letter-spacing: -.025em !important;
}

.vm-market-categories {
    width: 100% !important;
    min-height: 78px !important;
    padding: 8px 9px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    border: 1px solid #e0e0e4 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    scrollbar-width: none !important;
}

.vm-market-category {
    min-width: 100px !important;
    min-height: 60px !important;
    padding: 5px 7px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    align-content: center !important;
    gap: 7px !important;
    scroll-snap-align: start !important;
    border: 0 !important;
    border-right: 1px solid #ececef !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    text-align: left !important;
    font-size: 10.5px !important;
    font-weight: 770 !important;
    line-height: 1.15 !important;
}

.vm-market-category:last-child {
    border-right: 0 !important;
}

.vm-market-category:hover,
.vm-market-category.active {
    background: #fff9d8 !important;
}

.vm-market-category-icon {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #f3f3f4 !important;
    color: var(--vm-ink) !important;
}

.vm-market-category.active .vm-market-category-icon {
    background: var(--vm-yellow) !important;
}

.vm-market-category-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* ---------- Products and marketplace content ---------- */
.vm-market-toolbar {
    margin: 24px 0 14px !important;
}

.vm-market-toolbar h2,
.vm-market-toolbar p,
.vm-market-sort select,
.vm-product-title,
.vm-product-price,
.vm-product-seller,
.vm-product-description,
.vm-product-card-foot,
.vm-view-product {
    color: var(--vm-ink) !important;
}

.vm-market-toolbar h2 {
    font-size: 24px !important;
}

.vm-market-dot {
    background: var(--vm-yellow) !important;
}

.vm-market-sort select {
    background: #ffffff !important;
    border-color: var(--vm-line) !important;
}

.vm-product-grid {
    gap: 14px !important;
}

.vm-product-card {
    border: 1px solid var(--vm-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    box-shadow: none !important;
}

.vm-product-card:hover {
    border-color: #bdbdc4 !important;
    transform: translateY(-1px);
}

.vm-product-card-body {
    padding: 13px !important;
}

.vm-product-title {
    font-size: 14px !important;
    font-weight: 830 !important;
}

.vm-product-price {
    font-size: 17px !important;
    font-weight: 900 !important;
}

.vm-product-seller,
.vm-product-description,
.vm-product-card-foot {
    color: var(--vm-ink) !important;
}

/* ---------- Product, store, cart and checkout pages ---------- */
.vm-breadcrumb,
.vm-breadcrumb a,
.vm-page-heading,
.vm-page-heading p,
.vm-eyebrow,
.vm-muted-copy,
.vm-product-summary,
.vm-rich-copy,
.vm-product-facts dt,
.vm-product-facts dd,
.vm-seller-card-copy small,
.vm-seller-card-copy span,
.vm-store-copy p,
.vm-cart-seller,
.vm-cart-billing,
.vm-cart-item-price small,
.vm-order-note,
.vm-section-heading p,
.vm-checkout-product span,
.vm-checkout-product small,
.vm-checkout-account small,
.vm-checkout-signin p,
.vm-checkout-notice p,
.vm-empty-state p {
    color: var(--vm-ink) !important;
}

.vm-product-main-media,
.vm-product-details,
.vm-purchase-panel,
.vm-seller-card,
.vm-store-hero,
.vm-store-products,
.vm-cart-item,
.vm-order-summary,
.vm-checkout-section,
.vm-checkout-card,
.vm-empty-state,
.vm-error-state {
    border-color: var(--vm-line) !important;
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    box-shadow: none !important;
}

.vm-product-main-media,
.vm-product-details,
.vm-purchase-panel,
.vm-store-hero,
.vm-store-products,
.vm-order-summary,
.vm-checkout-section,
.vm-empty-state,
.vm-error-state {
    border-radius: 18px !important;
}

.vm-seller-card {
    background: #fafafa !important;
}

.vm-button,
.vm-text-button,
.vm-remove-button,
.vm-continue-shopping,
.vm-quantity-control button,
.vm-quantity-control span {
    color: var(--vm-ink) !important;
}

.vm-button-primary,
.vm-mobile-buy-bar button {
    background: var(--vm-yellow) !important;
    border-color: #d6b400 !important;
    color: var(--vm-ink) !important;
}

.vm-button-secondary,
.vm-text-button,
.vm-remove-button,
.vm-quantity-control {
    background: #ffffff !important;
    border-color: var(--vm-line-strong) !important;
    color: var(--vm-ink) !important;
}

.vm-button:disabled,
.vm-button-primary:disabled {
    opacity: 1 !important;
    background: #fff4ac !important;
    border-color: #d8c55b !important;
    color: var(--vm-ink) !important;
    cursor: not-allowed !important;
}

.vm-order-summary dt,
.vm-order-summary dd,
.vm-order-total span,
.vm-order-total strong,
.vm-cart-item-copy h2,
.vm-cart-item-price strong,
.vm-checkout-product b,
.vm-checkout-section-number {
    color: var(--vm-ink) !important;
}

.vm-checkout-section-number {
    background: var(--vm-yellow) !important;
}

.vm-checkout-notice,
.vm-checkout-account,
.vm-checkout-signin {
    background: #fff9d8 !important;
    border-color: #e5cf53 !important;
}

.vm-flash,
.vm-flash.info,
.vm-flash.success,
.vm-flash.error {
    background: #fff9d8 !important;
    border-color: #e5cf53 !important;
    color: var(--vm-ink) !important;
}

/* ---------- Mobile bottom navigation remains fixed and fully black ---------- */
.vm-mobile-bottom-nav {
    background: #ffffff !important;
    color: var(--vm-ink) !important;
    border-top-color: #d6d6dc !important;
    box-shadow: none !important;
}

.vm-mobile-bottom-nav a,
.vm-mobile-bottom-nav a span {
    color: var(--vm-ink) !important;
}

.vm-mobile-bottom-nav a.active svg {
    background: var(--vm-yellow) !important;
}

@media (max-width: 900px) {
    .vm-market-banner {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) !important;
        padding: 25px 26px !important;
        gap: 18px !important;
    }

    .vm-market-banner-art img {
        width: min(100%, 225px) !important;
        max-height: 195px !important;
    }
}

@media (max-width: 720px) {
    body.vm-body {
        padding-bottom: 92px !important;
    }

    .vm-header-main {
        width: 100% !important;
        min-height: 62px !important;
        height: 62px !important;
        padding: 0 8px !important;
        gap: 3px !important;
    }

    .vm-header .vm-menu-button {
        width: 40px !important;
        min-width: 40px !important;
        height: 42px !important;
        border-radius: 10px !important;
    }

    .vm-header .vm-menu-button svg {
        width: 27px !important;
        height: 27px !important;
    }

    .vm-brand-wordmark {
        width: 122px !important;
    }

    .vm-header .vm-header-actions {
        gap: 0 !important;
    }

    .vm-header .vm-header-action,
    .vm-header .vm-cart-link {
        width: 38px !important;
        min-width: 38px !important;
        height: 42px !important;
        border-radius: 9px !important;
    }

    .vm-header .vm-search-toggle svg,
    .vm-header .vm-account-link svg,
    .vm-header .vm-cart-link svg {
        width: 23px !important;
        height: 23px !important;
    }

    .vm-header-search-panel {
        padding: 8px 10px 10px !important;
    }

    .vm-main {
        width: calc(100% - 20px) !important;
        padding: 12px 0 40px !important;
    }

    .vm-market-banner {
        min-height: 212px !important;
        padding: 16px 14px !important;
        grid-template-columns: minmax(0, 1fr) 118px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }

    .vm-market-kicker {
        min-height: 23px !important;
        padding: 0 8px !important;
        font-size: 9.5px !important;
    }

    .vm-market-banner h1 {
        margin: 10px 0 7px !important;
        font-size: 24px !important;
        line-height: 1.02 !important;
        letter-spacing: -.046em !important;
    }

    .vm-market-banner p {
        font-size: 11.5px !important;
        line-height: 1.38 !important;
    }

    .vm-market-cta {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin-top: 12px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 11.5px !important;
    }

    .vm-market-banner-art img {
        width: 118px !important;
        max-height: 138px !important;
    }

    .vm-category-section {
        margin-top: 16px !important;
    }

    .vm-mobile-section-heading h2 {
        margin-bottom: 8px !important;
        font-size: 18px !important;
    }

    .vm-market-categories {
        min-height: 78px !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .vm-market-category {
        min-width: 88px !important;
        min-height: 62px !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        padding: 4px 5px !important;
        font-size: 10px !important;
    }

    .vm-market-category-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .vm-market-toolbar {
        margin: 22px 0 12px !important;
    }

    .vm-market-toolbar h2 {
        font-size: 22px !important;
    }

    .vm-product-grid {
        gap: 10px !important;
    }

    .vm-mobile-bottom-nav {
        min-height: 82px !important;
        padding: 6px 7px max(7px, env(safe-area-inset-bottom)) !important;
    }

    .vm-mobile-bottom-nav a {
        min-height: 66px !important;
        color: var(--vm-ink) !important;
        font-size: 11px !important;
    }

    .vm-mobile-bottom-nav svg {
        color: var(--vm-ink) !important;
    }
}

@media (max-width: 380px) {
    .vm-header-main {
        padding: 0 5px !important;
        gap: 1px !important;
    }

    .vm-brand-wordmark {
        width: 108px !important;
    }

    .vm-header .vm-menu-button {
        width: 37px !important;
        min-width: 37px !important;
    }

    .vm-header .vm-header-action,
    .vm-header .vm-cart-link {
        width: 35px !important;
        min-width: 35px !important;
    }

    .vm-market-banner {
        grid-template-columns: minmax(0, 1fr) 104px !important;
        padding: 15px 12px !important;
    }

    .vm-market-banner h1 {
        font-size: 22px !important;
    }

    .vm-market-banner p {
        font-size: 10.8px !important;
    }

    .vm-market-banner-art img {
        width: 104px !important;
        max-height: 126px !important;
    }
}