/*
Theme Name: audiotools.vip Child
Theme URI: https://audiotools.vip
Description: Child theme for audiotools.vip VST plugin shop — built on Ecomall. Dark-first design matching the audiotools.vip brand.
Author: audiotools.vip
Version: 1.0.0
Template: ecomall
Text Domain: audiotools-vip-child
*/

/* =========================================================
   GOOGLE FONTS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =========================================================
   DESIGN TOKENS — DARK (default)
   ========================================================= */
:root {
    --at-paper:        #0f0d12;
    --at-surface:      #181620;
    --at-surface2:     #1f1d28;
    --at-ink:          #f5f1e8;
    --at-ink2:         #cfcabe;
    --at-muted:        #8a8694;
    --at-rule:         #2a2733;
    --at-accent:       #ff4d1f;
    --at-accent-soft:  #3d1a0e;
    --at-accent2:      #c3ff3a;

    --at-display: 'Space Grotesk', system-ui, sans-serif;
    --at-body:    'Inter', system-ui, sans-serif;
    --at-mono:    'JetBrains Mono', ui-monospace, monospace;

    color-scheme: dark;
}

/* =========================================================
   DESIGN TOKENS — LIGHT (alternate, opt-in)
   ========================================================= */
[data-theme="light"],
body.at-light {
    --at-paper:        #fbf8f1;
    --at-surface:      #ffffff;
    --at-surface2:     #f3efe5;
    --at-ink:          #0d0c11;
    --at-ink2:         #2a2730;
    --at-muted:        #7a7682;
    --at-rule:         #e6e1d5;
    --at-accent-soft:  #ffe4d8;
    color-scheme: light;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--at-paper);
    color: var(--at-ink);
    font-family: var(--at-body);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--at-display);
    color: var(--at-ink);
    margin: 0;
}

p { margin: 0 0 1em; color: var(--at-ink2); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { cursor: pointer; }

input, select, textarea {
    font-family: var(--at-body);
    color: var(--at-ink);
}

/* =========================================================
   LAYOUT
   ========================================================= */
.at-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.at-mono {
    font-family: var(--at-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.at-kicker {
    font-family: var(--at-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--at-accent);
    margin-bottom: 8px;
    display: block;
}

/* =========================================================
   OVERRIDE ECOMALL — hide conflicting parent elements
   ========================================================= */
#header-wrap,
.header-top,
.header-middle,
.header-bottom,
.ts-header {
    display: none !important;
}

#footer-wrap,
.footer-top,
.footer-bottom,
.ts-footer {
    display: none !important;
}

/* =========================================================
   FULL-WIDTH LAYOUT — override Ecomall parent constraints
   ========================================================= */
html,
body {
    width: 100%;
    max-width: 100% !important;
    overflow-x: hidden;
}

/* Ecomall-specific wrappers that may constrain width */
#page,
.site,
#content,
.site-content,
#primary,
.content-area,
#main,
.site-main,
.wrapper,
#wrapper,
#page-container,
#page-wrapper,
.ts-content,
#ts-content,
.ts-container,
#container,
.hfeed {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box;
}

/* Ecomall sidebar should not show on pages we fully control */
#sidebar,
.sidebar,
.widget-area,
#secondary {
    display: none !important;
}

/* =========================================================
   MAIN CONTENT WRAPPER
   ========================================================= */
#page { background: var(--at-paper); }