/* GLOBAL box-sizing fix */
*, *::before, *::after { box-sizing: border-box !important; }
/* Lokschuppen — Clean Mobile Fix */

/* ═══ MOBILE OVERFLOW FIX ═══ */
/* The root cause: Hyvä containers use px-6 (24px) padding which with
   content creates > 375px total width. Fix by constraining ALL elements. */
html, body { 
    overflow-x: hidden !important; 
    width: 100% !important;
    max-width: 100% !important;
}

/* ═══ BRAND COLORS ═══ */
:root, :host {
    --color-bg: #f8f1bb !important;
    --color-surface: #f8f1bb !important;
    --color-white: #f8f1bb !important;
    --color-container-lighter: #f8f1bb !important;
    --color-container: #f0e8a0 !important;
    --card-bg: #f8f1bb !important;
    --form-bg: #f8f1bb !important;
}
body { background: #f8f1bb !important; }
.bg-white, .bg-surface, .bg-container-lighter, .card,
.bg-gray-100, .bg-gray-50 { background-color: #f8f1bb !important; }
footer, .page-footer, .footer.content, .copyright { background-color: #f8f1bb !important; }

/* Header */
.page-header { background-color: #f8f1bb !important; border-bottom: 2px solid #800000; }
.page-header a > img { border: none !important; outline: none !important; box-shadow: none !important; }

/* Topbar */
.lokschuppen-topbar { background: #5a0000 !important; color: #f0e8a0; }

/* Typography */
h1, h2, h3, h4 { color: #800000; }
a { color: #800000; }
a:hover { color: #a03030; }
::selection { background: #fffac0; color: #5a0000; }

/* Buttons */
.btn-primary, button.action.primary, .action.primary {
    background-color: #800000 !important; color: #fffac0 !important; border-color: #800000 !important;
}

/* Scale badges */
.lokschuppen-scale-badge {
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 0.375rem;
    background: #800000 !important; color: #fffac0;
    font-family: Georgia, serif; font-weight: 700; font-size: 0.8125rem; flex-shrink: 0;
}
.lokschuppen-category-tile { border-left: 4px solid #800000; background: #f8f1bb !important; }
.lokschuppen-category-tile:hover { background: #fffde0 !important; transform: translateX(3px); }
.lokschuppen-info-box { background: #f8f1bb !important; border-left: 4px solid #e0d890; padding: 1.5rem; border-radius: 0.375rem; }

/* Hero */
.lokschuppen-hero { position: relative; overflow: hidden; background: #5a0000; }
.lokschuppen-hero > img { width: 100%; height: 420px; object-fit: cover; opacity: 0.7; }
@media (min-width: 768px) { .lokschuppen-hero > img { height: 520px; } }
.lokschuppen-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: linear-gradient(180deg, rgba(30,5,0,0.7), rgba(30,5,0,0.2) 40%, rgba(30,5,0,0.5) 80%, rgba(30,5,0,0.8)); }
.lokschuppen-hero-title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: #fffac0; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.6); line-height: 1.1; }
.lokschuppen-hero-subtitle { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: clamp(1rem, 2.5vw, 1.5rem); color: #f0e8a0; margin-top: 0.75rem; }
.lokschuppen-hero-badge { margin-top: 2rem; padding: 0.625rem 2rem; border: 1.5px solid #f0e8a0; border-radius: 999px; font-family: "Playfair Display", Georgia, serif; font-size: 0.8125rem; color: #fffac0; letter-spacing: 0.15em; text-transform: uppercase; }

/* Footer */
.lokschuppen-footer { background: #5a0000 !important; color: #f0e8a0; }
.lokschuppen-footer a { color: #fffac0; }
.lokschuppen-footer a:hover { color: #fff; }
.lokschuppen-footer-heading { font-family: "Playfair Display", Georgia, serif; color: #fffac0; font-size: 1.125rem; margin-bottom: 0.75rem; }

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 639px) {
    /* Force ALL children to stay within viewport */
    .page-wrapper, .page-wrapper * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    /* Reduce Hyvä container padding */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    :where(main:not(.product-main-full-width,.page-main-full-width)) .columns {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Category grid single column */
    .lokschuppen-category-grid {
        grid-template-columns: 1fr !important;
    }
    /* Info box margin */
    .lokschuppen-info-box {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Hero title smaller */
    .lokschuppen-hero-title {
        font-size: 1.5rem !important;
        letter-spacing: 0.05em !important;
    }
}
/* Mobile padding fix — applied with high specificity via ID-level selector */
@media (max-width: 639px) {
    #maincontent .columns,
    #maincontent .column.main,
    .page-main .columns,
    .footer.content,
    .page-bottom,
    .container.py-8,
    .container.py-6,
    .container.text-center {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .page-wrapper * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Content needs right padding — text sits flush against screen edge */
.column.main, .footer.content, .page-bottom {
    padding-right: 1rem !important;
}

/* Target specific sections by ID and class */
#maincontent { padding-right: 1rem !important; padding-left: 1rem !important; }
#hyva-demo-hero { padding-right: 1rem !important; padding-left: 1rem !important; }
.lokschuppen-info-box { margin-right: 1rem !important; }
.footer.content { padding-right: 1rem !important; padding-left: 1rem !important; }