/* Black Monkey Sportwear — dark brand theme (channel 2, multi-store).
   Translates the approved dark mockup (black-animado.html) to Bagisto's shop classes.
   bg #0c0c0e, cards #16161a, borders #26262c, silver #cfcfd4, white #fff, grey #8a8a92.
   Fonts: Bebas Neue + Oswald (headings/condensed), Inter (body). */

:root {
    --bm-bg: #0c0c0e;
    --bm-bg2: #16161a;
    --bm-line: #26262c;
    --bm-silver: #cfcfd4;
    --bm-grey: #8a8a92;
    --bm-white: #fff;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bm-bg) !important;
    color: var(--bm-silver);
}

/* Map theme font classes to the brand stack. */
.font-poppins, .font-sans, button, input, select, textarea {
    font-family: 'Inter', system-ui, sans-serif !important;
}
.font-dmserif, h1, h2, h3, .text-3xl, .text-2xl {
    font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
    letter-spacing: .5px;
    color: var(--bm-white);
}

/* Protect Bagisto's icon font (specificity 0,2,0 beats .font-poppins/.font-sans). */
[class^="icon-"][class],[class*=" icon-"][class]{font-family:"bagisto-shop"!important}

/* Dark surfaces: header, sections, cards, footer. */
header,
.bg-white,
main,
section {
    background-color: var(--bm-bg) !important;
}

/* Product cards / panels → dark card surface with subtle border. */
.box-shadow,
.shadow,
.shadow-sm,
.rounded.border,
[class*="rounded"][class*="border"] {
    background-color: var(--bm-bg2) !important;
    border-color: var(--bm-line) !important;
}

/* Generic text overrides so the default near-black text stays readable on dark. */
.text-zinc-500, .text-zinc-600, .text-gray-500, .text-gray-600, .text-navyBlue {
    color: var(--bm-grey) !important;
}

/* Primary buttons → white-on-dark, invert to ghost on hover. */
.primary-button,
button.primary-button,
.btn-primary {
    background: var(--bm-white) !important;
    border: 1.5px solid var(--bm-white) !important;
    color: #000 !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
.primary-button:hover,
button.primary-button:hover,
.btn-primary:hover {
    background: transparent !important;
    color: var(--bm-white) !important;
}

/* Secondary / "add to cart" buttons → ghost outline that fills white on hover. */
.secondary-button {
    background: transparent !important;
    color: var(--bm-white) !important;
    border: 1.5px solid var(--bm-line) !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.secondary-button:hover {
    background: var(--bm-white) !important;
    color: #000 !important;
    border-color: var(--bm-white) !important;
}

/* Prices in white (Bagisto renders prices with classes containing "price"). */
.price,
.final-price,
[class*="price"] {
    color: var(--bm-white) !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700;
}

/* Logo with a subtle white glow (mirrors Pink's halo, dark variant). */
.pm-logo-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 14px;
}
.pm-logo-wrap::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 65%);
    z-index: 0;
    transition: transform .3s ease;
}
.pm-logo-wrap:hover::before { transform: scale(1.12); }
.pm-logo-wrap img {
    position: relative;
    z-index: 1;
    mix-blend-mode: screen;
    width: auto !important;
    height: 64px !important;
    max-width: none;
    transition: transform .25s ease;
}
.pm-logo-wrap:hover img { transform: scale(1.05); }
header .pm-logo-wrap { margin: 4px 0; }

@media (max-width: 1024px) {
    .pm-logo-wrap img { height: 48px !important; }
}
@media (max-width: 640px) {
    .pm-logo-wrap::before { width: 84px !important; height: 84px !important; }
    .pm-logo-wrap img { height: 42px !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .pm-logo-wrap:hover::before,
    .pm-logo-wrap:hover img { transform: none !important; }
}