@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ============ RESET ============ */

*, *::before, *::after {
    padding: 0; margin: 0;
    box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html.no-scroll { overflow: hidden; }

:root {
    --bg:          #1a1a1a;
    --card-bg:     #dddde8;
    --text:        #f0f0f0;
    --text-dim:    #888;
    --accent:      #c8ff00;
    --accent-dark: #a0cc00;
    --border:      rgba(255,255,255,0.10);
    --font:        'JetBrains Mono', monospace;
    --header-h:    60px;
    --footer-h:    42px;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    overflow-x: hidden;
}

body, button, input, select, textarea {
    font-family: var(--font) !important;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text);
    word-wrap: break-word;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
img.refferal_badge { visibility: hidden; }


/* ============================================================
   HEADER  —  transparent
   ============================================================ */

header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--header-h);
    z-index: 90;
    background: transparent;
    /* needed so absolutely-positioned children (mobile BAG) anchor here */
    /* desktop-header already uses position:absolute for nav-center — no change needed */
}

/* ---- Desktop ---- */
.desktop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 2.5em;
}

.desktop-header .logo img {
    width: 250px;
    height: auto;
    margin-top: 0px;
    /* filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7)); */
}

/* Centre nav — absolutely centred so BAG can be far right */
.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 3.5em;
    list-style: none;
}

.nav-center a {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s;
}

.nav-center a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--accent);
    transition: width 0.25s;
}

.nav-center a:hover { color: var(--accent); }
.nav-center a:hover::after { width: 100%; }

.bag-link {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font) !important;
    transition: color 0.2s;
}
.bag-link:hover { color: var(--accent); }

/* ---- Mobile ---- */
/* Three equal flex columns: [logo] [BAG] [hamburger]
   Each takes flex:1 so BAG is always the true visual midpoint */
.mobile-header {
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 0 1.4em;
}

.mobile-header .logo-mobile {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mobile-header .logo-mobile img {
    width: 130px;
    height: auto;
    margin-top: -4px;
}

/* BAG — middle third, perfectly centred */
.mobile-bag {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
}

/* Hamburger — right third, right-aligned, 44px tall touch target */
.menu-button {
    flex: 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.menu-line {
    width: 22px;
    height: 1.5px;
    background: var(--text);
    display: block;
}


/* ============================================================
   MOBILE MENU OVERLAY
   z-index < footer (95) so footer is always visible on top
   ============================================================ */

.mobile-menu {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    inset: 0;
    z-index: 80;           /* below footer at 95 */
    background: var(--bg);
    display: flex;
    flex-direction: column;
    /* leave room for header at top, footer at bottom */
    padding-top: var(--header-h);
    padding-bottom: var(--footer-h);
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.mobile-menu.open {
    visibility: visible;
    opacity: 1;
}

/* ── inline "— CLOSE MENU" as last nav item ── */
.menu-close-item {
    border-bottom: none !important;
    padding: 1.4em 0 0.6em !important;
}

.menu-close-inline {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font) !important;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dim);
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s;
}

.menu-close-inline::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: var(--text-dim);
    transition: background 0.2s;
}

.menu-close-inline:hover {
    color: var(--accent);
}

.menu-close-inline:hover::after {
    background: var(--accent);
}

/* Nav links */
.mobile-menu-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mobile-menu li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--border);
    padding: 1.15em 0;
}

.mobile-menu li:first-child { border-top: 1px solid var(--border); }

.mobile-menu a {
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
    transition: color 0.2s;
}

.mobile-menu a:hover { color: var(--accent); }


/* ============================================================
   FOOTER  —  transparent, always on top (above mobile menu)
   ============================================================ */

footer {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 95;          /* above mobile menu (80) and header (90) */
}

footer .social-icon { display: none !important; }

footer p {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
}

/* ---- Mobile footer: two stacked rows ---- */
@media only screen and (max-width: 768px) {
    :root {
        --footer-h: 68px;
    }

    footer {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 10px 1.4em !important;
    }

    footer p {
        font-size: 8.5px;
        letter-spacing: 0.16em;
        opacity: 0.55;
        order: 2;
    }

    /* Currency widget row */
    #v97-fx {
        order: 1;
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 0 !important;
        border: none !important;
    }

    #v97-fx-dot {
        width: 6px !important;
        height: 6px !important;
    }

    #v97-fx-sel {
        font-size: 10px !important;
        letter-spacing: 0.18em !important;
        padding: 4px 0 4px 12px !important;
        border-left: 1px solid var(--border) !important;
        min-width: 64px !important;
    }
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-container {
    display: flex;
    flex-direction: column;
    padding-top: var(--header-h);
    padding-bottom: calc(var(--footer-h) + 16px);
}


/* ============================================================
   ECWID  —  transparent + clean product grid
   ============================================================ */

/* Wipe all backgrounds */
.ec-size .ec-store,
html#ecwid_html body#ecwid_body .ec-size .ec-store,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-store__content-wrapper,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__products,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__wrap,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__content,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__info,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product:hover,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product:hover .grid-product__content {
    background-color: transparent !important;
}

/* Font everywhere */
html#ecwid_html body#ecwid_body .ec-size .ec-store * {
    font-family: var(--font) !important;
}

/* ---- THE GRID ---- */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__products {
    /* Ecwid renders this as flex by default; switch to grid */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* override any Ecwid flex/justify */
    flex-wrap: unset !important;
    align-items: start !important;
    justify-content: unset !important;
    width: 100% !important;
}

/* Each product card — full column width */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-right: 1px solid var(--border) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product:nth-child(4n) {
    border-right: none !important;
}

/* Image area — lavender square, NO opacity change on hover so bg stays consistent */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__image-wrap {
    background-color: var(--card-bg) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0s !important; /* lock bg, no fade */
}

/* Keep the same background on hover — do NOT dim the wrapper */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product:hover .grid-product__image-wrap {
    background-color: var(--card-bg) !important;
    opacity: 1 !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Info block */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__info {
    padding: 10px 10px 20px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    flex: 1 !important;
}

/* Title */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__title,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__title-inner {
    color: var(--text) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

/* Price */
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__price,
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__price-amount {
    color: var(--accent) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    background: transparent !important;
    display: block !important;
    margin-top: 4px !important;
}

/* ---- Cart / Checkout ---- */

html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-step,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-step__container,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart__body,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart__body-inner,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-form,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart__footer,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-item,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-item__wrap {
    background-color: transparent !important;
    color: var(--text) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__input,
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__select,
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__textarea {
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store a,
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-link {
    color: var(--accent) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button--primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000 !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button--primary:hover {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__button--secondary {
    background-color: transparent !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store input:checked + .form-control__checkbox-icon,
html#ecwid_html body#ecwid_body .ec-size .ec-store input:checked + .form-control__radio-icon {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart__badge {
    background-color: var(--accent) !important;
    color: #000 !important;
}

html#ecwid_html body#ecwid_body div.ecwid-popup-content {
    background-color: #1a1a1a !important;
    color: var(--text) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-loading-spinner__inner {
    border-color: var(--accent) !important;
}

html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control__select-option.form-control__select-option--active {
    background-color: var(--accent) !important;
    color: #000 !important;
}

.form-control__inline-label {
    background-color: var(--accent) !important;
    color: #000 !important;
}

@media only screen and (max-width: 768px) {

    html#ecwid_html body#ecwid_body .ec-size:not(.ec-size--s) .ec-store .ec-cart-next {
        font-size: 16px;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-text-muted {
        font-size: 14px;
    }
    html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-email {
        font-size: 16px;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-cart-step__wrap {
        font-size: 14px;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store * {
        font-size: 16px;
    }
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ============================================================
   RESPONSIVE — MOBILE  ≤ 768px
   ============================================================ */

@media only screen and (max-width: 768px) {

    .desktop-header { display: none !important; }
    .mobile-header  { display: flex; }

    .main-container {
        padding-top: var(--header-h);
        padding-bottom: calc(var(--footer-h) + 10px);
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product:nth-child(4n) {
        border-right: 1px solid var(--border) !important;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product:nth-child(2n) {
        border-right: none !important;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__title-inner {
        font-size: 10px !important;
    }

    html#ecwid_html body#ecwid_body .ec-size .ec-store .grid-product__price-amount {
        font-size: 13px !important;
    }
}


/* ============================================================
   RESPONSIVE — DESKTOP  ≥ 769px
   ============================================================ */

@media only screen and (min-width: 769px) {

    .mobile-header { display: none !important; }
    .mobile-menu   { display: none !important; }
    .desktop-header { display: flex !important; }
}


/* focus ring */
input:focus, textarea:focus, select:focus {
    outline: 1px solid var(--accent);
    outline-offset: 0;
}