/*
Theme Name: Velogestalt Showcase
Theme URI: https://velogestalt.com
Author: OpenAI
Description: Mobile-first bicycle catalog theme for Velogestalt.
Version: 1.1.0
Text Domain: velogestalt-showcase
*/

:root {
    --vg-bg: #f5f1ea;
    --vg-surface: #fbf8f3;
    --vg-panel: #efe7da;
    --vg-text: #1f1b18;
    --vg-muted: #6b635b;
    --vg-accent: #b7643c;
    --vg-accent-dark: #8e4726;
    --vg-line: rgba(31, 27, 24, 0.12);
    --vg-shadow: 0 24px 50px rgba(31, 27, 24, 0.08);
    --vg-radius: 28px;
    --vg-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--vg-text);
    background:
        radial-gradient(circle at top left, rgba(183, 100, 60, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(73, 97, 86, 0.12), transparent 24%),
        var(--vg-bg);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.vg-shell { width: min(calc(100% - 32px), var(--vg-max)); margin: 0 auto; }
.vg-site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background: rgba(245, 241, 234, 0.9);
    border-bottom: 1px solid rgba(31, 27, 24, 0.08);
}
.vg-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
    padding: 14px 0;
    flex-wrap: wrap;
}
.vg-brand { display: inline-flex; flex-direction: column; gap: 4px; max-width: 420px; }
.vg-brand-mark, .vg-kicker, .vg-section-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vg-muted);
}
.vg-brand-name { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; }
.vg-header-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.vg-menu {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: 0.95rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.vg-menu a { color: var(--vg-muted); }
.vg-menu a:hover { color: var(--vg-text); }
.vg-lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: rgba(31, 27, 24, 0.06);
    gap: 4px;
}
.vg-lang-switch a {
    min-width: 46px;
    padding: 8px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--vg-muted);
}
.vg-lang-switch a.is-active {
    background: var(--vg-text);
    color: #fff8f0;
}
.vg-main { padding: 28px 0 72px; }
.vg-hero { min-height: calc(100svh - 132px); display: grid; align-items: end; padding: 20px 0 44px; }
.vg-hero-panel, .vg-grid-2, .vg-products-grid, .vg-page-grid, .vg-single-layout { display: grid; gap: 24px; }
.vg-hero-panel { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); align-items: stretch; }
.vg-hero-copy, .vg-hero-visual, .vg-panel-block, .vg-product-card, .vg-single-media, .vg-single-copy, .vg-copy-card {
    border-radius: var(--vg-radius);
    overflow: hidden;
    box-shadow: var(--vg-shadow);
}
.vg-hero-copy {
    background: linear-gradient(180deg, rgba(31, 27, 24, 0.94), rgba(31, 27, 24, 0.86));
    color: #f7f1e8;
    padding: clamp(24px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 18px;
}
.vg-hero h1, .vg-page-header h1, .vg-single-copy h1 {
    margin: 0;
    font-size: clamp(2.35rem, 5.2vw, 5.6rem);
    line-height: 0.95;
    text-wrap: balance;
}
.vg-lead {
    max-width: 34rem;
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    color: rgba(247, 241, 232, 0.84);
}
.vg-hero-actions, .vg-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 0.96rem;
    font-weight: 700;
    text-align: center;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.vg-button:hover { transform: translateY(-1px); }
.vg-button-primary { background: var(--vg-accent); color: #fff8f0; }
.vg-button-primary:hover { background: var(--vg-accent-dark); }
.vg-button-secondary { background: rgba(255, 255, 255, 0.12); color: #fff8f0; border: 1px solid rgba(255, 255, 255, 0.2); }
.vg-hero-visual {
    position: relative;
    min-height: 520px;
    background:
        linear-gradient(180deg, rgba(31, 27, 24, 0.08), rgba(31, 27, 24, 0.2)),
        linear-gradient(135deg, #d6c3ab 0%, #9c7659 48%, #3a312c 100%);
}
.vg-hero-visual::before {
    content: "";
    position: absolute;
    inset: 9% 12% auto auto;
    width: clamp(160px, 46%, 260px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 248, 240, 0.22);
    filter: blur(2px);
}
.vg-hero-visual::after {
    content: "Velogestalt";
    position: absolute;
    left: 24px;
    bottom: 20px;
    color: rgba(255, 248, 240, 0.86);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
}
.vg-section { padding: 28px 0; }
.vg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-panel-block, .vg-copy-card, .vg-single-media, .vg-single-copy, .vg-product-card {
    background: rgba(251, 248, 243, 0.94);
    border: 1px solid var(--vg-line);
}
.vg-panel-block, .vg-copy-card, .vg-single-copy { padding: 28px; }
.vg-panel-block h2, .vg-copy-card h2, .vg-page-header h1, .vg-single-copy h1 { margin: 0 0 12px; }
.vg-panel-block p, .vg-copy-card p, .vg-page-header p, .vg-single-copy p, .vg-muted { color: var(--vg-muted); }
.vg-products-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vg-product-image { aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(180deg, #d8cab9, #f0ebe3); }
.vg-product-image img { width: 100%; height: 100%; object-fit: cover; }
.vg-product-body { padding: 20px; display: grid; gap: 10px; }
.vg-product-body h2 { margin: 0; font-size: 1.38rem; }
.vg-price { font-size: 1.2rem; font-weight: 700; }
.vg-page-header { padding: 24px 0 10px; max-width: 720px; }
.vg-page-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
.vg-single-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
.vg-single-media .wp-post-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vg-footer { border-top: 1px solid rgba(31, 27, 24, 0.08); padding: 28px 0 44px; color: var(--vg-muted); }
.vg-empty { padding: 24px; border-radius: var(--vg-radius); background: rgba(251, 248, 243, 0.9); border: 1px solid var(--vg-line); }

@media (max-width: 1024px) {
    .vg-hero-panel, .vg-page-grid, .vg-single-layout { grid-template-columns: 1fr; }
    .vg-hero { min-height: auto; }
    .vg-hero-visual { min-height: 400px; order: -1; }
}

@media (max-width: 820px) {
    .vg-nav, .vg-header-tools, .vg-menu { justify-content: center; }
    .vg-brand { text-align: center; max-width: 100%; }
    .vg-grid-2 { grid-template-columns: 1fr; }
    .vg-panel-block, .vg-copy-card, .vg-single-copy { padding: 24px; }
}

@media (max-width: 640px) {
    .vg-shell { width: min(calc(100% - 20px), var(--vg-max)); }
    .vg-main { padding-top: 18px; }
    .vg-hero { padding-top: 10px; }
    .vg-hero h1, .vg-page-header h1, .vg-single-copy h1 { font-size: clamp(2.05rem, 11vw, 3.6rem); }
    .vg-hero-copy, .vg-panel-block, .vg-copy-card, .vg-single-copy { padding: 20px; }
    .vg-button, .vg-lang-switch { width: 100%; }
    .vg-lang-switch a { flex: 1; }
    .vg-hero-visual { min-height: 300px; }
    .vg-product-body h2 { font-size: 1.2rem; }
}