/*
Theme Name: VIP VERTEX
Theme URI: https://market.vipvertex.com/
Author: VIP VERTEX
Description: Lightweight custom WooCommerce-ready theme for VIP VERTEX.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: vip-vertex
*/

:root {
    --vip-orange: #ff6b00;
    --vip-orange-dark: #e85f00;
    --vip-dark: #171717;
    --vip-muted: #666;
    --vip-light: #f7f7f7;
    --vip-border: #e8e8e8;
    --vip-white: #fff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--vip-dark);
    background: #fff;
}

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

img { max-width: 100%; height: auto; }

button, input { font: inherit; }

.vip-container {
    width: min(1200px, calc(100% - 32px));
    margin-inline: auto;
}

.vip-site-main { min-height: 60vh; }

/* Header */
.vip-header {
    position: relative;
    z-index: 100;
    background: var(--vip-white);
    border-bottom: 1px solid var(--vip-border);
}

.vip-header-top {
    min-height: 72px;
    display: grid;
    grid-template-columns: 190px minmax(280px, 1fr) 230px;
    align-items: center;
    gap: 24px;
}

.vip-brand,
.vip-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
}

.vip-brand {
    color: var(--vip-orange);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.vip-header .custom-logo {
    display: block;
    max-height: 48px;
    width: auto;
}

.vip-search {
    display: flex;
    width: 100%;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.vip-search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 14px;
    color: var(--vip-dark);
}

.vip-search button {
    width: 52px;
    border: 0;
    background: var(--vip-orange);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.vip-search button:hover { background: var(--vip-orange-dark); }

.vip-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.vip-header-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.vip-header-action:hover { color: var(--vip-orange); }

.vip-cart-count {
    display: inline-flex;
    min-width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 50px;
    background: var(--vip-orange);
    color: #fff;
    font-size: 12px;
}

.vip-header-nav {
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.vip-header-nav .vip-container {
    min-height: 46px;
    display: flex;
    align-items: center;
}

.vip-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.vip-menu li { list-style: none; }

.vip-menu a {
    display: block;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
}

.vip-menu a:hover,
.vip-menu .current-menu-item > a {
    color: var(--vip-orange);
    background: #fff7f0;
}

/* Main placeholder */
.vip-placeholder {
    padding: 90px 20px;
    text-align: center;
    background: var(--vip-light);
}

.vip-placeholder h1 { margin-top: 0; }

/* Footer */
.vip-site-footer {
    margin-top: 50px;
    padding: 28px 0;
    border-top: 1px solid var(--vip-border);
    background: #fafafa;
    color: var(--vip-muted);
    font-size: 14px;
}

.vip-site-footer p { margin: 0; }

/* Responsive */
@media (max-width: 900px) {
    .vip-header-top {
        grid-template-columns: 170px 1fr;
        grid-template-areas:
            "brand actions"
            "search search";
        gap: 14px;
        padding: 14px 0;
    }

    .vip-brand-wrap { grid-area: brand; }
    .vip-search-wrap { grid-area: search; }
    .vip-header-actions { grid-area: actions; }

    .vip-menu {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
    }
}

@media (max-width: 600px) {
    .vip-container { width: min(100% - 20px, 1200px); }

    .vip-header-top {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand actions"
            "search search";
    }

    .vip-brand { font-size: 21px; }

    .vip-header-actions { gap: 10px; }

    .vip-header-action span.vip-action-label { display: none; }

    .vip-menu a {
        padding: 12px 14px;
        font-size: 13px;
    }
}