/* alspek.hu color scheme + layout (sampled from the live site) */
:root {
    --alspek-red: #6d2123;
    --alspek-red-dark: #541a1b;
    --alspek-red-light: #8a2a2d;
    --alspek-dark: #2d2d2d;
    --alspek-dark-bg: #1a1a1a;
    --alspek-text: #666;
    --alspek-heading: #222;
    --alspek-bg: #fff;
    --alspek-bg-light: #f7f7f7;
    --alspek-border: #e5e5e5;
    --alspek-footer-bg: #1a1a1a;
}
body { color: var(--alspek-text); background: var(--alspek-bg); font-family: 'Segoe UI', Tahoma, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ===== TOP BAR (alspek.hu style) ===== */
.top-bar {
    background: var(--alspek-dark-bg);
    color: #aaa;
    font-size: 12px;
    padding: 6px 0;
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar a { color: #aaa; text-decoration: none; font-size: 12px; }
.top-bar a:hover { color: #fff; }
.top-bar .contact-info { display: flex; gap: 20px; }
.top-bar .contact-info span { display: flex; align-items: center; gap: 5px; }
.top-bar .social-link { color: #aaa; font-size: 12px; }

/* Header cart button style (alspek.hu red theme) */
.primary-button {
    background: var(--alspek-red) !important;
    border-color: var(--alspek-red) !important;
    color: #fff !important;
}
.primary-button:hover {
    background: var(--alspek-red-light) !important;
}
.secondary-button {
    border-color: var(--alspek-red) !important;
    color: var(--alspek-red) !important;
}
.secondary-button:hover {
    background: var(--alspek-red) !important;
    color: #fff !important;
}

/* Category nav in header (default Bagisto) */
.v-DesktopCategory a:hover {
    color: var(--alspek-red) !important;
}

/* ===== SECTION TITLES ===== */
.section-title {
    font-size: 24px; font-weight: 700;
    color: var(--alspek-heading);
    margin-bottom: 10px;
    text-align: center;
}
.section-subtitle {
    font-size: 14px; color: var(--alspek-text);
    text-align: center; max-width: 640px; margin: 0 auto 35px;
}

/* ===== MATERIAL PICKER (1. választás: PVC / Fa) ===== */
.material-picker { padding: 55px 0; }
.material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; max-width: 760px; margin: 0 auto; }
.material-card {
    display: block; text-decoration: none; text-align: center;
    background: var(--alspek-bg); border: 1px solid var(--alspek-border);
    border-radius: 8px; padding: 40px 25px; transition: all 0.3s;
}
.material-card:hover { border-color: var(--alspek-red); box-shadow: 0 6px 20px rgba(109,33,35,0.12); transform: translateY(-3px); }
.material-card-icon {
    width: 80px; height: 80px; margin: 0 auto 18px;
    border-radius: 50%; border: 1px solid var(--alspek-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; color: var(--alspek-red);
}
.material-card-name { font-size: 22px; font-weight: 700; color: var(--alspek-heading); margin-bottom: 8px; }
.material-card-desc { font-size: 13px; color: var(--alspek-text); }

/* ===== MANUFACTURER STRIP (2. választás: vasalatgyártók) ===== */
.manufacturer-strip { padding: 45px 0; background: var(--alspek-bg-light); border-top: 1px solid var(--alspek-border); border-bottom: 1px solid var(--alspek-border); }
.manufacturer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.manufacturer-logo {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--alspek-bg); border: 1px solid var(--alspek-border); border-radius: 6px;
    padding: 20px 15px; text-decoration: none; transition: all 0.2s;
}
.manufacturer-logo:hover { border-color: var(--alspek-red); box-shadow: 0 4px 15px rgba(109,33,35,0.1); }
.manufacturer-logo img { max-width: 100%; max-height: 55px; object-fit: contain; }
.manufacturer-logo span { font-size: 12px; font-weight: 600; color: var(--alspek-heading); }

/* ===== CATEGORY GRID (alspek.hu style: circular outline icon cards) ===== */
.featured-categories { padding: 50px 0; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
.category-card {
    background: var(--alspek-bg);
    border: 1px solid var(--alspek-border);
    border-radius: 6px; overflow: hidden;
    text-decoration: none; color: var(--alspek-text);
    transition: all 0.3s; text-align: center; padding: 30px 20px;
}
.category-card:hover {
    border-color: var(--alspek-red);
    box-shadow: 0 4px 15px rgba(109,33,35,0.1);
    transform: translateY(-3px);
}
.category-image {
    width: 110px; height: 110px; margin: 0 auto 18px;
    border-radius: 50%; overflow: hidden;
    background: var(--alspek-bg);
    border: 1px solid var(--alspek-red);
    display: flex; align-items: center; justify-content: center;
}
.category-image img { width: 72%; height: 72%; object-fit: contain; }
.category-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.category-icon { font-size: 38px; }
.category-name { font-size: 16px; font-weight: 700; color: var(--alspek-heading); margin-top: 10px; }

/* ===== SERVICES / FEATURES ===== */
.services-section { background: var(--alspek-bg-light); padding: 40px 0; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.service-card { text-align: center; padding: 25px 15px; }
.service-card h3 { font-size: 14px; font-weight: 700; color: var(--alspek-heading); margin-bottom: 8px; text-transform: uppercase; }
.service-card p { font-size: 12px; color: var(--alspek-text); margin-bottom: 0; }

/* ===== FOOTER (alspek.hu style: single minimal dark bar) ===== */
.site-footer { background: var(--alspek-footer-bg); color: #999; padding: 22px 0; }
.footer-bottom-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; }
.footer-links { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 22px; }
.footer-links li a { color: #999; text-decoration: none; font-size: 13px; transition: color 0.2s; }
.footer-links li a:hover { color: #fff; }
.footer-copyright { font-size: 12px; color: #777; }

/* ===== PRODUCT CARD ===== */
.product-card { background: var(--alspek-bg); border: 1px solid var(--alspek-border); border-radius: 6px; overflow: hidden; transition: all 0.3s; }
.product-card:hover { border-color: var(--alspek-red); box-shadow: 0 4px 15px rgba(109,33,35,0.1); transform: translateY(-3px); }