/* ============================================================
   Mobilní vysouvací panel pro #column-left (menu kategorií,
   filtr barev, značky) — čistě přídavný soubor.

   Nemění ani neřádkuje nic v existujícím stylesheet.css — jen
   přebíjí mobilní `display:none` u #column-left vlastní vyšší
   specificitou/pořadím načtení (+ !important jako pojistka).

   Nasazeno přes vqmod (mobile_filters.xml), viz <link> v hlavičce.
   ============================================================ */

/* Mimo mobilní media query musí tlačítko/overlay zůstat skryté.
   DŮLEŽITÉ: tohle pravidlo musí být PŘED media query níže, ne za ní —
   při stejné specificitě (jeden ID selektor) rozhoduje pořadí v
   souboru, a pravidlo napsané později vždy vyhraje bez ohledu na to,
   jestli je v media query, nebo ne. */
#column-left .mobile-filters-close,
#column-right .mobile-filters-close,
#mobile-filters-toggle,
#mobile-filters-overlay {
	display: none;
}

@media only screen and (max-width: 759px) {

	#column-left,
	#column-right {
		display: block !important;
		position: fixed;
		top: 0;
		/* width: 85%; */
		max-width: 320px;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		z-index: 10299;
		transition: transform 0.25s ease;
		/* padding: 15px; */
		box-sizing: border-box;
		scrollbar-width: thin;       /* Firefox - tenký, ale viditelný scrollbar */
	}
	#column-left::-webkit-scrollbar,
	#column-right::-webkit-scrollbar {
		width: 5px;                  /* Chrome, Safari, novější Edge - tenký scrollbar */
	}
	#column-left::-webkit-scrollbar-thumb,
	#column-right::-webkit-scrollbar-thumb {
		background: rgba(0,0,0,0.25);
		border-radius: 3px;
	}
	#column-left::-webkit-scrollbar-track,
	#column-right::-webkit-scrollbar-track {
		background: transparent;
	}

	/* Levý panel vyjíždí zleva */
	#column-left {
		left: 0;
		transform: translateX(-105%);
		box-shadow: 2px 0 10px rgba(0,0,0,0.25);
	}

	/* Pravý panel vyjíždí zprava (zrcadlené) */
	#column-right {
		right: 0;
		transform: translateX(105%);
		box-shadow: -2px 0 10px rgba(0,0,0,0.25);
	}

	#column-left.mobile-filters-open,
	#column-right.mobile-filters-open {
		transform: translateX(0);
	}

	/* Poslední box v column-left je "Info + bonusy" — na mobilu
	   duplicitní se stejnými odkazy ve footeru (class="shown-phone"),
	   proto se v panelu nezobrazuje. */
	/* #column-left > .box:last-of-type. */
	#column-left .sidebarmenu
	{
		display: none;
	}

	#mobile-filters-toggle {
		display: block;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 10297;
		background: #f3f3f3;
		border: solid 1px #cccccc;
		border-left: none;
		border-radius: 0 8px 8px 0;
		color: #333333;
		font-size: 13px;
		font-weight: bold;
		padding: 16px 0px;
		box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
		cursor: pointer;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		letter-spacing: 1px;
	}

	#mobile-filters-overlay {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 10298;
	}

	#mobile-filters-overlay.active {
		display: block;
	}

	#column-left .mobile-filters-close,
	#column-right .mobile-filters-close {
		background: #e3e3e3;
		color: #ff3333;
		display: block;
		text-align: right;
		font-weight: bold;
		line-height: 2.8em;
		padding: 0 15px;
		border-bottom: 1px solid #eee;
		margin: -15px 0 10px 0;
		cursor: pointer;
	}
}