/* =====================================================================
    0) max-width: 1200px
   ===================================================================== */
@media (max-width: 1200px) {
	.all-sect {
		width: 80%;
		margin: 0 auto;
	}
}

/* =====================================================================
	1) max-width: 1020px
   ===================================================================== */
@media (max-width: 1020px) {
	.all-sect {
		width: 95%;
		margin: 0 auto;
	}
}

/* =====================================================================
	2) max-width: 850px
   ===================================================================== */
@media (max-width: 850px) {
	.all-sect {
		width: 95%;
		margin: 0 auto;
	}
}

/* =====================================================================
	3) max-width: 768px
   ===================================================================== */
@media (max-width: 768px) {
	.all-sect {
		width: 95%;
		margin: 0 auto;
	}
}

/* =====================================================================
	4) max-width: 700px
   ===================================================================== */
@media (max-width: 700px) {
	.all-sect {
		width: 95%;
		margin: 0 auto;
	}
}

/* =====================================================================
	5) max-width: 599px
   ===================================================================== */
@media (max-width: 599px) {
	.all-sect {
		width: 95%;
		margin: 0 auto;
	}
}

/* =====================================================================
	6) max-width: 400px
   ===================================================================== */
@media (max-width: 400px) {
	.all-sect {
		width: 95%;
		margin: 0 auto;
	}
}

/* =====================================================================
    0) max-width:                                               1200px
   ===================================================================== */

/* ========== HEADER ========== */
@media (max-width: 1200px) {
	.navbar {
		padding: 0 10%;
		width: 100%;
	}
	/* HEADER BETWEEN */
	.header-between {
		display: none;
	}
	.header-text {
		font-size: 15px;
		top: 330px;
		padding: 0 10%;
		width: 100%;
	}
	/* ========== MONTHLY PROMO ========== */
	.monthly-promo {
		padding: 50px 0px;
	}
	.monthly-promo-h1 {
		margin-top: 0px;
	}
	/* ========== ABOUT-US ========== */
	.about-us-wrapper {
		padding: 50px 0px;
	}
	/* ============ PROMO SECTION - IMAGE =========*/
	.promo-wrapper {
		padding: 70px 0px;
	}
	/* ==========  SECTION CONTACT ========== */
	.contact-wrapper {
		padding: 70px 0px;
	}
	/* ========== CONTACT FORM - FORMULÁŘ ========== */
	.contact-form-wrapper {
		padding: 70px 0px;
	}
	.contact-form {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.message {
		max-width: 100%;
	}

	/* ========== SPARE PARTS ========== */
	.section-spare-parts {
		width: 80% !important;
	}
	/* ========== PRICE LIST ========== */
	.table-wrapper {
		width: 80%;
	}
}

/* =====================================================================
	1) max-width:                                               1020px
   ===================================================================== */

@media (max-width: 1020px) {
	/* ========== HEADER ========== */
	/* (Původní styly pro .navbar, pokud byly pro 1020px) */
	.navbar {
		padding: 0 80px;
		width: 100%;
	}
	.header-text {
		font-size: 15px;
		top: 330px;
		width: 100%;
		padding: 0 80px;
	}

	/* ========== ABOUT-US ========== */
	.about-us-wrapper {
		padding: 50px 80px;
		width: 100%;
	}

	/* ========== PROMO SECTION ========== */
	.promo-wrapper {
		padding: 0 80px;
		width: 100%;
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.promo-card {
		height: 150px;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 8px;
		position: relative;
	}
	/* ========== CONTACT SECTION ========== */
	.contact-wrapper {
		padding: 0 80px;
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.contact-logo-wrapper {
		justify-content: center;
	}
	.contact-text {
		align-items: center;
	}
	/* ========== PRICE LIST ========== */
	.table-wrapper {
		padding: 0 30px;
		width: 100%;
	}
	/* ========== FOOTER ========== */
	.footer-container {
		width: 90%;
		margin: 0 auto;
	}

	/* ========== SPARE PARTS ========== */

	.spare-parts-wrapper {
		flex-direction: column;
		align-items: center;
	}
	.selection-photo,
	.slider-wrapper {
		flex: 0 0 auto;
		max-width: 300px;
	}
	.spare-parts-content {
		width: 100%;
		padding: 10px;
	}
	.swiper-slide {
		min-height: 180px;
	}
	.spare-parts-title {
		text-align: center;
	}
}

/* =====================================================================
	2) max-width:           									850px
	 =================================================================== */
@media (max-width: 850px) {
	/* ========== HEADER ========== */
	.navbar .links {
		display: none;
	}
	.navbar .toggle-btn {
		display: block;
	}
	.dropdown-menu {
		display: block;
	}
	/* ========== MONTHLY PROMO ========== */
	.monthly-promo-images {
		display: none;
	}
	.monthly-content {
		flex-basis: 100%;
	}
}

/*  =====================================================================
	3) max-width:                                  	            768px
    ===================================================================== */
@media (max-width: 768px) {
	/* Např. SPARE PARTS */
	.spare-parts-wrapper {
		flex-direction: column;
		align-items: center;
	}
	.selection-photo,
	.slider-wrapper {
		flex: 0 0 auto;
		max-width: 300px;
	}
	.spare-parts-content {
		width: 100%;
		padding: 10px;
	}
	.swiper-slide {
		min-height: 180px;
	}
	.message {
		width: auto;
	}
	#car-service.service-wrapper,
	#tire-service.service-wrapper,
	#car-electricity-service.service-wrapper,
	#air-conditioner-service.service-wrapper,
	#technical-control-service.service-wrapper,
	#spare-parts.service-wrapper,
	#clean-car.service-wrapper,
	#wrecked-vehicle.service-wrapper,
	#welding.service-wrapper {
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 30px;
		gap: 10px;
	}
	#car-service .service-photo,
	#tire-service .service-photo,
	#car-electricity-service .service-photo,
	#air-conditioner-service .service-photo,
	#technical-control-service .service-photo,
	#spare-parts .service-photo,
	#clean-car .service-photo,
	#wrecked-vehicle .service-photo,
	#welding .service-photo {
		height: 150px;
		flex-basis: 100%;
	}
}

/*  =====================================================================
	4) max-width:sloupce pod sebe ve spare_parts.html               700px
	===================================================================== */
/* ------- 4) Responsivita — pod 700 px sloupce pod sebe ------------- */
@media (max-width: 700px) {
	.container-spare-parts {
		grid-template-columns: 1fr; /* z 2 → 1 sloupec */
	}
	.sidebar-categories {
		margin-bottom: var(--gap-lg); /* vizuální oddělení */
	}
}

/*  =====================================================================
	5) max-width:                                                 599px
	===================================================================== */
@media (max-width: 599px) {
	/* ========== HEADER ========== */
	.navbar {
		padding: 20px 20px;
		width: 100%;
	}
	.dropdown-menu {
		width: unset;
		left: 32px;
	}
	.header-text {
		font-size: 15px;
		top: 340px;
		width: 100%;
		padding: 0 20px;
	}
	/* ========== MONTHLY PROMO ========== */
	.monthly-promo {
		padding: 30px 32px;
	}
	/* ========== PROMO SECTION ========== */
	.promo-wrapper {
		padding: 0 32px;
		width: 100%;
		gap: 15px;
	}
	.promo-card {
		height: 100px;
		width: 250px;
	}
	/* ========== ABOUT-US ========== */
	.about-us-wrapper {
		padding: 30px 32px;
		width: 100%;
	}
	.section-about-us {
	}
	.icon-container {
		flex-direction: column;
	}
	/* ========== CONTACT SECTION ========== */
	.contact-wrapper {
		padding: 0 32px;
		width: 100%;
	}
	.contact-text {
		flex-basis: 100%;
		align-items: center;
	}
	.contact-logo-wrapper {
		justify-content: center;
	}
	/* ========== PRICE LIST ========== */
	.table-wrapper {
		width: 90%;
		padding: 0px;
	}

	.footer-container {
		width: 95%;
		margin: 0 auto;
	}
	.section-spare-parts {
		width: 90% !important;
	}
}

/*  =====================================================================
	6) max-width:                                               400px
	===================================================================== */
@media (max-width: 400px) {
	/* ========== TOP CIRCLE ========== */
	.top-circle {
		bottom: 20px;
		right: 20px;
	}
}

/* ================================================================
   7) Spare_parts.html – responzivita pro telefony (max‐width: 599px)
   ================================================================ */
/* 1200 px */
@media (max-width: 1200px) {
	.section-spare-parts {
		width: 90%;
	}
}

/* 850 px */
@media (max-width: 850px) {
	.container-spare-parts {
		gap: 20px; /* místo var(--gap-md) */
	}
	.sidebar-categories {
		flex: 0 0 200px;
	}
}

/* 768 px */
@media (max-width: 768px) {
	.container-spare-parts {
		flex-direction: column;
	}
	.sidebar-categories {
		border-right: none;
		border-bottom: 1px solid #15324c; /* dark‐blue */
		padding-bottom: 10px; /* místo var(--gap-sm) */
	}
	.category-toggle {
		width: 200px;
		margin: 0 auto;
	}
	.subcategory-list {
		padding-left: 0;
		text-align: center;
	}
}

/* ─────────────────────────────────────────────────────────────
   TEĎ: KLÍČOVÉ PRAVIDLO PRO TELEFONY
   (rozdělíme menu a karty, obrázky nad textem)
   max‐width: 599px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
	/* 1) Zúžení celé sekce, aby zabírala 90 % šířky mobilu */
	.section-spare-parts {
		width: 90%;
	}

	/* 2) Vynutíme u containeru sloupcové (vertikální) rozložení:
        - nejprve sidebar (seznam kategorií),
        - potom až seznam karet dílů */
	.container-spare-parts {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--gap-md);
	}

	/* 3) Sidebar (seznam kategorií) nastavíme, aby zabíral 100 % šířky */
	.sidebar-categories {
		flex: none !important; /* zrušíme jakékoliv flex:0 0 X z vyšších breakpointů */
		width: 100% !important;
		margin-bottom: var(--gap-md);
	}

	/* 4) Uvnitř každé karty dílu přepneme wrapper na sloupcové (image nad textem) */
	.spare-parts-wrapper {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--gap-md);
	}

	/* 5) Obrázek (slider) roztahneme na plnou šířku karty a přidáme odsazení pod něj */
	.selection-photo {
		flex: none !important;
		width: 100% !important;
		margin-bottom: var(--gap-sm) !important;
	}
	.slider-wrapper {
		max-width: 100% !important;
	}

	/* 6) Nadpis dílu (název) vycentrujeme */
	.spare-parts-title {
		text-align: center;
	}

	/* 7) Menší vnitřní odsazení v kartě, aby se vešlo více obsahu */
	.spare-part {
		padding: var(--gap-sm) !important;
	}

	/* 8) Pokud potřebujete, aby i u mobile‐formu (hledání) tlačítko zabíralo 100% */
	.search-form {
		display: flex;
		flex-direction: column;
		gap: var(--gap-sm);
		margin-bottom: var(--gap-md);
	}
	.search-form button {
		width: 100%;
	}
}

/* 400 px – jen lehce přizpůsobíme font velikost, pokud by bylo opravdu hodně úzké */
@media (max-width: 400px) {
	.category-toggle {
		font-size: 0.9rem;
	}
}

/*  =====================================================================
	8) subcategories.html
	===================================================================== */
@media (max-width: 850px) {
	.parts-grid {
		gap: 25px;
	}
}

@media (max-width: 599px) {
	.subcategory-section {
		width: 90% !important;
	}
	.subcat-grid {
		flex-direction: column;
		align-items: stretch;
	}
	.subcategory-head {
		align-items: flex-start;
	}
	.subcat-card {
		justify-content: space-between;
		width: 100%;
	}
}