/*
Theme Name: Vibez Collective
Theme URI: https://www.vibezcollective.music
Author: Vibez Collective
Description: A black and white WooCommerce theme for dub steppers stems packs and sound system culture.
Version: 0.3.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: vibez-collective
*/

:root {
    --vc-black: #050505;
    --vc-white: #ffffff;
    --vc-ink: #151515;
    --vc-muted: #6b6b6b;
    --vc-line: #1f1f1f;
    --vc-soft: #f4f4f4;
    --vc-fog: #d8d8d8;
    --vc-max: 1160px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    background: var(--vc-black);
    color: var(--vc-white);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

body::selection {
    background: var(--vc-black);
    color: var(--vc-white);
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

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

.vc-site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(5, 5, 5, 0.9);
    color: var(--vc-white);
    backdrop-filter: blur(10px);
}

.vc-header-inner,
.vc-container {
    width: min(var(--vc-max), calc(100vw - 32px));
    margin: 0 auto;
}

.vc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 82px;
}

.vc-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--vc-black);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
}

.vc-brand a {
    color: inherit;
    text-decoration: none;
}

.vc-brand img {
    display: block;
    width: auto;
    max-height: 46px;
}

.vc-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.vc-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vc-nav a {
    color: var(--vc-white);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.vc-nav a:hover,
.vc-brand a:hover {
    text-decoration: underline;
    text-underline-offset: 0.28em;
}

.vc-cart-link,
.vc-button,
.button,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--vc-black);
    border-radius: 0;
    background: var(--vc-black);
    color: var(--vc-white);
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.vc-button-secondary,
.vc-cart-link {
    background: transparent;
    color: inherit;
}

.vc-main {
    min-height: 70vh;
    background: var(--vc-white);
    color: var(--vc-black);
}

.vc-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(680px, 92vh, 980px);
    border-bottom: 1px solid var(--vc-line);
    background-image:
        linear-gradient(90deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.72) 34%, rgba(5, 5, 5, 0.34) 100%),
        linear-gradient(0deg, rgba(5, 5, 5, 0.56), rgba(5, 5, 5, 0.08) 44%, rgba(5, 5, 5, 0.42)),
        url("assets/images/vibez-pressure-wall.png");
    background-position: center;
    background-size: cover;
    color: var(--vc-white);
}

.vc-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0, rgba(255, 255, 255, 0.09) 1px, transparent 1px, transparent 9px),
        radial-gradient(circle at 18% 52%, rgba(255, 255, 255, 0.16), transparent 34%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.vc-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: min(var(--vc-max), calc(100vw - 32px));
    margin: 0 auto;
    min-height: clamp(680px, 92vh, 980px);
    padding: 92px 0 128px;
}

.vc-hero-copy {
    width: min(980px, 100%);
}

.vc-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    padding: 8px 12px;
    background: rgba(5, 5, 5, 0.72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vc-superline {
    display: block;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(26px, 5vw, 76px);
    font-weight: 950;
    line-height: 0.9;
    text-transform: uppercase;
}

.vc-hero h1 {
    max-width: 1060px;
    margin: 0;
    font-size: clamp(68px, 15vw, 190px);
    line-height: 0.76;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vc-hero p {
    max-width: 760px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 750;
    line-height: 1.25;
}

.vc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.vc-hero .vc-button {
    border-color: var(--vc-white);
    background: var(--vc-white);
    color: var(--vc-black);
}

.vc-hero .vc-button-secondary {
    background: transparent;
    color: var(--vc-white);
}

.vc-hero-meta {
    position: absolute;
    right: 16px;
    bottom: 24px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(var(--vc-max), calc(100vw - 32px));
    margin: 0 auto;
}

.vc-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 0;
    padding: 7px 10px;
    background: rgba(5, 5, 5, 0.62);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vc-marquee {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    background: var(--vc-black);
    color: var(--vc-white);
}

.vc-marquee-track {
    display: flex;
    width: max-content;
    animation: vc-marquee 28s linear infinite;
}

.vc-marquee span {
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes vc-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.vc-section {
    padding: 58px 0;
    background: var(--vc-white);
    color: var(--vc-black);
}

.vc-section-dark {
    background: var(--vc-black);
    color: var(--vc-white);
}

.vc-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--vc-line);
    padding-bottom: 14px;
}

.vc-section-header h2,
.vc-page-title,
.woocommerce-products-header__title {
    margin: 0;
    font-size: clamp(42px, 8vw, 104px);
    line-height: 0.84;
    text-transform: uppercase;
}

.vc-section-header p {
    max-width: 460px;
    margin: 0;
    color: var(--vc-ink);
    font-size: 18px;
    font-weight: 800;
}

.vc-section-dark .vc-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.28);
}

.vc-section-dark .vc-section-header p {
    color: rgba(255, 255, 255, 0.68);
}

.vc-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.vc-signal-card {
    min-height: 240px;
    border-right: 1px solid rgba(255, 255, 255, 0.42);
    padding: 22px;
}

.vc-signal-card:last-child {
    border-right: 0;
}

.vc-signal-card span {
    display: block;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vc-signal-card h3 {
    margin: 0 0 8px;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1;
    text-transform: uppercase;
}

.vc-signal-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
}

.vc-license-band {
    border-top: 1px solid var(--vc-line);
    border-bottom: 1px solid var(--vc-line);
    background: var(--vc-white);
}

.vc-license-band .vc-container {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 22px;
    padding: 28px 0;
}

.vc-license-band h2 {
    margin: 0;
    font-size: clamp(28px, 5vw, 54px);
    line-height: 0.95;
    text-transform: uppercase;
}

.vc-license-band p {
    margin: 0;
    color: var(--vc-ink);
    font-weight: 800;
}

.vc-content {
    width: min(860px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 44px 0;
}

.vc-content > *:first-child {
    margin-top: 0;
}

.woocommerce ul.products,
.vcsh-stems-grid,
.vc-empty-stems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.vcsh-stems-card,
.vc-empty-stem-card {
    width: auto;
    float: none;
    margin: 0;
    border: 1px solid var(--vc-line);
    border-radius: 0;
    padding: 16px;
    background: var(--vc-white);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
.vcsh-stems-card:hover,
.vc-empty-stem-card:hover {
    transform: translateY(-3px);
    box-shadow: 8px 8px 0 var(--vc-black);
}

.vc-empty-stem-card {
    display: grid;
    min-height: 280px;
    align-content: space-between;
    background:
        linear-gradient(135deg, transparent 0 48%, var(--vc-black) 48% 49%, transparent 49%),
        repeating-linear-gradient(0deg, var(--vc-white) 0, var(--vc-white) 14px, var(--vc-soft) 14px, var(--vc-soft) 28px);
}

.vc-empty-stem-card span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vc-empty-stem-card h3 {
    max-width: 250px;
    margin: 0;
    font-size: 32px;
    line-height: 0.92;
    text-transform: uppercase;
}

.vc-empty-stem-card p {
    margin: 0;
    font-weight: 800;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--vc-black);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}

.woocommerce div.product .product_title {
    font-size: clamp(46px, 9vw, 118px);
    line-height: 0.84;
    text-transform: uppercase;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--vc-black);
    font-weight: 900;
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img {
    border: 1px solid var(--vc-line);
    background: var(--vc-black);
    filter: grayscale(1) contrast(1.16);
}

.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--vc-line);
    border-bottom: 1px solid var(--vc-line);
    padding: 16px 0;
}

.woocommerce .quantity .qty {
    min-height: 42px;
    border: 1px solid var(--vc-black);
    border-radius: 4px;
}

.woocommerce-tabs {
    border-top: 1px solid var(--vc-line);
    padding-top: 18px;
}

.vcsh-product-details {
    border-top: 1px solid var(--vc-line);
    border-bottom: 1px solid var(--vc-line);
    padding: 18px 0;
}

.vcsh-audio-preview,
.vcsh-meta-grid div,
.vcsh-pack-list li,
.vcsh-stems-card {
    border-color: var(--vc-line);
}

.vcsh-license-notice,
.vcsh-license-tab {
    border-left-color: var(--vc-black);
    background: var(--vc-soft);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--vc-black);
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--vc-black);
}

.vc-site-footer {
    border-top: 1px solid var(--vc-line);
    background: var(--vc-black);
    color: var(--vc-white);
}

.vc-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(var(--vc-max), calc(100vw - 32px));
    margin: 0 auto;
    padding: 24px 0;
    font-weight: 800;
}

@media (max-width: 760px) {
    .vc-header-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
    }

    .vc-nav,
    .vc-nav ul {
        justify-content: flex-start;
    }

    .vc-hero-inner {
        min-height: 610px;
        padding-top: 54px;
    }

    .vc-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-signal-grid,
    .vc-license-band .vc-container {
        grid-template-columns: 1fr;
    }

    .vc-hero h1 {
        font-size: clamp(46px, 15vw, 76px);
    }
}