/* --- Global --- */
:root {
    --main-color: #2c3e50; /* Default color, wordt overschreven in de view */
}
html {
    scroll-padding-top: 150px; /* Zorgt voor ruimte bovenaan bij anker-scrolls */
}

/* --- TV View Styles --- */
body.tv-view {
    background-color: var(--main-color);
    color: white;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 28px 32px 0;
}

/* AANGEPAST: Gebruikt nu CSS Columns in plaats van Masonry/float. */
.tv-view .menu-grid {
    /* Laat de browser bepalen hoeveel kolommen er passen, met een minimum breedte. */
    column-width: 340px; 
    /* De ruimte tussen de kolommen. */
    column-gap: 2.5rem;
	
    max-height: 1080px;

}

.tv-view .category-block {
    /* Dit is de belangrijkste regel: voorkom dat een categorieblok over twee kolommen wordt gesplitst. */
    break-inside: avoid;
    /* Voeg wat ruimte toe aan de onderkant om te voorkomen dat blokken te dicht op elkaar staan. */
    margin-bottom: 2.5rem;
    /* Zorgt ervoor dat het blok zich correct gedraagt binnen de kolom. */
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.tv-view .category-title {
    background-color: var(--secondary-color);
    color: var(--main-color);
    text-align: center;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    font-size: 26px;
    font-weight: 900;
    margin: 0 0 10px 0;
    line-height: 30px;
    height: 30px;
    padding: 10px;
}
.tv-view .product-list { list-style: none; padding: 0 10px; margin: 0; }
.tv-view .product-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	padding: 0;
	font-size: 22px;
/*    line-height: 35px; */
	min-height: 30px;
	height: 30px;
}
.tv-view .product-name {
	flex-grow: 1;
    margin-right: 2%;
    width: 67%;
	overflow: hidden;
    white-space: nowrap;
}
.tv-view .product-quantity {
    padding: 0;
    width: 11%;
    text-align: center;
    font-size: 80%;
}
.tv-view .product-price {
	width: 20%;
    text-align: right;
}
.tv-view .product-description {
	width: 100%;
    padding-left: 1rem;
    opacity: 0.9;
    font-size: 85%;
}
.tv-view .product-item.shiftup {
    margin-top: -30px;
}

/* --- Mobile View Styles --- */
/* ... (alle mobiele stijlen blijven ongewijzigd) ... */
body.mobile-view { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f9f9f9; margin: 0; }
.mobile-header {
    background: var(--main-color);
    color: white;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 60px;
    line-height: 60px;
}
.mobile-header h1 { margin: 0; }
.menu-list { padding: 0 1rem; }
.mobile-category h2 { font-size: 1.2rem; margin: 1.5rem 0 1rem 0; font-weight: 900; }
.mobile-category ul { list-style: none; padding: 0; background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.mobile-category li { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.8rem 1rem; border-bottom: 1px solid #eee; }
.mobile-category li:last-child { border-bottom: none; }
.mobile-category .product-info p { margin: 0.25rem 0 0 0; color: #666; font-size: 0.9em; }
.mobile-category .price { font-weight: bold; color: #333; white-space: nowrap; padding-left: 1rem; }

/* Sticky Category Navigation (Mobile) */
.category-nav {
    position: sticky;
    top: 60px; /* Hoogte van de header, pas aan indien nodig */
    background-color: #ffffff;
    z-index: 10;
    display: flex;
    overflow-x: auto;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #e0e0e0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.category-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
.category-nav a {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    border-radius: 20px;
    margin-right: 0.5rem;
    background-color: #f0f0f0;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.category-nav a:hover {
    background-color: #ddd;
}
.lang-switcher-mobile {
    position: sticky;
    top: 60px; /* Pas aan op basis van header + category nav hoogte */
    background: #f9f9f9;
    padding: 0.5rem 1rem;
    text-align: center;
    z-index: 5;
    border-bottom: 1px solid #e0e0e0;
}
.lang-switcher-mobile a {
    text-decoration: none;
    color: #888;
    font-weight: bold;
    padding: 0 10px;
}
.lang-switcher-mobile a.active {
    color: var(--main-color);
}

.sold-out {
    text-decoration: line-through;
    opacity: 0.3;
}
.mobile-view .sold-out {
    background-color: #fafafa; /* Lichte achtergrond om het subtiel te onderscheiden */
}